/* ============================================================================
   FUNDS BENCHMARK — Design system rollout across all pages

   Loaded AFTER fundbenchmark-design-system.css so these page-scoped overrides
   win the cascade. Each section retunes a specific surface so every page
   reads as an expression of the design system: same cards, same chips, same
   pills, same button language, same tokens.

   Non-destructive: markup untouched. Class selectors are the existing
   page-prefixed ones (.ff-*, .fc-*, .bf-*, .sd-*, etc.) — we're just
   re-pointing their visual attributes at design-system tokens.

   Section index:
     1. Common page chrome (nav subs, containers, section titles)
     2. Fund Finder — cards, filters, comparison tray, quick-screens
     3. Fund Comparison — table, legend, holdings columns, allocation bars
     4. Homepage v2 — hero, feature cards, CTAs
     5. Pricing — plan cards, feature list, comparison table, billing switch
     6. Detail pages (Sector / Country / Holding / Asset / Manager / Category)
     7. Build-a-Fund — steps, select cards, holdings list, preview sidebar
     8. Auth / Account / FAQ / Help / Legal — low-chrome pages
   ============================================================================ */

/* ══════════════════════════════════════════════════════════════════════
   1. COMMON PAGE CHROME
   ══════════════════════════════════════════════════════════════════════ */

.fb-container,
.container { color: var(--text); }

/* Section titles everywhere — standardize the small-caps eyebrow pattern */
.section-title,
.fb-section-title,
.ff-section-title,
.fc-section-title,
.bf-section-title,
.sd-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: 0 0 var(--sp-3) 0;
}

/* Any page-scoped "nav" subhead (below the main site header) */
.ff-nav,
.fc-nav,
.bf-nav,
.sd-nav,
.sub-nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ══════════════════════════════════════════════════════════════════════
   2. FUND FINDER  (page-fund-finder.php + js/fund-finder.js)
   ══════════════════════════════════════════════════════════════════════ */

.ff-page {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}

/* Fund card — primary list atom. Design system anatomy:
   logo + brand + badges → name → isin·sector meta → divider → 4 stats → actions */
.ff-fund-card,
.ff-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-4);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.ff-fund-card:hover,
.ff-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-elevated);
}

.ff-fund-logo,
.ff-card-logo {
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ff-fund-brand,
.ff-card-brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  color: var(--text-2);
}

.ff-fund-name,
.ff-card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  color: var(--text);
  margin-top: var(--sp-2);
}

.ff-fund-meta,
.ff-card-isin {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-top: var(--sp-1);
}

/* Stat chips inside the fund card */
.ff-stat-row,
.ff-card-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-soft);
}
.ff-stat,
.ff-card-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2);
  border-radius: var(--r-md);
}
.ff-stat-label,
.ff-card-stat-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ff-stat-value,
.ff-card-stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ff-stat-value.pos,
.ff-card-stat-value.pos { color: var(--pos); }
.ff-stat-value.neg,
.ff-card-stat-value.neg { color: var(--neg); }

/* Filter sidebar */
.ff-filters,
.filter-sidebar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-4);
}
.filter-group,
.ff-filter-group {
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.filter-group:last-child,
.ff-filter-group:last-child { border-bottom: none; }

.filter-option,
.ff-filter-option {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.filter-option:hover,
.ff-filter-option:hover { color: var(--text); }

/* Quick screens row ("Hidden Gems", "Steady Performers", etc.) */
.discover-card,
.ff-discover-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-4);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.discover-card:hover,
.ff-discover-card:hover {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--gold-08) 0%, var(--surface) 100%);
  transform: translateY(-2px);
}
.discover-card.active,
.ff-discover-card.active {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--gold-15) 0%, var(--surface) 100%);
}

/* Comparison sticky tray */
.comparison-bar,
.ff-compare-tray {
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25);
}
[data-theme="light"] .comparison-bar,
[data-theme="light"] .ff-compare-tray {
  box-shadow: 0 -4px 12px rgba(16, 16, 20, 0.08);
}

.comparison-btn {
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: var(--r-lg);
  padding: 10px 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.comparison-btn:hover { background: var(--gold-light); }

/* Mobile filter drawer */
.ff-drawer {
  background: var(--surface);
  border-left: 1px solid var(--border);
}

/* Empty / loading states */
.empty-state,
.empty-state-title,
.empty-state-subtitle,
.ff-empty {
  color: var(--text-muted);
  font-family: var(--font-body);
}
.empty-state-title,
.ff-empty-title {
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════
   3. FUND COMPARISON  (page-fund-comparison.php)
   ══════════════════════════════════════════════════════════════════════ */

.fc-page {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}

/* Fund color swatches at top (2-5 fund overlay) — use the cmp-* palette */
.fc-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text);
}
.fc-pill[data-fund="1"] { border-left: 3px solid var(--fb-cmp-1); }
.fc-pill[data-fund="2"] { border-left: 3px solid var(--fb-cmp-2); }
.fc-pill[data-fund="3"] { border-left: 3px solid var(--fb-cmp-3); }
.fc-pill[data-fund="4"] { border-left: 3px solid var(--fb-cmp-4); }
.fc-pill[data-fund="5"] { border-left: 3px solid var(--fb-cmp-5); }

/* Comparison table */
.fc-table,
.comparison-table {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 13px;
}
.fc-table th,
.comparison-table th {
  background: var(--surface-2);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.fc-table td,
.comparison-table td {
  padding: var(--sp-3) var(--sp-4);
  color: var(--text);
  border-bottom: 1px solid var(--border-soft);
  font-variant-numeric: tabular-nums;
}
.fc-table tr:last-child td,
.comparison-table tr:last-child td { border-bottom: none; }
.fc-table .pos, .comparison-table .pos { color: var(--pos); }
.fc-table .neg, .comparison-table .neg { color: var(--neg); }

/* Section containers */
.fc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-5);
  box-shadow: var(--shadow-card);
}
.fc-card + .fc-card { margin-top: var(--sp-4); }

/* Holdings columns (one per fund) */
.fc-hold-col {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
}
.fc-hold-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
}
.fc-hold-item:last-child { border-bottom: none; }

/* Allocation bars */
.fc-alloc-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
}
.fc-alloc-bar {
  flex: 1;
  height: 8px;
  background: var(--surface-2);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.fc-alloc-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--r-pill);
  transform-origin: left;
  animation: fb-bar-grow 1.1s var(--ease) both;
}

/* Period buttons (reuse fund-detail treatment) */
.fc-period-btn {
  padding: 6px 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.fc-period-btn:hover:not(.active) { border-color: var(--accent); color: var(--accent); }
.fc-period-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* ══════════════════════════════════════════════════════════════════════
   4. HOMEPAGE v2  (page-homepage-v2.php + fbh-homepage.css)
   ══════════════════════════════════════════════════════════════════════ */

.fb-hero {
  background: var(--bg);
  color: var(--text);
  position: relative;
  overflow: hidden;
}

/* Subtle gold radial glow — the design system signature. Overrides any
   hardcoded hex in fbh-homepage.css. */
.fb-hero-gradient {
  background: radial-gradient(ellipse at top, var(--gold-08) 0%, transparent 60%);
}
.fb-hero-gradient-2 {
  background: radial-gradient(ellipse at 70% 30%, rgba(96, 165, 250, 0.05) 0%, transparent 55%);
}

.fb-hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
  letter-spacing: var(--tracking-tight);
}

.fb-hero-subtitle {
  color: var(--text-2);
  font-family: var(--font-body);
}

/* CTA buttons on homepage — reuse design-system button primitives */
.fb-btn-hero-primary,
.fb-cta-primary {
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%);
  color: var(--accent-ink);
  border: 1px solid var(--gold);
  border-radius: var(--r-lg);
  padding: 12px 24px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  box-shadow: var(--shadow-cta-gold);
}
.fb-btn-hero-primary:hover,
.fb-cta-primary:hover {
  background: linear-gradient(180deg, #ecdfb5 0%, var(--gold-light) 50%, var(--gold) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 8px 20px rgba(201,169,98,0.4);
}

.fb-btn-hero-secondary,
.fb-cta-secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--r-lg);
  padding: 12px 24px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.fb-btn-hero-secondary:hover,
.fb-cta-secondary:hover { background: var(--gold-15); }

/* Feature cards on the homepage */
.fb-feature,
.fb-feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-5);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.fb-feature:hover,
.fb-feature-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}

.fb-feature-title,
.fb-feature-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--text);
  margin-bottom: var(--sp-2);
}
.fb-feature-body {
  font-family: var(--font-body);
  color: var(--text-2);
  line-height: var(--lh-body);
}

/* ══════════════════════════════════════════════════════════════════════
   5. PRICING  (page-pricing.php)
   ══════════════════════════════════════════════════════════════════════ */

.fb-plan-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-6);
  box-shadow: var(--shadow-card);
  transition: all var(--dur) var(--ease);
}
.fb-plan-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-elevated);
}
.fb-plan-card.popular {
  border-color: var(--accent);
  box-shadow: var(--shadow-cta-gold), var(--shadow-card);
}
.fb-plan-card.popular::before {
  background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--gold-dark));
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.fb-plan-price {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

.fb-plan-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: var(--lh-snug);
}
.fb-plan-feature svg { color: var(--pos); flex-shrink: 0; }
.fb-plan-feature.disabled { color: var(--text-dim); }
.fb-plan-feature.disabled svg { color: var(--text-dim); }

.fb-plan-cta-primary {
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%);
  color: var(--accent-ink);
  border: 1px solid var(--gold);
  border-radius: var(--r-lg);
  padding: 10px 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  width: 100%;
  transition: all var(--dur) var(--ease);
}
.fb-plan-cta-primary:hover { box-shadow: 0 4px 14px rgba(201, 169, 98, 0.35); }

.fb-plan-cta-secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--r-lg);
  padding: 10px 20px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  width: 100%;
  transition: all var(--dur) var(--ease);
}
.fb-plan-cta-secondary:hover { background: var(--gold-15); }

.fb-plan-cta-current {
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 10px 20px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  width: 100%;
  cursor: default;
}

.fb-billing-switch {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 4px;
}
.fb-billing-switch button {
  padding: 6px 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  color: var(--text-2);
  background: transparent;
  border: none;
  border-radius: calc(var(--r-xl) - 4px);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.fb-billing-switch button.active {
  background: var(--accent);
  color: var(--accent-ink);
}

.fb-comparison-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
}
.fb-comparison-table th {
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════════════
   6. DETAIL PAGES — Sector / Country / Holding / Asset / Manager / Category
   ══════════════════════════════════════════════════════════════════════ */

.sd-page,
.cd-page,
.hd-page,
.ad-page,
.md-page,
.fcat-page {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}

/* KPI values on sector/country/holding — unify with design-system mono style */
.sd-page .kpi-value,
.cd-page .kpi-value,
.hd-page .kpi-value,
.ad-page .kpi-value,
.md-page .kpi-value,
.fcat-page .kpi-value {
  font-family: var(--font-mono) !important;
  font-size: 22px;
  font-weight: 500;
  color: var(--text) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.sd-page .kpi-value.up,   .cd-page .kpi-value.up,   .hd-page .kpi-value.up,
.ad-page .kpi-value.up,   .md-page .kpi-value.up,   .fcat-page .kpi-value.up { color: var(--pos) !important; }
.sd-page .kpi-value.down, .cd-page .kpi-value.down, .hd-page .kpi-value.down,
.ad-page .kpi-value.down, .md-page .kpi-value.down, .fcat-page .kpi-value.down { color: var(--neg) !important; }

.sd-page .kpi-label,
.cd-page .kpi-label,
.hd-page .kpi-label,
.ad-page .kpi-label,
.md-page .kpi-label,
.fcat-page .kpi-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Gold accent bar before section titles */
.sd-page .section-title::before,
.cd-page .section-title::before,
.hd-page .section-title::before {
  background: var(--accent);
}

/* Fund tables within detail pages */
.sd-page .fund-table,
.cd-page .fund-table,
.hd-page .fund-table,
.ad-page .fund-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
}
.sd-page .fund-table th,
.cd-page .fund-table th,
.hd-page .fund-table th,
.ad-page .fund-table th {
  background: var(--surface-2);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sd-page .fund-table tr:hover,
.cd-page .fund-table tr:hover,
.hd-page .fund-table tr:hover,
.ad-page .fund-table tr:hover {
  background: var(--gold-08);
}

/* Tab buttons */
.sd-page .tab-btn,
.cd-page .tab-btn,
.hd-page .tab-btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 7px 14px;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.sd-page .tab-btn:hover,
.cd-page .tab-btn:hover,
.hd-page .tab-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.sd-page .tab-btn.active,
.cd-page .tab-btn.active,
.hd-page .tab-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   7. BUILD-A-FUND  (css/build-a-fund.css page)
   ══════════════════════════════════════════════════════════════════════ */

.bf-page {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}

.bf-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-5);
  box-shadow: var(--shadow-card);
}

.bf-select-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.bf-select-card:hover {
  border-color: var(--accent);
  background: var(--gold-08);
}
.bf-select-card.selected {
  border-color: var(--accent);
  background: var(--gold-15);
}

.bf-holding {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-2);
}

.bf-holding-wt input {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  padding: 4px 8px;
  width: 64px;
  text-align: right;
  transition: border-color var(--dur) var(--ease);
}
.bf-holding-wt input:focus { outline: none; border-color: var(--gold-light); }

.bf-preview {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-4);
  box-shadow: var(--shadow-card);
}

.bf-badge {
  display: inline-flex;
  padding: 3px 7px;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--r-xs);
}
.bf-badge.gold  { background: var(--gold-15); color: var(--accent); }
.bf-badge.green { background: rgba(74, 222, 128, 0.15); color: var(--pos); }
.bf-badge.red   { background: rgba(248, 113, 113, 0.15); color: var(--neg); }
.bf-badge.blue  { background: rgba(96, 165, 250, 0.15); color: var(--fb-info); }

.bf-risk-val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}
.bf-risk-val.low      { color: var(--pos); }
.bf-risk-val.mid      { color: var(--fb-warning); }
.bf-risk-val.high     { color: #fb923c; }
.bf-risk-val.extreme  { color: var(--neg); }

.bf-btn-gold {
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%);
  color: var(--accent-ink);
  border: 1px solid var(--gold);
  border-radius: var(--r-lg);
  padding: 10px 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.bf-btn-gold:hover { box-shadow: 0 4px 14px rgba(201, 169, 98, 0.35); }

.bf-btn-balance {
  background: var(--gold-08);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--r-lg);
  padding: 10px 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.bf-btn-balance:hover { background: var(--gold-15); }

/* ══════════════════════════════════════════════════════════════════════
   8. AUTH / ACCOUNT / FAQ / HELP / LEGAL — low-chrome pages
   ══════════════════════════════════════════════════════════════════════ */

.fb-auth-page,
.fb-account-page,
.fb-faq-page,
.fb-help-page,
.fb-legal-page,
.page-template-page-auth,
.page-template-page-user-account,
.page-template-page-faq,
.page-template-page-help,
.page-template-page-privacy,
.page-template-page-terms {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}

/* FAQ accordion */
.fb-faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--text);
}
.fb-faq-question:hover { border-color: var(--accent); }
.fb-faq-question svg {
  stroke: var(--text-muted);
  transition: stroke var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.fb-faq-question.open svg {
  stroke: var(--accent);
  transform: rotate(180deg);
}
.fb-faq-answer {
  color: var(--text-2);
  font-family: var(--font-body);
  line-height: var(--lh-body);
  padding: var(--sp-3) var(--sp-4);
}

/* Forms (auth, account) */
.fb-form input,
.fb-form select,
.fb-form textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  transition: border-color var(--dur) var(--ease);
}
.fb-form input:focus,
.fb-form select:focus,
.fb-form textarea:focus {
  border-color: var(--accent);
  outline: none;
}
.fb-form label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: var(--sp-1);
}

/* ══════════════════════════════════════════════════════════════════════
   9. UNIVERSAL MICRO-INTERACTIONS (fund card lift, subtle hover, etc.)
   ══════════════════════════════════════════════════════════════════════ */

/* Apply lift animation to all card classes that don't already have one */
.fb-card.fb-lift,
.ff-fund-card,
.ff-card,
.fc-card,
.discover-card,
.ff-discover-card,
.fb-feature-card,
.fb-plan-card,
.bf-select-card {
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

/* Disable all motion when prefers-reduced-motion is set — inherited from DS */

/* ══════════════════════════════════════════════════════════════════════
   10. LOADING STATES — skeleton shimmer everywhere (replaces spinners)
   ══════════════════════════════════════════════════════════════════════
   Original code uses rotating-ring spinners. Design system prefers
   horizontal shimmer lines that foreshadow the content shape. We convert
   via CSS alone: hide the spinner, replace with pseudo-element skeleton
   lines in the loading container. Markup untouched. */

/* Hide the original rotating-ring spinners */
.fd-loading-spinner,
.ff-loading-spinner,
.fc-loading-spinner,
.bf-modal-loading .bf-spinner,
.hd-loading-spinner,
.fl-spinner,
.fb-spinner-ring {
  display: none !important;
}

/* Keep design-system .fb-spinner available for inline cases — small,
   subtle, gold. The skeleton treatment is for page-level loading blocks. */

/* Universal skeleton-shimmer: apply to any loading container and it will
   render three stacked shimmer lines in place of the spinner. */
.fd-loading-state,
.ff-loading-state,
.fc-loading,
.hd-loading,
.bf-modal-loading,
.fl-loading {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  align-items: stretch;
  max-width: 520px;
  margin: 0 auto;
}
.fd-loading-state::before,
.ff-loading-state::before,
.fc-loading::before,
.hd-loading::before,
.bf-modal-loading::before,
.fl-loading::before {
  content: '';
  display: block;
  height: 16px;
  width: 100%;
  max-width: 320px;
  background: var(--surface-2);
  border-radius: var(--r-xs);
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(
    90deg,
    rgba(201, 169, 98, 0) 0%,
    rgba(201, 169, 98, 0.10) 40%,
    rgba(255, 245, 216, 0.18) 50%,
    rgba(201, 169, 98, 0.10) 60%,
    rgba(201, 169, 98, 0) 100%
  );
  background-size: 240% 100%;
  animation: fb-slide 2s linear infinite;
}
.fd-loading-state::after,
.ff-loading-state::after,
.fc-loading::after,
.hd-loading::after,
.bf-modal-loading::after,
.fl-loading::after {
  content: '';
  display: block;
  height: 12px;
  width: 60%;
  background: var(--surface-2);
  border-radius: var(--r-xs);
  background-image: linear-gradient(
    90deg,
    rgba(201, 169, 98, 0) 0%,
    rgba(201, 169, 98, 0.10) 40%,
    rgba(255, 245, 216, 0.18) 50%,
    rgba(201, 169, 98, 0.10) 60%,
    rgba(201, 169, 98, 0) 100%
  );
  background-size: 240% 100%;
  animation: fb-slide 2s linear infinite;
  animation-delay: 0.2s;
}

/* Loading text dimmed — sits alongside the skeleton lines */
.fd-loading-text,
.ff-loading-text,
.fc-loading-text,
.hd-loading-text,
.fl-loading-text {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-top: var(--sp-2);
  opacity: 0.7;
}

/* Reusable skeleton-card block: apply .fb-skeleton-card on any div and it
   fills with 3 shimmer lines. Use for future loading states. */
.fb-skeleton-card {
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}
.fb-skeleton-card > .fb-skeleton-line + .fb-skeleton-line { margin-top: var(--sp-3); }

/* ══════════════════════════════════════════════════════════════════════
   11. FUND FINDER SIDEBAR — collapsed by default, open on click
   ══════════════════════════════════════════════════════════════════════ */

/* Each filter group: header always visible, content hidden unless .expanded
   is on the parent. .filter-group-header already has a click handler in
   fund-finder.js that toggles the class. This section drives the visual. */
.ff-page .filter-group {
  border-bottom: 1px solid var(--border-soft);
  padding: 0;
  margin: 0;
}
.ff-page .filter-group:last-child { border-bottom: none; }

.ff-page .filter-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) 0;
  cursor: pointer;
  user-select: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  transition: color var(--dur) var(--ease);
}
.ff-page .filter-group-header:hover { color: var(--accent); }

.ff-page .filter-group-toggle {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
  flex-shrink: 0;
}
.ff-page .filter-group.expanded .filter-group-toggle {
  transform: rotate(180deg);
  color: var(--accent);
}

.ff-page .filter-group-content {
  /* Collapsed by default. fund-finder.js toggles .expanded on the parent
     group when the user clicks the header, which reveals this content. */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.32s var(--ease), opacity 0.25s ease, padding 0.2s ease;
  padding: 0;
}
.ff-page .filter-group.expanded .filter-group-content {
  max-height: 800px;
  opacity: 1;
  padding: 0 0 var(--sp-3) 0;
}

/* Filter options inside the revealed content */
.ff-page .filter-option {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.ff-page .filter-option:hover { color: var(--text); }
.ff-page .filter-option.selected { color: var(--accent); }
.ff-page .filter-checkbox {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-xs);
  background: var(--surface-2);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur) var(--ease);
}
.ff-page .filter-option.selected .filter-checkbox {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}

/* ══════════════════════════════════════════════════════════════════════
   12. FUND FINDER CARD — animated sector segments
   ══════════════════════════════════════════════════════════════════════
   Each .sector-segment is rendered inline by fund-finder.js with an
   inline `style="width:X%;background:COLOR"`. We animate scaleX from 0
   with a staggered delay so the bar draws in from left-to-right, with
   each segment arriving in sequence (looks like a wave). */

@keyframes fb-sector-segment-in {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* .fund-allocation-bar is the WRAPPER (contains header + bar). Don't flatten
   it — only the inner .allocation-bar-container is the actual thin bar. */
.fund-allocation-bar {
  display: block;
  width: 100%;
  margin-top: var(--sp-2);
}
.allocation-bar-container {
  display: flex;
  width: 100%;
  height: 8px;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--surface-2);
}
.allocation-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.allocation-bar-header .allocation-label { color: var(--text-muted); }
.allocation-bar-header .allocation-total { color: var(--accent); }

.sector-segment {
  height: 100%;
  transform-origin: left center;
  animation: fb-sector-segment-in 0.9s var(--ease) both;
  will-change: transform, opacity;
  transition: filter var(--dur) var(--ease);
}
.sector-segment:hover {
  filter: brightness(1.2);
}
.sector-segment:nth-child(1) { animation-delay: 0s; }
.sector-segment:nth-child(2) { animation-delay: 0.07s; }
.sector-segment:nth-child(3) { animation-delay: 0.14s; }
.sector-segment:nth-child(4) { animation-delay: 0.21s; }
.sector-segment:nth-child(5) { animation-delay: 0.28s; }
.sector-segment:nth-child(6) { animation-delay: 0.35s; }
.sector-segment:nth-child(7) { animation-delay: 0.42s; }
.sector-segment:nth-child(8) { animation-delay: 0.49s; }
.sector-segment:nth-child(9) { animation-delay: 0.56s; }
.sector-segment:nth-child(10) { animation-delay: 0.63s; }

/* Sector legend row under the bar */
.fund-allocation-legend,
.allocation-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.allocation-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.allocation-legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   13. MY ACCOUNT  (page-user-account.php, .fa-page)
   ══════════════════════════════════════════════════════════════════════ */

.fa-page {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
}

.fa-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--sp-6);
  padding: var(--sp-5);
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .fa-layout { grid-template-columns: 1fr; gap: var(--sp-4); }
}

/* Sidebar navigation */
.fa-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-2);
  height: fit-content;
  box-shadow: var(--shadow-card);
}
.fa-nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px var(--sp-3);
  background: transparent;
  border: none;
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  text-align: left;
  transition: all var(--dur) var(--ease);
}
.fa-nav-item:hover {
  background: var(--surface-2);
  color: var(--text);
}
.fa-nav-item.active {
  background: var(--gold-15);
  color: var(--accent);
}

/* Panels & cards */
.fa-content { min-width: 0; }
.fa-panel {
  display: none;
  flex-direction: column;
  gap: var(--sp-4);
}
.fa-panel.active { display: flex; }

.fa-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-5);
  box-shadow: var(--shadow-card);
}
.fa-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--text);
  margin: 0 0 var(--sp-3) 0;
  letter-spacing: var(--tracking-display);
}
.fa-card-subtitle {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
  margin-top: -4px;
  margin-bottom: var(--sp-4);
}

/* Form fields */
.fa-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 560px) { .fa-form-grid { grid-template-columns: 1fr; } }

.fa-field { display: flex; flex-direction: column; gap: 6px; }
.fa-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.fa-input,
.fa-select {
  width: 100%;
  padding: 10px 12px;
  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);
}
.fa-input:focus,
.fa-select:focus {
  border-color: var(--accent);
  outline: none;
}

/* Avatar section */
.fa-avatar-section {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: var(--sp-4);
}
.fa-avatar-preview,
#faAvatarPreview {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
}

.fa-avatar-upload-btn,
#faAvatarUploadBtn {
  background: var(--surface-2);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  padding: 8px 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.fa-avatar-upload-btn:hover,
#faAvatarUploadBtn:hover { background: var(--gold-15); }

/* Buttons */
.fa-btn-primary {
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%);
  color: var(--accent-ink);
  border: 1px solid var(--gold);
  border-radius: var(--r-lg);
  padding: 10px 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  box-shadow: 0 2px 6px rgba(201,169,98,0.2);
}
.fa-btn-primary:hover { box-shadow: 0 4px 14px rgba(201,169,98,0.35); }

.fa-btn-secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--r-lg);
  padding: 10px 18px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.fa-btn-secondary:hover { background: var(--gold-15); }

.fa-btn-remove {
  background: transparent;
  color: var(--neg);
  border: 1px solid rgba(248, 113, 113, 0.5);
  border-radius: var(--r-md);
  padding: 6px 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  cursor: pointer;
  display: none;
  transition: all var(--dur) var(--ease);
}
.fa-btn-remove.visible { display: inline-flex; }
.fa-btn-remove:hover { background: rgba(248, 113, 113, 0.08); }

/* Save bar */
.fa-save-bar {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-soft);
}

/* ══════════════════════════════════════════════════════════════════════
   14. FUND CATEGORY PAGE  (page-fund-category.php — .fc-page + inner)
   ══════════════════════════════════════════════════════════════════════
   NB: .fc-page wrapper is shared with Fund Comparison; inner classes are
   unique to category pages so no collision. */

.fc-page .hero {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5);
  background: linear-gradient(180deg, var(--gold-08) 0%, transparent 60%);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-5);
}
.fc-page .hero-left {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.fc-page .hero h1,
.fc-page .hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  margin: 0;
}
.fc-page .hero-meta {
  display: flex;
  gap: var(--sp-3);
  color: var(--text-muted);
  font-size: 13px;
  font-family: var(--font-body);
}

.fc-page .kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-3);
  padding: 0 var(--sp-5) var(--sp-5);
}
@media (max-width: 900px) { .fc-page .kpi-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .fc-page .kpi-strip { grid-template-columns: repeat(2, 1fr); } }

.fc-page .kpi-cell {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}
.fc-page .kpi-cell .kpi-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.fc-page .kpi-cell .kpi-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.fc-page .kpi-cell .kpi-value.up   { color: var(--pos); }
.fc-page .kpi-cell .kpi-value.down { color: var(--neg); }

/* Card wrapper used for both the fund table and breakdown panels */
.fc-page .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--sp-4);
}
.fc-page .card-pad { padding: var(--sp-5); }

/* Fund table inside category */
.fc-page .fund-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.fc-page .fund-table th {
  background: var(--surface-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.fc-page .fund-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-soft);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.fc-page .fund-table tr:last-child td { border-bottom: none; }
.fc-page .fund-table tr:hover td { background: var(--gold-08); }

.fc-page .fund-brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  color: var(--text-2);
}
.fc-page .fund-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}
.fc-page .fund-isin {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.fc-page .perf-pill {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: var(--r-xs);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.fc-page .perf-pill.pos { background: rgba(74, 222, 128, 0.15); color: var(--pos); }
.fc-page .perf-pill.neg { background: rgba(248, 113, 113, 0.15); color: var(--neg); }

/* Breakdown bars (asset class / manager concentration) */
.fc-page .breakdown-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
}
.fc-page .breakdown-label {
  flex-shrink: 0;
  min-width: 120px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-2);
}
.fc-page .breakdown-bar-wrap {
  flex: 1;
  height: 8px;
  background: var(--surface-2);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.fc-page .breakdown-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--r-pill);
  transform-origin: left;
  animation: fb-bar-grow 1.1s var(--ease) both;
}
.fc-page .breakdown-value {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════════════════
   15. CATCH-ALL BUTTONS — one-offs from auth / account / category
   ══════════════════════════════════════════════════════════════════════ */

/* Generic .cta-btn used on category + asset-class pages */
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px 18px;
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%);
  color: var(--accent-ink);
  border: 1px solid var(--gold);
  border-radius: var(--r-lg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  box-shadow: 0 2px 6px rgba(201,169,98,0.2);
  text-decoration: none;
}
.cta-btn:hover { box-shadow: 0 4px 14px rgba(201,169,98,0.35); color: var(--accent-ink); }

/* .tab-btn on country-detail + others */
.tab-btn {
  padding: 7px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.tab-btn:hover:not(.active) { border-color: var(--accent); color: var(--accent); }
.tab-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* Auth form buttons (.fl-btn, .fl-btn-gold) */
.fl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 10px 16px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  width: 100%;
  transition: all var(--dur) var(--ease);
}
.fl-btn:hover { border-color: var(--accent); color: var(--accent); }
.fl-btn-gold {
  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: 0 2px 6px rgba(201,169,98,0.2);
}
.fl-btn-gold:hover {
  color: var(--accent-ink);
  box-shadow: 0 4px 14px rgba(201,169,98,0.35);
}
.fl-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 10px 16px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  width: 100%;
  transition: all var(--dur) var(--ease);
}
.fl-social-btn:hover { border-color: var(--accent); }

/* ══════════════════════════════════════════════════════════════════════
   16. SPARKLINES  (inline on fund cards + sector/category/home)
   ══════════════════════════════════════════════════════════════════════ */

.fb-sparkline,
.sparkline,
.fund-sparkline {
  width: 100%;
  height: 36px;
  display: block;
  overflow: visible;
}
.fb-sparkline path.line,
.sparkline path.line,
.fund-sparkline path.line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(201, 169, 98, 0.35));
}
.fb-sparkline path.fill,
.sparkline path.fill,
.fund-sparkline path.fill {
  fill: url(#sparkFill);
  opacity: 0.45;
}
.fb-sparkline.pos path.line,
.sparkline.pos path.line,
.fund-sparkline.pos path.line { stroke: var(--pos); filter: drop-shadow(0 0 4px rgba(74, 222, 128, 0.35)); }
.fb-sparkline.neg path.line,
.sparkline.neg path.line,
.fund-sparkline.neg path.line { stroke: var(--neg); filter: drop-shadow(0 0 4px rgba(248, 113, 113, 0.35)); }

/* Sparkline legend row (under chart) */
.sparkline-legend {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-2) 0 0;
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--text-muted);
}
.sparkline-legend .sw {
  display: inline-block;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
  margin-right: 4px;
  vertical-align: middle;
}
.sparkline-legend .sw.benchmark {
  background: repeating-linear-gradient(90deg, var(--text-muted) 0, var(--text-muted) 3px, transparent 3px, transparent 6px);
}