/*! ═══════════════════════════════════════════════════════════════════════════
  Findex News Runtime Pro v11.13.0 — "Carbon"
  
  Trading-grade palette: deep cool carbon foundation, crystal-cool text,
  signature mint-jade accent (distinctive, not the cliché trading cyan),
  desaturated trader green/red that signal clearly without screaming.
  
  Engineered for 8-12hr trading sessions:
  • No warm tones → analytical focus, not emotional comfort
  • No pure black (#000) → reduces OLED bleed and eye strain
  • No pure white (#fff) → cool crystal #e3e9f2 reduces glare
  • Mint-jade accent #4dd4ac → unique Findex signature, not generic cyan
  
  All v11.x class names preserved; only token values change.
  ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────────────────────── */
:root {
  /* ─────────────────────────────────────────────────────────────────────────
     FINDEX CARBON — Trading-grade dark palette
     - Deep carbon canvas (#0a0e15) with subtle cool tone
     - Crystal-cool text (#e3e9f2) → high contrast, low glare
     - Signature mint-jade #4dd4ac → distinctive accent (not cyan)
     - Trader green/red desaturated → clear without screaming
     ───────────────────────────────────────────────────────────────────────── */
  --bg:        #0a0e15;   /* deep cool carbon */
  --bg-2:      #0e1320;
  --surface:   #121823;
  --surface-2: #1a2030;

  --border:    rgba(255,255,255,.05);
  --border-2:  rgba(255,255,255,.095);

  --text:      #e3e9f2;
  --text-2:    #b3bdce;
  --muted:     #8c98ad;
  --muted-2:   #555f70;

  /* Signature mint-jade accent — distinctive Findex color */
  --accent:    #4dd4ac;
  --accent-2:  #3bb892;
  --accent-bg: rgba(77,212,172,.10);

  /* Trader semantics — desaturated, calm but clear */
  --up:        #4ade80;
  --up-glow:   rgba(74,222,128,.14);
  --down:      #f87171;
  --down-glow: rgba(248,113,113,.13);

  /* Breaking/warn — amber (draws attention without panic) */
  --warn:      #fbbf24;
  --warn-glow: rgba(251,191,36,.14);

  --grid:      rgba(255,255,255,.04);

  /* Per-market tag colors — all cool, all readable */
  --tag-forex:        var(--up);
  --tag-forex-bg:     var(--up-glow);
  --tag-crypto:       var(--warn);
  --tag-crypto-bg:    var(--warn-glow);
  --tag-stocks:       #a78bfa;            /* soft violet — distinct from accent */
  --tag-stocks-bg:    rgba(167,139,250,.10);
  --tag-commodities:  var(--down);
  --tag-commodities-bg:var(--down-glow);
  --tag-macro:        var(--accent);
  --tag-macro-bg:     var(--accent-bg);

  /* TYPOGRAPHY — sans-only, screen-optimized */
  --sans:    'Inter', -apple-system, system-ui, sans-serif;
  --sans-ar: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;
  --serif:   'Newsreader', Georgia, 'Source Serif 4', 'Times New Roman', serif;
  --font-ar: var(--sans-ar);

  /* RHYTHM */
  --gap-1: 4px;  --gap-2: 8px;  --gap-3: 12px; --gap-4: 16px;
  --gap-5: 24px; --gap-6: 32px; --gap-7: 48px;
  --radius:    6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --ease: cubic-bezier(.4,0,.2,1);
  --med:  .22s var(--ease);
  --fast: .12s var(--ease);

  /* ── LEGACY ALIASES (so untouched files keep rendering) ─────────────────── */
  --ink-900: var(--bg);
  --ink-850: var(--bg-2);
  --ink-800: var(--surface);
  --ink-750: var(--surface);
  --ink-700: var(--surface-2);
  --ink-650: var(--surface-2);
  --ink-600: var(--surface-2);
  --ink-500: var(--border);
  --ink-400: var(--border);
  --paper:   var(--text);
  --paper-2: var(--text-2);
  --paper-3: var(--muted);
  --paper-4: var(--muted-2);
  --paper-5: rgba(230,237,243,.4);
  --brass:        var(--accent);
  --brass-soft:   var(--accent);
  --brass-deep:   var(--accent);
  --brass-glow:   var(--accent-bg);
  --brass-line:   rgba(68,147,248,.28);
  --sage:         var(--up);
  --sage-soft:    var(--up);
  --sage-deep:    var(--up);
  --sage-glow:    var(--up-glow);
  --clay:         var(--down);
  --clay-soft:    var(--down);
  --clay-deep:    var(--down);
  --clay-glow:    var(--down-glow);
  --azure:        var(--accent);
  --azure-deep:   var(--accent);
  --font-display: var(--sans);
  --font-body:    var(--sans);
  --font-mono:    var(--mono);
  --pos: var(--up);
  --neg: var(--down);
}

/* ── 1b. LIGHT THEME — "Carbon Light" — professional cool whites ────────────
   Companion light palette for Findex Carbon. Cool tones throughout (no warm
   newsroom paper), high contrast for prices, signature jade as accent.
   Engineered for the same trader workflow as the dark variant.

   - Cool slate canvas (#f5f7fa), NOT pure white. Pure #fff causes glare
     in the LED-lit offices most traders work in. Cool slate is calmer.
   - Deep slate text (#0f172a) — high contrast for numbers, calm enough
     for long reading.
   - Signature jade #0d9d7c — same hue as the dark variant's mint,
     adjusted for white-bg legibility (WCAG AA).
   - Crisp green/red — slightly more saturated than the dark variant
     because contrast on white needs more "punch" to feel decisive.
   ─────────────────────────────────────────────────────────────────────────── */
html[data-fnrp-theme="light"],
:root[data-fnrp-theme="light"] {
  --bg:        #f5f7fa;
  --bg-2:      #eef2f7;
  --surface:   #ffffff;
  --surface-2: #f0f3f8;

  --border:    rgba(15,23,42,.08);
  --border-2:  rgba(15,23,42,.16);

  --text:      #0f172a;
  --text-2:    #334155;
  --muted:     #64748b;
  --muted-2:   #94a3b8;

  /* Signature jade — same hue as dark variant, adjusted for white-bg */
  --accent:    #0d9d7c;
  --accent-2:  #0a7c61;
  --accent-bg: rgba(13,157,124,.10);

  --up:        #16a34a;
  --up-glow:   rgba(22,163,74,.10);
  --down:      #dc2626;
  --down-glow: rgba(220,38,38,.08);

  --warn:      #c2851e;
  --warn-glow: rgba(194,133,30,.10);

  --grid:      rgba(15,23,42,.05);

  --tag-forex:        var(--up);
  --tag-forex-bg:     var(--up-glow);
  --tag-crypto:       var(--warn);
  --tag-crypto-bg:    var(--warn-glow);
  --tag-stocks:       #7c3aed;
  --tag-stocks-bg:    rgba(124,58,237,.08);
  --tag-commodities:  var(--down);
  --tag-commodities-bg:var(--down-glow);
  --tag-macro:        var(--accent);
  --tag-macro-bg:     var(--accent-bg);

  /* Legacy aliases — re-mapped to Carbon-Light */
  --ink-900: var(--bg);
  --ink-850: var(--bg-2);
  --ink-800: var(--surface);
  --ink-750: var(--surface);
  --ink-700: var(--surface-2);
  --ink-650: var(--surface-2);
  --ink-600: var(--surface-2);
  --ink-500: var(--border);
  --ink-400: var(--border);
  --paper:   var(--text);
  --paper-2: var(--text-2);
  --paper-3: var(--muted);
  --paper-4: var(--muted-2);
  --paper-5: rgba(15,23,42,.4);
  --brass:        var(--accent);
  --brass-soft:   var(--accent);
  --brass-deep:   var(--accent-2);
  --brass-glow:   var(--accent-bg);
  --brass-line:   rgba(13,157,124,.30);
  --sage:         var(--up);
  --sage-soft:    var(--up);
  --sage-deep:    var(--up);
  --sage-glow:    var(--up-glow);
  --clay:         var(--down);
  --clay-soft:    var(--down);
  --clay-deep:    var(--down);
  --clay-glow:    var(--down-glow);
  --azure:        var(--accent);
  --azure-deep:   var(--accent-2);
  --pos: var(--up);
  --neg: var(--down);
}

/* Light-theme surface overrides — replace dark hardcoded rgba with paper
   equivalents AND flatten cards (lines, not shadows). */
html[data-fnrp-theme="light"] #fnrp-root {
  background:
    radial-gradient(1400px 700px at 75% -10%, rgba(13,157,124,.035), transparent 60%),
    radial-gradient(1100px 600px at 0% 110%, rgba(22,163,74,.020),  transparent 60%),
    var(--bg) !important;
}
html[data-fnrp-theme="light"] #fnrp-root *::-webkit-scrollbar-thumb       { background: rgba(15,23,42,.20); }
html[data-fnrp-theme="light"] #fnrp-root *::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,.32); }
html[data-fnrp-theme="light"] .fh-bar              { background: rgba(240,243,248,.92); }
html[data-fnrp-theme="light"] .fh-bar::after       { background: linear-gradient(90deg, transparent, rgba(13,157,124,.22) 25%, rgba(13,157,124,.22) 75%, transparent); }
html[data-fnrp-theme="light"] .fh-search-w         { background: rgba(15,23,42,.04);  border-color: var(--border); }
html[data-fnrp-theme="light"] .fh-search-w:focus-within { background: rgba(15,23,42,.07); border-color: var(--border-2); }
html[data-fnrp-theme="light"] .fh-kbd              { background: rgba(15,23,42,.05); }
html[data-fnrp-theme="light"] .fm-tabs             { background: rgba(240,243,248,.6); }
html[data-fnrp-theme="light"] .fm-tab-count       { background: rgba(15,23,42,.06); }
html[data-fnrp-theme="light"] .fm-tab.active .fm-tab-count { background: rgba(13,157,124,.10); }
html[data-fnrp-theme="light"] .fm-sub-chip.active  { background: rgba(13,157,124,.07); border-color: rgba(13,157,124,.32); }
html[data-fnrp-theme="light"] .fb-label            { border-inline-end-color: rgba(220,38,38,.22); }
html[data-fnrp-theme="light"] .fp-strip            { background: var(--bg-2); }
html[data-fnrp-theme="light"] .fb-ribbon           { background: var(--bg-2); }
html[data-fnrp-theme="light"] .fp-tick:hover       { background: rgba(13,157,124,.06); }
html[data-fnrp-theme="light"] .fn-item             { border-top-color: rgba(15,23,42,.10); }
html[data-fnrp-theme="light"] .fn-item:hover       { background: rgba(15,23,42,.035); }
/* Cards: NO shadow, structural border instead. This is the single most
   important difference vs the previous attempt — it stops the page
   reading like a product/clothing grid. */
html[data-fnrp-theme="light"] .fs-card             {
  background: var(--surface);
  box-shadow: none;
  border: 1px solid var(--border);
}
html[data-fnrp-theme="light"] .fs-pair:hover       { background: rgba(13,157,124,.05); }
html[data-fnrp-theme="light"] .fs-pair.active     { background: linear-gradient(90deg, rgba(13,157,124,.10), rgba(13,157,124,0)); }
html[data-fnrp-theme="light"] .fnrp-rtl .fs-pair.active { background: linear-gradient(270deg, rgba(13,157,124,.10), rgba(13,157,124,0)); }
/* v11.13.1 — modal overlay stays DARK even on light theme so the article
   sheet has consistent reading focus (the sheet itself is always Carbon dark). */
html[data-fnrp-theme="light"] .fn-modal-overlay    { background: rgba(10,14,21,.82); }
html[data-fnrp-theme="light"] .fn-load-more:hover  { background: rgba(13,157,124,.06); border-color: rgba(13,157,124,.32); }

/* Smooth crossfade between themes — no flash */
html.fnrp-active,
body.fnrp-active,
#fnrp-root,
#fnrp-root .fh-bar,
#fnrp-root .fp-strip,
#fnrp-root .fb-ribbon,
#fnrp-root .fm-tabs,
#fnrp-root .fs-card,
#fnrp-root .fn-item,
#fnrp-root .fs-pair,
#fnrp-root .fm-sub-chip,
#fnrp-root .fh-search-w,
#fnrp-root .fh-kbd {
  transition: background-color .32s var(--ease),
              border-color     .32s var(--ease),
              color            .32s var(--ease),
              box-shadow       .32s var(--ease);
}

/* ── 2. KILL WORDPRESS THEME (PRESERVATION ZONE) ─────────────────────────── */
html.fnrp-active,
body.fnrp-active {
  background: var(--bg) !important;
  color: var(--text) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  min-height: 100vh !important;
  font-family: var(--sans) !important;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  width: 100% !important;
  max-width: none !important;
}

body.fnrp-active > header,
body.fnrp-active > footer,
body.fnrp-active .site-header,
body.fnrp-active .site-footer,
body.fnrp-active #masthead,
body.fnrp-active #colophon,
body.fnrp-active .wp-site-blocks > header,
body.fnrp-active .wp-site-blocks > footer { display: none !important; }

#fnrp-root {
  font-family: var(--sans) !important;
  color: var(--text) !important;
  background:
    radial-gradient(1400px 700px at 75% -10%, rgba(106,143,199,.05), transparent 60%),
    radial-gradient(1100px 600px at 0% 110%, rgba(111,179,138,.025), transparent 60%),
    var(--bg) !important;
  min-height: 100vh !important;
  width: 100% !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  position: relative !important;
  z-index: 999 !important;
  display: block !important;
}

#fnrp-root *,
#fnrp-root *::before,
#fnrp-root *::after { box-sizing: border-box !important; }

#fnrp-root a {
  color: inherit !important;
  text-decoration: none !important;
}

/* Tabular numbers — critical for financial data */
#fnrp-root .num,
#fnrp-root .fp-price,
#fnrp-root .fp-chg,
#fnrp-root .fn-time,
#fnrp-root .fh-clock,
#fnrp-root .fs-pair-price,
#fnrp-root .fs-pair-chg,
#fnrp-root .fs-mover-pct,
#fnrp-root [data-num] {
  font-family: var(--mono) !important;
  font-feature-settings: 'tnum' 1, 'zero' 1 !important;
  font-variant-numeric: tabular-nums slashed-zero !important;
}

/* Custom scrollbars */
#fnrp-root *::-webkit-scrollbar      { width: 6px; height: 6px; }
#fnrp-root *::-webkit-scrollbar-track{ background: transparent; }
#fnrp-root *::-webkit-scrollbar-thumb{ background: rgba(240,246,252,.12); border-radius: 3px; }
#fnrp-root *::-webkit-scrollbar-thumb:hover { background: rgba(240,246,252,.22); }

/* ── 3. HEADER ────────────────────────────────────────────────────────────── */
.fh-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 56px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--gap-6);
  padding: 0 var(--gap-6);
  background: rgba(11,18,32,.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.fh-bar::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(68,147,248,.18) 25%, rgba(68,147,248,.18) 75%, transparent);
  pointer-events: none;
}

.fh-logo {
  font-family: var(--sans);
  font-size: 18px;
  color: var(--text);
  letter-spacing: -.015em;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  position: relative;
  cursor: pointer;
}
/* Removed editorial top-line accent — too magazine-y */
.fh-logo::before { content: none; }
/* ƒ glyph removed in v11.1.1 (Reading Room rebuild) — kept as no-op for any cached markup */
.fh-logo-mark {
  display: none;
}
/* "·markets" tail — clean sans, slightly muted, no italic */
.fh-logo-tail {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  color: var(--muted);
  margin-inline-start: 2px;
  letter-spacing: -.01em;
  opacity: 1;
}
/* Legacy alias from v11.0 — kept harmless for cached markup */
.fh-logo-sub {
  font-family: var(--sans);
  font-style: normal;
  color: var(--muted);
  font-weight: 400;
  font-size: 13px;
  margin-inline-start: 5px;
  letter-spacing: .02em;
  opacity: .9;
}

.fh-search-w {
  max-width: 340px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  height: 32px;
  padding: 0 12px;
  background: rgba(255,255,255,.02);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  transition: border-color var(--med), background var(--med);
}
.fh-search-w:focus-within { border-color: var(--border-2); background: rgba(255,255,255,.04); }
.fh-search-ic { display: inline-flex; align-items: center; opacity: .7; }
.fh-search-ic svg { width: 13px; height: 13px; }
.fh-search {
  flex: 1; min-width: 0;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: var(--text) !important;
  font-family: var(--sans) !important;
  font-size: 12.5px !important;
  padding: 0 !important;
  line-height: 1 !important;
  height: auto !important;
  box-shadow: none !important;
}
.fh-search::placeholder { color: var(--muted-2); }

/* ⌘K cosmetic hint inside search field — pure visual */
.fh-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 5px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: rgba(255,255,255,.02);
  color: var(--muted-2);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .02em;
  user-select: none;
  flex-shrink: 0;
}
@media (max-width: 880px) {
  .fh-kbd { display: none; }
}

.fh-meta {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
}

.fh-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  color: var(--up);
  text-transform: uppercase;
  font-weight: 500;
  padding-inline-end: 10px;
  border-inline-end: 1px solid var(--border-2);
}
.fh-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 0 0 rgba(111,179,138,.5);
  animation: fnrp-pulse 3s ease-in-out infinite;
}
@keyframes fnrp-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(111,179,138,.5); opacity: 1; }
  50%     { box-shadow: 0 0 0 5px rgba(111,179,138,0);  opacity: .6; }
}

.fh-clock {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

/* Theme toggle — minimal, calm, easy to ignore until you need it.
   Sun/moon crossfade with a soft 30° rotation; no spinning gimmick. */
.fh-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: color var(--med), background var(--med), border-color var(--med);
  flex-shrink: 0;
}
.fh-theme-btn:hover {
  color: var(--text-2);
  border-color: var(--border-2);
  background: rgba(255,255,255,.02);
}
html[data-fnrp-theme="light"] .fh-theme-btn:hover { background: rgba(15,23,42,.05); }
.fh-theme-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fh-theme-btn svg { width: 15px; height: 15px; }
.fh-theme-btn .fh-theme-ic {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity .25s var(--ease), transform .35s var(--ease);
}
.fh-theme-btn .fh-theme-ic-sun  { opacity: 0; transform: rotate(-30deg) scale(.7); }
.fh-theme-btn .fh-theme-ic-moon { opacity: 1; transform: rotate(0)      scale(1); }
html[data-fnrp-theme="light"] .fh-theme-btn .fh-theme-ic-sun  { opacity: 1; transform: rotate(0)     scale(1); }
html[data-fnrp-theme="light"] .fh-theme-btn .fh-theme-ic-moon { opacity: 0; transform: rotate(30deg) scale(.7); }
@media (max-width: 880px) {
  .fh-theme-btn { width: 36px; height: 36px; }   /* mobile-friendly tap target */
  .fh-theme-btn svg { width: 16px; height: 16px; }
}

/* v11.6.0 — Language switcher.
   Mirrors the visual weight of .fh-theme-btn next to it (same height, same
   border treatment), with a tiny "EN" / "AR" / "ES" code chip after the
   globe so the user can read the active language without opening the menu. */
.fh-lang { position: relative; }
.fh-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: color var(--med), background var(--med), border-color var(--med);
  flex-shrink: 0;
}
.fh-lang-btn:hover {
  color: var(--text-2);
  border-color: var(--border-2);
  background: rgba(255,255,255,.02);
}
html[data-fnrp-theme="light"] .fh-lang-btn:hover { background: rgba(15,23,42,.05); }
.fh-lang-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fh-lang-btn .fh-lang-ic { display: inline-flex; }
.fh-lang-btn .fh-lang-ic svg { width: 14px; height: 14px; display: block; }
.fh-lang-btn .fh-lang-code { letter-spacing: 0.06em; }

.fh-lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  padding: 4px;
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.20);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* v11.6.2 — The HTML `hidden` attribute should hide the element via the
   user-agent stylesheet's `[hidden] { display: none }` rule. But our
   `.fh-lang-menu { display: flex }` above has equal specificity and comes
   later in the cascade, so it wins and the menu shows on every page load
   regardless of `hidden`. This rule restores the expected behaviour. */
.fh-lang-menu[hidden] { display: none; }
html[data-fnrp-theme="light"] .fh-lang-menu {
  box-shadow: 0 10px 30px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
}
/* When the surrounding UI is RTL (Arabic), anchor the menu to the left so it
   doesn't overflow off-screen. */
.fnrp-rtl .fh-lang-menu { right: auto; left: 0; }

.fh-lang-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  text-align: start;
  transition: background var(--fast), color var(--fast);
}
.fh-lang-opt:hover { background: var(--bg-2); }
.fh-lang-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fh-lang-opt.is-active {
  color: var(--accent);
  background: var(--bg-2);
}
.fh-lang-opt-name { font-weight: 500; }
.fh-lang-opt-code {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
}

@media (max-width: 880px) {
  .fh-lang-btn { height: 36px; padding: 0 10px; }
  .fh-lang-btn .fh-lang-ic svg { width: 16px; height: 16px; }
}

/* ── 4. PRICE STRIP ───────────────────────────────────────────────────────── */
.fp-strip {
  height: 32px;
  overflow: hidden;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  position: relative;
  display: flex;
  align-items: stretch;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
/* The "MARKETS" label from old JS — we render it as a left edge marker */
.fp-strip-label {
  display: none; /* mockup omits a label; the masked edges are signal enough */
}
.fp-strip-track {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.fp-strip-track-inner {
  display: flex;
  align-items: center;
  gap: 0;
  height: 100%;
  width: max-content;
  animation: fnrp-slide 120s linear infinite;
}
.fp-strip-track:hover .fp-strip-track-inner { animation-play-state: paused; }
@keyframes fnrp-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.fp-tick {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  padding: 0 18px;
  height: 100%;
  border-inline-end: 1px solid var(--border);
  font-size: 11.5px;
  opacity: .85;
  cursor: pointer;
  transition: opacity var(--med), background var(--med);
}
.fp-tick:hover { opacity: 1; background: rgba(68,147,248,.06); }
.fp-sym   { font-family: var(--mono); font-size: 10.5px; font-weight: 500; color: var(--text-2); letter-spacing: .06em; }
.fp-price { font-family: var(--mono); color: var(--text); font-variant-numeric: tabular-nums; font-size: 11px; }
.fp-chg   { font-family: var(--mono); font-size: 10px; padding: 1px 5px; border-radius: 3px; font-variant-numeric: tabular-nums; }
.fp-chg.up   { color: var(--up);   background: var(--up-glow); }
.fp-chg.down { color: var(--down); background: var(--down-glow); }

/* RTL: reverse the slide direction */
.fnrp-rtl .fp-strip-track-inner { animation-direction: reverse; }

/* ── 5. BREAKING RIBBON ──────────────────────────────────────────────────── */
.fb-ribbon {
  height: 30px;
  display: none;            /* shown only when items exist */
  align-items: stretch;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  border-inline-start: 4px solid var(--down);
  overflow: hidden;
  position: relative;
}
.fb-ribbon.visible { display: flex; }
.fb-label {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2);
  padding: 0 16px 0 14px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--down);
  text-transform: uppercase;
  background: var(--down-glow);
  border-inline-end: 1px solid rgba(208,124,108,.18);
}
.fb-label::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--down);
  animation: fnrp-pulse-clay 3s ease-in-out infinite;
}
@keyframes fnrp-pulse-clay {
  0%,100% { opacity: 1; }
  50%     { opacity: .45; }
}
.fb-track {
  flex: 1; min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent);
}
.fb-items {
  display: flex;
  align-items: center;
  gap: 0;
  height: 100%;
  width: max-content;
  /* v11.1.1: slowed from 40s → 90s for comfortable Arabic reading; pauses on hover */
  animation: fnrp-slide 90s linear infinite;
}
.fb-track:hover .fb-items { animation-play-state: paused; }
.fnrp-rtl .fb-items { animation-direction: reverse; }
.fb-item {
  padding: 0 24px;
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  border-inline-end: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  cursor: pointer;
  transition: color var(--med);
}
.fb-item:hover { color: var(--text); }
.fb-item-time { font-family: var(--mono); font-size: 10px; color: var(--muted); letter-spacing: .06em; }
.fb-item-tag {
  font-family: var(--mono); font-size: 9px; color: var(--down);
  background: var(--down-glow); padding: 1px 5px; border-radius: 2px;
  letter-spacing: .14em; text-transform: uppercase;
}
.fb-item-text { /* default styling inherited from .fb-item */ }

/* ── 6. MARKET TABS ──────────────────────────────────────────────────────── */
.fm-tabs {
  height: 44px;
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
  background: rgba(11,18,32,.5);
  padding: 0 var(--gap-6);
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.fm-tabs::-webkit-scrollbar { display: none; }
.fm-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .01em;
  cursor: pointer;
  transition: color var(--med);
  white-space: nowrap;
}
.fm-tab:hover { color: var(--text-2); }
.fm-tab.active { color: var(--accent-2); }
.fm-tab.active::after {
  content: "";
  position: absolute;
  bottom: 9px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent-2);
}
.fm-tab-count {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--muted-2);
  background: rgba(240,246,252,.06);
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: .04em;
}
.fm-tab.active .fm-tab-count {
  color: var(--accent);
  background: rgba(106,143,199,.10);
}

/* ── 7. SUBFILTER (asset chip row inside market) ─────────────────────────── */
.fm-subfilter {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  padding: 12px var(--gap-6) 0;
}
.fm-subfilter-track {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.fm-sub-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .06em;
  cursor: pointer;
  transition: all var(--med);
}
.fm-sub-chip:hover { color: var(--text-2); border-color: var(--border-2); }
.fm-sub-chip.active {
  color: var(--accent-2);
  background: rgba(106,143,199,.08);
  border-color: rgba(106,143,199,.32);
}

/* ── 8. ASSET EDU PANEL ──────────────────────────────────────────────────── */
.fm-asset-edu {
  max-width: 1400px;
  margin: 12px auto 0;
  padding: 0 var(--gap-6);
}
.fm-asset-edu-hd {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}
.fm-asset-edu-label {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--accent-2);
  letter-spacing: .22em;
  text-transform: uppercase;
}
.fm-asset-edu-body {
  font-family: var(--sans);
  font-style: normal;
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.65;
  max-width: 72ch;
}

/* ── 9. CHIPS ROW (filters + sort) ───────────────────────────────────────── */
.ff-bar {
  max-width: 1400px;
  margin: 18px auto 0;
  padding: 0 var(--gap-6);
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  flex-wrap: wrap;
}
.ff-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: 20px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--med);
}
.ff-chip:hover { color: var(--text-2); border-color: rgba(68,147,248,.28); }
.ff-chip.active {
  color: var(--accent-2);
  background: rgba(106,143,199,.10);
  border-color: rgba(106,143,199,.32);
}
.ff-chip.c-breaking::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--down); }
.ff-chip[data-id="positive"]::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--up); }
.ff-chip[data-id="negative"]::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--down); }

.ff-sep { flex: 1; min-width: 8px; }

.ff-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: 20px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--med);
}
.ff-more-btn:hover { color: var(--text-2); border-color: rgba(68,147,248,.28); }

/* The native <select> for sort — restyled as a chip */
.ff-sort {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 28px 0 12px;
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: 20px;
  color: var(--text-2);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--med);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%237c8aa6' stroke-width='1.4'><path d='M3 5l3 3 3-3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 11px;
}
.fnrp-rtl .ff-sort {
  padding: 0 12px 0 28px;
  background-position: left 10px center;
}
.ff-sort:hover { color: var(--text); border-color: rgba(68,147,248,.28); }
.ff-sort:focus { outline: none; border-color: rgba(106,143,199,.32); }
.ff-sort option {
  background: var(--surface);
  color: var(--text);
}

.ff-more-panel {
  display: none;
  width: 100%;
  margin-top: var(--gap-2);
  padding: 0 var(--gap-6);
  flex-wrap: wrap;
  gap: var(--gap-2);
  max-width: 1400px;
  margin-inline: auto;
}
.ff-more-panel.open {
  display: flex;
}

/* ── 9b. REBUILT FILTERS (v11.29.0): segmented groups + active strip ─────── */
/* Labelled single-select segmented control (Sentiment / Impact) */
.ff-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ff-group-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
  white-space: nowrap;
}
.ff-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border-2);
  border-radius: 20px;
  background: rgba(11,18,32,.35);
}
.ff-seg-btn {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 11px;
  border: none;
  border-radius: 16px;
  background: transparent;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--med);
}
.ff-seg-btn:hover { color: var(--text-2); }
.ff-seg-btn.active {
  color: var(--accent-2);
  background: rgba(106,143,199,.14);
}
/* Sentiment + impact colour cues on the active segment */
.ff-seg-btn[data-val="positive"].active { color: var(--up);   background: rgba(13,157,124,.14); }
.ff-seg-btn[data-val="negative"].active { color: var(--down); background: rgba(232,76,90,.14); }
.ff-seg-btn[data-val="critical"].active { color: var(--down); background: rgba(232,76,90,.16); }
.ff-seg-btn[data-val="high"].active     { color: #f0a020;     background: rgba(240,160,32,.14); }

/* Breaking toggle keeps the red-dot ::before from .ff-chip.c-breaking */
.ff-toggle { white-space: nowrap; }

/* Active-filter summary strip (replaces the old hidden more-panel) */
.ff-active {
  display: none;
  width: 100%;
  max-width: 1400px;
  margin: var(--gap-3) auto 0;
  padding: 0 var(--gap-6);
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-2);
}
.ff-active.open { display: flex; }
.ff-active-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.ff-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 4px 0 11px;
  border: 1px solid rgba(106,143,199,.32);
  border-radius: 14px;
  background: rgba(106,143,199,.10);
  color: var(--text-2);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
}
.ff-pill-txt { line-height: 1; }
.ff-pill-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all var(--med);
}
.ff-pill-x:hover { color: var(--text); background: rgba(240,246,252,.10); }
.ff-clear-all {
  height: 24px;
  padding: 0 10px;
  border: none;
  background: transparent;
  color: var(--accent-2);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity var(--med);
}
.ff-clear-all:hover { opacity: .75; text-decoration: underline; }

/* Light theme parity */
html[data-fnrp-theme="light"] .ff-seg          { background: rgba(240,243,248,.6); }
html[data-fnrp-theme="light"] .ff-seg-btn.active { background: rgba(13,157,124,.07); }

/* Narrow viewports: groups stack and segments scroll horizontally */
@media (max-width: 640px) {
  .ff-bar { align-items: flex-start; }
  .ff-group { width: 100%; }
  .ff-seg { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .ff-seg::-webkit-scrollbar { display: none; }
}

/* ── 10. BODY (stream + sidebar) ─────────────────────────────────────────── */
.fn-body {
  width: 100%;
  max-width: 1400px;
  margin: var(--gap-5) auto 60px;
  padding: 0 var(--gap-6);
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--gap-5);
  align-items: flex-start;
}
.fn-stream {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0; /* prevent overflow inside grid */
}
.fn-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 80px;
}

/* ── 11. NEWS ITEM ───────────────────────────────────────────────────────── */
.fn-item {
  padding: 22px 4px 22px 16px;
  border-top: 1px solid rgba(255,255,255,.04);
  position: relative;
  cursor: pointer;
  transition: background var(--med);
}
.fnrp-rtl .fn-item { padding: 22px 16px 22px 4px; }
.fn-item:first-child {
  border-top: none;
  padding-top: 4px;
}
.fn-item:hover { background: rgba(240,246,252,.025); }

.fn-item.is-breaking { padding-inline-start: 20px; }
.fn-item.is-breaking::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 24px; bottom: 24px;
  width: 3px;
  background: var(--down);
  border-radius: 0 2px 2px 0;
  opacity: .85;
}
.fnrp-rtl .fn-item.is-breaking::before { border-radius: 2px 0 0 2px; }

.fn-meta {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  margin-bottom: var(--gap-2);
  flex-wrap: wrap;
}
.fn-time {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.fn-time .num { color: var(--text-2); }
.fn-sep {
  /* legacy separator; mockup uses gap+letter-spacing instead */
  display: inline-block;
  color: var(--muted-2);
  opacity: .5;
}
.fn-source {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--muted);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Per-market tag chip */
.fn-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 2px;
  font-weight: 500;
}
.fn-tag.t-forex       { color: var(--tag-forex);       background: var(--tag-forex-bg); }
.fn-tag.t-crypto      { color: var(--tag-crypto);      background: var(--tag-crypto-bg); }
.fn-tag.t-stocks      { color: var(--tag-stocks);      background: var(--tag-stocks-bg); }
.fn-tag.t-commodities { color: var(--tag-commodities); background: var(--tag-commodities-bg); }
.fn-tag.t-macro       { color: var(--tag-macro);       background: var(--tag-macro-bg); }

/* Impact pill */
.fn-impact {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--down);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.fn-impact::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--down);
}
.fn-impact.imp-medium { color: #c8a45a; }
.fn-impact.imp-medium::before { background: #c8a45a; }

/* Legacy badges — keep readable but downplay (the new .fn-tag/.fn-impact own the meta row) */
.fn-badge {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 2px;
  font-weight: 500;
}
.fn-badge.b-breaking { color: var(--down); background: var(--down-glow); }
.fn-badge.b-critical { color: var(--down); background: var(--down-glow); }
.fn-badge.b-high     { color: var(--down); background: var(--down-glow); }
.fn-badge.b-pos      { color: var(--up);   background: var(--up-glow); }
.fn-badge.b-neg      { color: var(--down); background: var(--down-glow); }
/* Origin chips — only shown when admin enables it (FNRP.showOrigin) */
.fn-badge.b-origin {
  color: var(--muted-2);
  background: transparent;
  border: 1px solid var(--border-2);
}
body:not(.fnrp-admin) #fnrp-root .fn-badge.b-origin { display: none; }

.fn-title {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
  letter-spacing: -.01em;
  margin: 0 0 var(--gap-2) 0;
  text-wrap: pretty;
}
/* Arabic mode: IBM Plex Sans Arabic (designed for screens, comfortable for long reading) */
.fnrp-rtl .fn-title {
  font-family: var(--sans-ar);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0;
}

.fn-excerpt {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0;
  text-wrap: pretty;
  max-width: 62ch;
}
.fnrp-rtl .fn-excerpt {
  font-family: var(--sans-ar);
  line-height: 1.75;
  font-size: 13.5px;
}

/* v11.1.1 Reading Room: lead-phrase visual emphasis removed — felt magazine-y.
 * The span is still inserted by JS for backward compat but renders identically
 * to the rest of the title (no weight bump, no special family). */
.fn-title-lead {
  font-family: inherit;
  font-weight: inherit;
  font-style: normal;
  letter-spacing: inherit;
  color: inherit;
  margin-inline-end: 0;
}
.fnrp-rtl .fn-title-lead {
  font-family: inherit;
  font-weight: inherit;
}

/* v11.1.0: high-impact / score>=7 → clay accent rail (mirrors .is-breaking) */
.fn-item.is-important { padding-inline-start: 20px; }
.fn-item.is-important::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 24px; bottom: 24px;
  width: 2px;
  background: var(--down);
  border-radius: 0 2px 2px 0;
  opacity: .55;
}
.fnrp-rtl .fn-item.is-important::before { border-radius: 2px 0 0 2px; }
/* When item is BOTH breaking and important, keep the breaking treatment */
.fn-item.is-breaking.is-important::before { width: 3px; opacity: .85; }

/* v11.1.0: News-item stats footer — quiet mono row of numbers */
.fn-foot {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
}
.fn-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fn-stat-label {
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 500;
}
.fn-stat-val {
  color: var(--text-2);
  font-weight: 500;
}
.fn-stat-react { gap: 10px; }
.fn-stat-react-up   { color: var(--up); }
.fn-stat-react-down { color: var(--down); }
.fnrp-rtl .fn-foot { flex-direction: row-reverse; }

/* ── 12. SIDEBAR WIDGET CARDS ────────────────────────────────────────────── */
.fs-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.02) inset,
    0 8px 24px -16px rgba(0,0,0,.6);
}
.fs-card-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px 10px;
}
.fs-card-title {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .20em;
  color: var(--text);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.fs-card-meta {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  color: var(--muted-2);
  text-transform: uppercase;
}
.fs-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  color: var(--up);
  padding: 2px 7px 2px 8px;
  text-transform: uppercase;
  border-inline-start: 1px solid var(--border-2);
  font-weight: 500;
}
.fs-card-tag::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--up);
  animation: fnrp-pulse 3s ease-in-out infinite;
}
/* v11.3.0 — price pipeline status badges. The dot colour and label tell the
   user (and any admin debugging in production) where prices are coming
   from right now: LIVE = direct WebSocket, POLL = HTTP polling fallback,
   CG = CoinGecko fallback (Binance unreachable), OFFLINE = both failed. */
.fs-card-tag.fs-status-live    { color: var(--up);     }
.fs-card-tag.fs-status-live::before    { background: var(--up); }
.fs-card-tag.fs-status-poll    { color: #c8a35a;        }
.fs-card-tag.fs-status-poll::before    { background: #c8a35a;
  animation: fnrp-pulse 1.5s ease-in-out infinite; }
.fs-card-tag.fs-status-cg      { color: #9d7ad8;        }
.fs-card-tag.fs-status-cg::before      { background: #9d7ad8;
  animation: fnrp-pulse 2s ease-in-out infinite; }
.fs-card-tag.fs-status-offline { color: var(--down);   }
.fs-card-tag.fs-status-offline::before { background: var(--down);
  animation: none; opacity: .5; }
.fs-card-tag.fs-status-loading { color: var(--muted);  }
.fs-card-tag.fs-status-loading::before { background: var(--muted);
  animation: fnrp-pulse 1s ease-in-out infinite; }
.fs-card-body {
  padding: 2px 6px 8px;
}
.fs-pair-loading {
  padding: 18px 12px;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--muted-2);
  text-transform: uppercase;
}

/* ── 13. WATCHLIST PAIRS ─────────────────────────────────────────────────── */
.fs-pair {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  column-gap: 10px;
  padding: 8px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background var(--med);
  position: relative;
}
.fs-pair + .fs-pair::before {
  content: "";
  position: absolute;
  inset-inline-start: 42px;
  inset-inline-end: 10px;
  top: 0;
  height: 1px;
  background: var(--border);
  opacity: .7;
}
.fs-pair:hover { background: rgba(68,147,248,.06); }
.fs-pair.active {
  background: linear-gradient(90deg, rgba(106,143,199,.10), rgba(106,143,199,0));
}
.fs-pair.active::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 7px; bottom: 7px;
  width: 2px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}
.fnrp-rtl .fs-pair.active {
  background: linear-gradient(270deg, rgba(106,143,199,.10), rgba(106,143,199,0));
}
.fnrp-rtl .fs-pair.active::after { border-radius: 2px 0 0 2px; }

.fs-pair-l {
  display: contents; /* let icon and meta participate in grid */
}
.fs-pair-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  display: grid; place-items: center;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
.fs-pair-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.fs-pair-sym {
  font-weight: 500;
  font-size: 13px;
  color: var(--text);
  letter-spacing: .02em;
}
.fs-pair-name {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fs-pair-r {
  text-align: end;
}
.fs-pair-price {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.fs-pair-chg {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.fs-pair-chg.up   { color: var(--up); }
.fs-pair-chg.down { color: var(--down); }

/* WebSocket flash highlight */
.fs-pair.flash-up   .fs-pair-price { animation: fnrp-flash-up   .55s ease-out; }
.fs-pair.flash-down .fs-pair-price { animation: fnrp-flash-down .55s ease-out; }
@keyframes fnrp-flash-up   { from { background: var(--up-glow); }   to { background: transparent; } }
@keyframes fnrp-flash-down { from { background: var(--down-glow); } to { background: transparent; } }

/* ── 14. CHART CARD (built from accumulated WebSocket ticks) ─────────────── */
.fs-chart {
  position: relative;
  display: none; /* shown when STATE.activePair has enough samples */
}
.fs-chart.visible { display: block; }
.fs-chart-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 16px 8px;
  gap: var(--gap-3);
}
.fs-chart-id .sym {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.1;
}
.fs-chart-id .pair {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 5px;
}
.fs-chart-px {
  text-align: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  margin-inline-end: 24px;
}
.fs-chart-now {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.fs-chart-pct {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: .01em;
}
.fs-chart-pct.up {
  color: var(--up);
  background: var(--up-glow);
  border: 1px solid rgba(111,179,138,.28);
  box-shadow: 0 0 14px -6px rgba(111,179,138,.5);
}
.fs-chart-pct.down {
  color: var(--down);
  background: var(--down-glow);
  border: 1px solid rgba(208,124,108,.28);
  box-shadow: 0 0 14px -6px rgba(208,124,108,.5);
}
.fs-chart-close {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--muted);
  display: grid; place-items: center;
  cursor: pointer;
  padding: 0;
  transition: all var(--fast);
}
.fs-chart-close:hover { color: var(--text); border-color: var(--accent); }
.fs-chart-close svg { width: 8px; height: 8px; }
/* v11.2.1 — merged the original rule with the v11.2.0 additions so each
   selector is defined exactly once. height: 240px sets the live chart area;
   crosshair cursor signals the hover-tooltip affordance. */
.fs-chart-wrap {
  position: relative;
  padding: 4px 12px 12px;
  height: 240px;
  cursor: crosshair;
}
.fs-chart-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.fs-chart-foot {
  display: flex;
  justify-content: space-between;
  padding: 0 16px 12px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--muted-2);
  text-transform: uppercase;
}

/* ── 14b. CHART CARD — v11.2.0 additions: pills, tooltip, loading, pulse ── */
.fs-chart-tf {
  display: flex;
  gap: 6px;
  padding: 0 16px 12px;
}
.fs-chart-tf-btn {
  flex: 1;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  cursor: pointer;
  transition: all var(--fast);
}
.fs-chart-tf-btn:hover {
  color: var(--text-2);
  border-color: var(--muted);
}
.fs-chart-tf-btn.active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(68,147,248,.10);
}

.fs-chart-tip {
  position: absolute;
  pointer-events: none;
  background: rgba(13,20,36,.96);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-2);
  min-width: 152px;
  box-shadow: 0 8px 20px -4px rgba(0,0,0,.5);
  opacity: 0;
  transition: opacity 120ms cubic-bezier(.4,0,.2,1);
  backdrop-filter: blur(4px);
  z-index: 5;
}
.fs-chart-tip.visible { opacity: 1; }
.fs-chart-tip-time {
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: .08em;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.fs-chart-tip-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  line-height: 1.6;
}
.fs-chart-tip-row span:first-child { color: var(--muted); }
.fs-chart-tip-row span:last-child  { color: var(--text); font-weight: 500; }

.fs-chart-loading {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10,15,28,.45);
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: .14em;
  text-transform: uppercase;
  backdrop-filter: blur(2px);
  z-index: 4;
}

/* v11.22.3 (BUG-1) — visible chart error / empty state. Uses theme tokens,
   no !important, respects reduced-motion. Replaces the old silent blank SVG. */
.fs-chart-error {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  text-align: center;
  background: rgba(10,15,28,.55);
  backdrop-filter: blur(2px);
  z-index: 5;
}
.fs-chart-error-icon {
  font-size: 22px;
  line-height: 1;
  color: var(--down, #e5564f);
  opacity: .9;
}
.fs-chart-error-title {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text, #e8eefc);
}
.fs-chart-error-body {
  font-size: 12px;
  line-height: 1.5;
  max-width: 280px;
  color: var(--muted);
}
.fs-chart-error-retry {
  margin-top: 4px;
  padding: 7px 18px;
  border: 1px solid var(--border, rgba(120,140,180,.35));
  border-radius: 6px;
  background: var(--accent, #4493f8);
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter .15s ease, transform .1s ease;
}
.fs-chart-error-retry:hover { filter: brightness(1.08); }
.fs-chart-error-retry:active { transform: translateY(1px); }
.fs-chart-error-retry:focus-visible {
  outline: 2px solid var(--accent, #4493f8);
  outline-offset: 2px;
}
   makes the "this just updated" signal obvious, especially after auto-scrolling. */
@keyframes fs-chart-pulse-once {
  0%   { box-shadow: 0 0 0 0 rgba(68,147,248,.45); }
  40%  { box-shadow: 0 0 0 10px rgba(68,147,248,.18); }
  100% { box-shadow: 0 0 0 0 rgba(68,147,248,0); }
}
.fs-chart-pulse {
  animation: fs-chart-pulse-once 900ms cubic-bezier(.4,0,.2,1) 1;
}

/* ── 15. GAINERS / LOSERS / IPOS / CB ────────────────────────────────────── */
.fs-mover {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  column-gap: 10px;
  padding: 9px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background var(--med);
}
.fs-mover:hover { background: rgba(68,147,248,.06); }
.fs-mover-l { display: contents; }
.fs-mover-rank {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  font-weight: 500;
}
.fs-mover-sym {
  font-size: 13px;
  color: var(--text);
}
.fs-mover-pct {
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.fs-mover-pct.up   { color: var(--up); }
.fs-mover-pct.down { color: var(--down); }

/* ── 14.5  MARKET PULSE (v11.26.0) ──────────────────────────────────────────
   Replaces the old .fs-ipo / .fs-cb widgets. Uses design tokens throughout so
   it adapts to the light theme automatically; RTL handled via logical props. */
.fs-mp-tabs {
  display: flex;
  gap: 4px;
  padding: 0 12px 10px;
}
.fs-mp-tab {
  flex: 1;
  appearance: none;
  border: 1px solid var(--border-2);
  background: transparent;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .10em;
  text-transform: uppercase;
  padding: 6px 4px;
  border-radius: 5px;
  cursor: pointer;
  transition: all var(--fast);
  white-space: nowrap;
}
.fs-mp-tab:hover { color: var(--text-2); border-color: var(--accent); }
.fs-mp-tab.is-active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-bg);
}
.fs-mp-body { padding: 4px 12px 14px; min-height: 188px; }

/* ── Sentiment / gauge ── */
.fs-mp-sent { display: flex; flex-direction: column; align-items: center; }
.fs-mp-gauge { width: 100%; max-width: 220px; height: auto; display: block; overflow: visible; }
.fs-mp-needle {
  stroke: var(--text);
  stroke-width: 3;
  stroke-linecap: round;
  transform: rotate(0deg);
  transition: transform 1.1s cubic-bezier(.22,1,.36,1);
  filter: drop-shadow(0 0 3px rgba(0,0,0,.4));
}
.fs-mp-hub { fill: var(--text); stroke: var(--surface); stroke-width: 2; }
.fs-mp-read { text-align: center; margin-top: -6px; }
.fs-mp-value {
  font-family: var(--mono);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fs-mp-label { font-family: var(--sans); font-size: 13px; font-weight: 600; margin-top: 2px; }
.fs-mp-sub {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .18em;
  color: var(--muted-2);
  text-transform: uppercase;
  margin-top: 4px;
}
.fs-mp-strip {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  height: 48px;
  margin-top: 12px;
}
.fs-mp-bar {
  width: 12px;
  border-radius: 3px 3px 1px 1px;
  opacity: .85;
  transition: height var(--med);
}
.fs-mp-strip-cap {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .18em;
  color: var(--muted-2);
  text-transform: uppercase;
  margin-top: 7px;
  text-align: center;
}

/* ── Trending ── */
.fs-mp-trend { display: flex; flex-direction: column; gap: 2px; }
.fs-mp-coin {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: start;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--fast);
}
.fs-mp-coin:hover { background: var(--accent-bg); }
.fs-mp-coin.is-hit { background: var(--accent); }
.fs-mp-coin-rank {
  flex-shrink: 0;
  width: 18px; height: 18px;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  border: 1px solid var(--border-2);
  border-radius: 4px;
}
.fs-mp-coin-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fs-mp-coin-sym { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--text); letter-spacing: .03em; }
.fs-mp-coin-name {
  font-size: 10.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fs-mp-coin-pct {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.fs-mp-coin-pct.up   { color: var(--up); }
.fs-mp-coin-pct.down { color: var(--down); }

/* ── Global stats ── */
.fs-mp-global {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 4px;
}
.fs-mp-tile {
  border: 1px solid var(--border-2);
  border-radius: 7px;
  padding: 11px 10px;
  background: var(--bg-2);
}
.fs-mp-tile-lab {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .14em;
  color: var(--muted-2);
  text-transform: uppercase;
}
.fs-mp-tile-val {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.fs-mp-tile-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.fs-mp-tile-sub.up   { color: var(--up); }
.fs-mp-tile-sub.down { color: var(--down); }

/* ═══════════════════════════════════════════════════════════════════════════
   15.5  FINDEX PULSE CALENDAR (Economic Calendar)
   Design lineage: Bloomberg Terminal density strips × Linear's restraint.
   The strip is glance-level; the modal is the deep dive.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── PULSE STRIP ───────────────────────────────────────────────────────── */
.fn-econ-strip {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: stretch;
  gap: var(--gap-4);
  padding: 10px 14px;
  margin: 12px 0 14px;
  background:
    linear-gradient(135deg, rgba(68,147,248,.05) 0%, rgba(22,27,34,0) 60%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.fn-econ-strip::before {
  /* faint accent rail on the leading edge — institutional cue */
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--accent) 0%, transparent 100%);
  opacity: .65;
}

.fn-econ-head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}
.fn-econ-title {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}
.fn-econ-pulse-dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: fnrp-pulse 2.2s ease-in-out infinite;
}

/* 7-day spine — equal-width cells, density bar at the bottom */
.fn-econ-spine {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
  min-width: 0;
}
.fn-econ-spine-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 6px 4px;
  background: var(--bg-2);
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  transition: background var(--med), border-color var(--med), transform var(--fast);
  font-family: var(--mono);
  min-width: 0;
}
.fn-econ-spine-cell:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
}
.fn-econ-spine-cell:active { transform: translateY(1px); }
.fn-econ-spine-cell.is-today {
  background: rgba(68,147,248,.08);
  border-color: rgba(68,147,248,.25);
}
.fn-econ-spine-cell.has-high::before {
  /* tiny corner pip when the day has any high-impact event */
  content: "";
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--down);
  top: 4px;
  inset-inline-end: 4px;
  box-shadow: 0 0 6px var(--down-glow);
}
.fn-econ-spine-cell { position: relative; }
.fn-econ-spine-cell.is-empty { opacity: .45; }
.fn-econ-spine-cell--skel {
  cursor: default;
  pointer-events: none;
  opacity: .25;
}

.fn-econ-spine-dow {
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--muted-2);
  text-transform: uppercase;
}
.fn-econ-spine-day {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.fn-econ-spine-cell.is-today .fn-econ-spine-day {
  color: var(--accent-2);
}
.fn-econ-spine-dens {
  width: 100%;
  height: 3px;
  background: rgba(240,246,252,.04);
  border-radius: 2px;
  overflow: hidden;
}
.fn-econ-spine-heat {
  display: flex;
  height: 100%;
  border-radius: 2px;
  overflow: hidden;
  transition: width var(--med);
}
.fn-econ-spine-seg { display: inline-block; height: 100%; min-width: 0; }
.fn-econ-spine-seg.high   { background: var(--down); }
.fn-econ-spine-seg.medium { background: var(--warn); }
.fn-econ-spine-seg.low    { background: var(--muted); }
.fn-econ-spine-count {
  font-size: 9px;
  color: var(--muted);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

/* Next event countdown */
.fn-econ-next {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding-inline-start: 14px;
  border-inline-start: 1px solid var(--border);
  min-width: 0;
  max-width: 280px;
}
.fn-econ-next-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.fn-econ-next-text {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text);
  min-width: 0;
}
.fn-econ-next-flag { font-size: 14px; flex-shrink: 0; }
.fn-econ-next-evt  {
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}
.fn-econ-next-when {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent-2);
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.fn-econ-next.is-live .fn-econ-next-when {
  color: var(--down);
  animation: fnrp-pulse 1.2s ease-in-out infinite;
}

/* CTA — opens modal */
.fn-econ-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  color: var(--text-2);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  cursor: pointer;
  transition: all var(--fast);
  white-space: nowrap;
  align-self: center;
}
.fn-econ-cta:hover {
  border-color: var(--accent);
  color: var(--accent-2);
  background: var(--accent-bg);
}
.fn-econ-cta:active { transform: translateY(1px); }

/* Responsive — collapses sensibly on tablets / phones */
@media (max-width: 1024px) {
  .fn-econ-strip {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .fn-econ-next {
    border-inline-start: 0;
    border-top: 1px solid var(--border);
    padding-inline-start: 0;
    padding-top: 8px;
    max-width: none;
  }
}
@media (max-width: 640px) {
  .fn-econ-spine { gap: 4px; }
  .fn-econ-spine-cell { padding: 5px 2px; }
  .fn-econ-spine-day { font-size: 12px; }
  .fn-econ-cta {
    width: 100%;
    justify-content: center;
  }
}

/* ── MODAL ─────────────────────────────────────────────────────────────── */
.fn-econ-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(5, 8, 12, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 40px 20px;
  opacity: 0;
  transition: opacity .24s var(--ease);
}
.fn-econ-modal-overlay.is-open { opacity: 1; }
body.fnrp-modal-open { overflow: hidden; }

.fn-econ-modal-sheet {
  width: 100%;
  max-width: 980px;
  max-height: 100%;
  margin: auto 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 24px 60px -16px rgba(0,0,0,.6),
    0 1px 0 rgba(255,255,255,.04) inset;
  transform: translateY(12px) scale(.98);
  transition: transform .24s var(--ease);
}
.fn-econ-modal-overlay.is-open .fn-econ-modal-sheet {
  transform: translateY(0) scale(1);
}

.fn-econ-modal-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.fn-econ-modal-title {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--text);
  text-transform: uppercase;
}
.fn-econ-modal-title-mark {
  color: var(--accent);
  margin-inline-end: 4px;
  font-size: 14px;
}
.fn-econ-modal-close {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-2);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: all var(--fast);
}
.fn-econ-modal-close:hover {
  border-color: var(--down);
  color: var(--down);
  background: var(--down-glow);
}

.fn-econ-modal-filters {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--gap-3);
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  flex-shrink: 0;
  background: var(--bg-2);
}
.fn-econ-modal-search {
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  padding: 8px 12px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  outline: none;
  transition: border-color var(--fast);
}
.fn-econ-modal-search:focus {
  border-color: var(--accent);
}
.fn-econ-modal-chips {
  display: inline-flex;
  gap: 4px;
  padding: 2px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.fn-econ-chip {
  padding: 5px 12px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  cursor: pointer;
  transition: all var(--fast);
  white-space: nowrap;
}
.fn-econ-chip:hover { color: var(--text-2); }
.fn-econ-chip.is-active {
  background: var(--accent-bg);
  color: var(--accent-2);
}
.fn-econ-chip.fn-econ-chip--imp-high.is-active   { background: var(--down-glow); color: var(--down); }
.fn-econ-chip.fn-econ-chip--imp-medium.is-active { background: var(--warn-glow); color: var(--warn); }
.fn-econ-chip.fn-econ-chip--imp-low.is-active    { background: rgba(139,148,158,.16); color: var(--text-2); }
.fn-econ-modal-select {
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  padding: 7px 28px 7px 12px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4 L5 7 L8 4' stroke='%238b949e' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color var(--fast);
}
.fnrp-rtl .fn-econ-modal-select {
  background-position: left 8px center;
  padding: 7px 12px 7px 28px;
}
.fn-econ-modal-select:focus { border-color: var(--accent); }

.fn-econ-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 22px 24px;
  scroll-behavior: smooth;
}
.fn-econ-modal-body::-webkit-scrollbar { width: 8px; }
.fn-econ-modal-body::-webkit-scrollbar-track { background: transparent; }
.fn-econ-modal-body::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 4px;
}
.fn-econ-modal-body::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }

.fn-econ-modal-loading {
  padding: 60px 20px;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--muted);
  text-transform: uppercase;
}

.fn-econ-modal-empty {
  padding: 80px 20px;
  text-align: center;
}
.fn-econ-modal-empty-mark {
  font-size: 36px;
  color: var(--muted-2);
  margin-bottom: 8px;
}
.fn-econ-modal-empty-msg {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text-2);
}

/* v11.16.0 — Skeleton placeholder for the loading state.
   Pure-CSS shimmer; no JS animation overhead. Painted by econPaintSkeleton(). */
.fn-econ-skeleton {
  padding: 8px 0;
}
.fn-econ-sk-row {
  display: grid;
  grid-template-columns: 60px 40px 1fr 200px;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line, rgba(255,255,255,0.04));
}
.fn-econ-sk-row > div {
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.09) 50%,
    rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: fn-econ-sk-shimmer 1.4s ease-in-out infinite;
}
.fn-econ-sk-time { width: 40px; }
.fn-econ-sk-flag { width: 24px; height: 24px; border-radius: 50%; }
.fn-econ-sk-name { height: 14px; }
.fn-econ-sk-vals { height: 14px; }
@keyframes fn-econ-sk-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* v11.16.0 — Multi-calendar switcher chips, shown above the view-toggle row.
   Lets the user flip between economic / earnings / central-banks / IPOs /
   dividends / market-holidays — and any custom calendar registered by an
   operator — without leaving the modal. */
.fn-econ-cal-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 16px 4px;
  border-bottom: 1px solid var(--line, rgba(255,255,255,0.04));
}
.fn-econ-cal-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 14px;
  border: 1px solid var(--line, rgba(255,255,255,0.08));
  background: transparent;
  color: var(--text-2);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.fn-econ-cal-chip:hover {
  border-color: var(--line-2, rgba(255,255,255,0.14));
  color: var(--text);
}
.fn-econ-cal-chip.is-active {
  background: var(--accent-soft, rgba(77,212,172,0.12));
  border-color: var(--accent, #4dd4ac);
  color: var(--accent, #4dd4ac);
}
.fn-econ-cal-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  line-height: 1;
  color: inherit;
}
.fn-econ-cal-chip-icon svg { display: block; }
.fn-econ-cal-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

/* Day group */
.fn-econ-day-group {
  margin-top: 18px;
}
.fn-econ-day-group:first-child { margin-top: 6px; }
.fn-econ-day-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.fn-econ-day-group.is-today .fn-econ-day-hd {
  border-bottom-color: var(--accent);
}
.fn-econ-day-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
}
.fn-econ-day-group.is-today .fn-econ-day-label {
  color: var(--accent-2);
}
.fn-econ-day-count {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}

/* Event row */
.fn-econ-row {
  display: grid;
  grid-template-columns: 56px 64px 1fr auto 26px;
  align-items: center;
  gap: var(--gap-3);
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
  transition: background var(--fast);
}
.fn-econ-row:last-child { border-bottom: 0; }
.fn-econ-row:hover { background: rgba(68,147,248,.04); }

.fn-econ-row-time {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.fn-econ-row--high .fn-econ-row-time { color: var(--text); font-weight: 500; }

.fn-econ-row-cur {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fn-econ-row-flag { font-size: 16px; line-height: 1; }
.fn-econ-row-cc {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--text-2);
}

.fn-econ-row-evt { min-width: 0; }
.fn-econ-row-name {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fn-econ-row--high .fn-econ-row-name { font-weight: 500; }
.fn-econ-row-country {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--muted-2);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: 2px;
}

.fn-econ-row-vals {
  display: inline-flex;
  gap: var(--gap-3);
}
.fn-econ-val { text-align: end; min-width: 56px; }
.fn-econ-val-lbl {
  font-family: var(--mono);
  font-size: 8.5px;
  color: var(--muted-2);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.fn-econ-val-num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
.fn-econ-val-num.is-released { color: var(--up); }
.fn-econ-val-num.is-pending  { color: var(--muted-2); font-style: italic; }

/* Three-dot impact pellet — same lineage as central-banks widget */
.fn-econ-row-imp {
  position: relative;
  width: 22px; height: 5px;
  display: inline-block;
  align-self: center;
}
.fn-econ-row-imp::before,
.fn-econ-row-imp::after,
.fn-econ-row-imp > span {
  content: "";
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(240,246,252,.14);
  top: 0;
}
.fn-econ-row-imp::before { inset-inline-start: 0;  }
.fn-econ-row-imp > span  { inset-inline-start: 8.5px; }
.fn-econ-row-imp::after  { inset-inline-start: 17px; }

.fn-econ-row-imp.low::before     { background: var(--muted); }
.fn-econ-row-imp.medium::before,
.fn-econ-row-imp.medium > span   { background: var(--warn); }
.fn-econ-row-imp.high::before,
.fn-econ-row-imp.high > span,
.fn-econ-row-imp.high::after     { background: var(--down); }

/* Responsive — row collapses to a stack on narrow viewports */
@media (max-width: 720px) {
  .fn-econ-modal-overlay { padding: 0; }
  .fn-econ-modal-sheet { border-radius: 0; max-height: 100vh; }
  .fn-econ-modal-filters {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .fn-econ-modal-chips { width: 100%; justify-content: space-between; }
  .fn-econ-row {
    grid-template-columns: 46px 1fr 22px;
    grid-template-areas:
      "time   evt  imp"
      "cur    vals vals";
    row-gap: 6px;
  }
  .fn-econ-row-time { grid-area: time; }
  .fn-econ-row-evt  { grid-area: evt;  }
  .fn-econ-row-imp  { grid-area: imp;  }
  .fn-econ-row-cur  { grid-area: cur;  }
  .fn-econ-row-vals { grid-area: vals; justify-content: flex-end; }
}

/* ── 16. EMPTY STATE ─────────────────────────────────────────────────────── */
.fn-empty {
  padding: 60px 20px;
  text-align: center;
}
.fn-empty-title {
  font-family: var(--sans);
  font-size: 18px;
  color: var(--text-2);
  margin-bottom: var(--gap-3);
}
.fn-empty-filters {
  display: flex;
  justify-content: center;
  gap: var(--gap-2);
  flex-wrap: wrap;
  margin-bottom: var(--gap-4);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted-2);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.fn-empty-filters span {
  padding: 2px 8px;
  border: 1px solid var(--border-2);
  border-radius: 12px;
}
.fn-empty-clear {
  background: var(--accent);
  color: var(--text);
  border: none;
  border-radius: 20px;
  padding: 8px 18px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--med);
}
.fn-empty-clear:hover { background: var(--accent-2); color: var(--bg); }

/* ── 17. LOAD MORE ───────────────────────────────────────────────────────── */
.fn-load-more {
  margin: var(--gap-5) auto;
  display: block;
  background: transparent;
  color: var(--accent-2);
  border: 1px solid var(--border-2);
  border-radius: 20px;
  padding: 10px 28px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--med);
}
.fn-load-more:hover {
  border-color: rgba(106,143,199,.32);
  background: rgba(106,143,199,.06);
  color: var(--text);
}

/* ── PAGINATION (v11.25.0) ─────────────────────────────────────────────── */
.fn-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--gap-2);
  margin: var(--gap-5) 0 var(--gap-3);
  padding-top: var(--gap-4);
  border-top: 1px solid var(--border);
}
.fn-pager-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border-2);
  border-radius: 20px;
  padding: 9px 16px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--med);
  min-height: 40px;
}
.fn-pager-btn:hover:not(:disabled) {
  border-color: var(--accent-2);
  background: var(--accent-bg);
  color: var(--text);
}
.fn-pager-btn:disabled {
  opacity: .38;
  cursor: not-allowed;
}
.fn-pager-arrow { font-size: 16px; line-height: 1; }
.fn-pager-nums {
  display: flex;
  align-items: center;
  gap: 4px;
}
.fn-pager-num {
  min-width: 40px;
  min-height: 40px;
  padding: 0 6px;
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--med);
}
.fn-pager-num:hover {
  border-color: var(--accent-2);
  color: var(--text);
}
.fn-pager-num.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #06251d;
  cursor: default;
}
html[data-fnrp-theme="light"] .fn-pager-num.is-active { color: #fff; }
.fn-pager-gap {
  padding: 0 4px;
  color: var(--text-2);
  opacity: .6;
  user-select: none;
}
.fn-pager-status {
  flex-basis: 100%;
  text-align: center;
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--text-2);
  opacity: .75;
}

/* ── BACK-TO-TOP FLOATING BUTTON (v11.25.0) ────────────────────────────── */
.fnrp-to-top {
  position: fixed;
  bottom: 24px;
  inset-inline-end: 24px;
  z-index: 9000;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #06251d;
  border: none;
  border-radius: 24px;
  padding: 11px 18px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(0,0,0,.34);
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity var(--med), transform var(--med), background var(--fast);
}
.fnrp-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.fnrp-to-top:hover { background: var(--accent-2); }
.fnrp-to-top-arrow { font-size: 15px; line-height: 1; font-weight: 800; }
html[data-fnrp-theme="light"] .fnrp-to-top { color: #fff; }

/* ── 18. FOOTER ──────────────────────────────────────────────────────────── */
.fnrp-footer {
  width: 100%;
  max-width: 1400px;
  margin: 40px auto 0;
  padding: 20px var(--gap-6) 40px;
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted-2);
  letter-spacing: .14em;
  text-transform: uppercase;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  gap: var(--gap-3);
}
.fnrp-footer-right {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

/* ── 19. RESPONSIVE BREAKPOINTS ──────────────────────────────────────────── */

/* ─── Mobile market strip ──────────────────────────────────────────────────
   On phones, JS physically relocates the watchlist (#fs-pairs) out of the
   sidebar and into a dedicated slot above the body, then tags it with
   `.fs-pairs--mobile`. The slot lives between the topic filters and the
   body, so the *primary market list* is the first thing users see after
   the ribbon — exactly where it should be on a small screen.

   IMPORTANT — the existing `.fs-pair-l` class is `display: contents`, so
   the icon and meta are direct *grid* children of `.fs-pair`. We honour
   that and place each grid item explicitly instead of fighting it.       */
.fs-pairs--mobile {
  /* Strip-style: full bleed, no card chrome, sits between subfilter and body */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: 100%;
  max-width: 1400px;
  margin: 8px auto 0;
  padding: 0;
}
.fs-pairs--mobile .fs-card-hd {
  padding: 12px var(--gap-4) 8px;
}
.fs-pairs--mobile .fs-card-body {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px var(--gap-4) 14px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.fs-pairs--mobile .fs-card-body::-webkit-scrollbar { display: none; }
/* Each pair becomes a fixed-width tile. We restate grid-template-columns
   and grid-template-rows because we're flipping from the desktop's
   3-col single-row layout to a 2-col 2-row tile. */
.fs-pairs--mobile .fs-pair {
  flex: 0 0 auto;
  min-width: 156px;
  max-width: 200px;
  display: grid;
  grid-template-columns: 28px 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 6px;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  scroll-snap-align: start;
  position: relative;
  cursor: pointer;
  transition: background var(--med), border-color var(--med);
}
.fs-pairs--mobile .fs-pair:hover {
  background: var(--accent-bg);
  border-color: var(--border-2);
}
.fs-pairs--mobile .fs-pair.active {
  background: var(--accent-bg);
  border-color: var(--accent);
}
.fs-pairs--mobile .fs-pair.active::after { display: none; }
.fs-pairs--mobile .fs-pair + .fs-pair::before { display: none; }
/* .fs-pair-l is display:contents → its children (.fs-pair-icon and
   .fs-pair-meta) are direct grid children of .fs-pair. Place them: */
.fs-pairs--mobile .fs-pair-icon { grid-column: 1; grid-row: 1; }
.fs-pairs--mobile .fs-pair-meta {
  grid-column: 2; grid-row: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.fs-pairs--mobile .fs-pair-name { font-size: 10px; }
/* .fs-pair-r holds the price + change. On desktop it's a single grid
   cell with text-align:end. On mobile we span both columns and make it
   a flex row so price (left) and change (right) split evenly. */
.fs-pairs--mobile .fs-pair-r {
  grid-column: 1 / 3;
  grid-row: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  text-align: start;
  padding-top: 4px;
  border-top: 1px dashed var(--border);
}
.fs-pairs--mobile .fs-pair-price { font-size: 13px; }
.fs-pairs--mobile .fs-pair-chg   { font-size: 10.5px; }

/* Tablet & phone — body becomes single column (sidebar stacks below) */
@media (max-width: 1100px) {
  .fn-body {
    grid-template-columns: 1fr;
  }
  .fn-sidebar {
    position: static;
    flex-direction: column;
  }
  /* Note: the chart card (.fs-chart) is NOT hidden on mobile any more —
     it's moved into #fnrp-mobile-chart-slot by placeWidgetsForViewport()
     and styled by `.fs-chart--mobile` below. */
}

/* ─── Mobile chart placement ────────────────────────────────────────────────
   When a pair is tapped on a phone, the chart card slides in between the
   watchlist (above) and the news stream (below) — i.e. exactly where the
   user expects it: "show me that pair's chart, then its news, in order".

   The card outer chrome (background/border/shadow) is dropped so it sits
   inside the page rhythm; an inner card surface (the timeframe pills + SVG
   wrap + footer combined) keeps it visually contained. */
.fs-chart--mobile {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 4px var(--gap-4) 12px;
  position: relative;
}
.fs-chart--mobile .fs-chart-hd {
  padding: 12px 0 6px;
  padding-inline-end: 36px;   /* leave room for the absolute close button */
}
.fs-chart--mobile .fs-chart-id .sym { font-size: 17px; }
.fs-chart--mobile .fs-chart-px      { margin-inline-end: 0; }
.fs-chart--mobile .fs-chart-now     { font-size: 14px; }
.fs-chart--mobile .fs-chart-close   { top: 10px; inset-inline-end: 4px; }

/* Inner card surface — group the pills + chart + footer into one bordered
   block so the user reads them as a single unit. */
.fs-chart--mobile .fs-chart-tf {
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 8px 10px;
  margin: 4px 0 0;
  gap: 6px;
}
.fs-chart--mobile .fs-chart-tf-btn {
  height: 26px;
  padding: 0 10px;
  font-size: 10.5px;
}
.fs-chart--mobile .fs-chart-wrap {
  background: var(--surface);
  border-inline: 1px solid var(--border);
  border-radius: 0;
  padding: 4px 8px 8px;
  height: 200px;     /* slightly tighter than the 240px desktop default */
}
.fs-chart--mobile .fs-chart-foot {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 8px 12px;
}

/* Tooltip needs a white-friendly background in light mode. */
html[data-fnrp-theme="light"] .fs-chart-tip {
  background: rgba(240,243,248,.96);
  color: var(--text);
  border-color: var(--border);
  box-shadow: 0 4px 12px -4px rgba(15,23,42,.18);
}

@media (max-width: 880px) {
  .fh-bar {
    grid-template-columns: 1fr auto;
    gap: var(--gap-3);
    padding: 0 var(--gap-4);
  }
  .fh-search-w {
    display: none;
  }
  .fm-tabs { padding: 0 var(--gap-4); }
  .fn-body { padding: 0 var(--gap-4); margin-top: var(--gap-3); }
  .ff-bar  { padding: 0 var(--gap-4); }
  .fm-subfilter { padding: 12px var(--gap-4) 0; }
  .fm-asset-edu { padding: 0 var(--gap-4); }
  .fnrp-footer { padding: 20px var(--gap-4) 40px; }

  /* Mockup-faithful but tighter on phones */
  .fn-title { font-size: 17px; }
  .fn-excerpt { font-size: 12.5px; }
  .fn-item { padding: 18px 4px 18px 14px; }
  .fnrp-rtl .fn-item { padding: 18px 14px 18px 4px; }
  .fp-tick { padding: 0 14px; font-size: 11px; }
  .fb-item { padding: 0 18px; font-size: 11.5px; }
}

@media (max-width: 480px) {
  .fh-logo { font-size: 19px; }
  .fh-logo-sub { font-size: 12px; }
  .fm-tab { padding: 0 12px; font-size: 12px; }
  .fnrp-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── 20. RTL ─────────────────────────────────────────────────────────────── */
html[dir="rtl"] .fh-bar,
.fnrp-rtl .fh-bar {
  /* Already handled by logical properties; keep grid order */
}

/* RTL ribbon: clay border moves to the right (logical inset-inline-start handles it) */

.fnrp-rtl,
.fnrp-rtl body {
  font-family: var(--font-ar) !important;
}
.fnrp-rtl .fn-source,
.fnrp-rtl .fn-tag,
.fnrp-rtl .fn-impact,
.fnrp-rtl .fs-card-title,
.fnrp-rtl .fs-card-meta,
.fnrp-rtl .fs-card-tag,
.fnrp-rtl .fb-label {
  /* mono-feel labels stay LTR even in RTL pages — financial conventions */
  direction: ltr;
  unicode-bidi: isolate;
}

/* Origin badges hidden from public unless admin opted-in (CSS gate is the source of truth) */
body:not(.fnrp-admin) #fnrp-root .fn-badge.b-origin,
body:not(.fnrp-admin) #fnrp-root .fn-origin {
  display: none !important;
}

/* ── 21. MODAL (legacy hook for ESC handler in JS) ───────────────────────── */
.fn-modal-overlay {
  position: fixed; inset: 0;
  /* v11.13.1 — Carbon: deep dark backdrop with strong blur for the
     "private reading room" feel of the HTML mockup. The article sheet
     itself is dark; the backdrop dims and softens the page behind so
     the eye locks onto the article. Applied regardless of theme — even
     when the underlying page is light, the modal context is always
     dark for reading focus. */
  background: rgba(10,14,21,.82);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  z-index: 9999;
  display: grid; place-items: center;
  animation: fnFadeIn .25s var(--ease);
}
@keyframes fnFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════════════
   v11.5.6 — Watchlist V2 (rebuilt)
   ────────────────────────────────────────────────────────────────────────
   Root-cause fix for v11.5.5: the mobile layout inherited
   `.fs-pairs--mobile .fs-card-body { display: flex; overflow-x: auto }`
   from the legacy horizontal-scroll strip design (line ~1806). When V2
   mounted its tabs+list inside that container, the flex axis placed the
   tab strip and the row list side by side. This rebuild forces a clean
   block context whenever V2 is mounted, regardless of phone/desktop, by
   selecting on `.fnrp-w2` (a class V2 stamps onto its container).
   ──────────────────────────────────────────────────────────────────────── */

/* ── 1. Force a sane block context on ANY device when V2 is mounted ─── */
/*     Use !important to defeat the legacy mobile rules in lines ~1806-1815.
       This is the ONE place we use !important — necessary because the
       legacy CSS uses it too on the parent (.fs-pairs--mobile). */
#fs-pairs-body.fnrp-w2,
.fs-pairs--mobile #fs-pairs-body.fnrp-w2,
.fs-pairs--mobile .fs-card-body.fnrp-w2 {
  display: block !important;
  overflow-x: visible !important;
  padding: 0 !important;
  gap: 0 !important;
  scroll-snap-type: none !important;
}

/* Also neutralise the mobile card chrome stripping for V2 — we want the
   card frame back so the watchlist looks like a proper card on phones,
   not a free-floating list in the middle of the page. */
.fs-pairs--mobile:has(.fnrp-w2) {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  margin: 12px 12px 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

/* Header gets normal padding back when V2 is active */
.fs-pairs--mobile:has(.fnrp-w2) .fs-card-hd {
  padding: 14px 16px 8px !important;
}

/* ── 2. Tab strip — full-width, balanced spacing, mobile-friendly ─── */
.fnrp-w2-tabs {
  /* The cardinal sin of the previous version: flex with overflow-x.
     This time: justified row that wraps gracefully + horizontal scroll
     ONLY if absolutely needed (won't be on the screens we care about). */
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  padding: 0 4px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  /* The horizontal scroll is a fallback that almost never engages because
     6 tabs fit on a 360px viewport when each is ~60px wide. */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.fnrp-w2-tabs::-webkit-scrollbar { display: none; }

.fnrp-w2-tab {
  /* v11.5.8: balanced sizing — readable padding, scroll if not all fit.
     `flex: 0 0 auto` = each tab uses its content width; container scrolls
     if total width > container width. This is the same pattern Twitter,
     GitHub, etc. use for wide horizontal tab strips. */
  flex: 0 0 auto;
  padding: 12px 12px 11px;
  margin: 0;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  scroll-snap-align: start;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.fnrp-rtl .fnrp-w2-tab { font-family: var(--sans-ar); }

.fnrp-w2-tab:hover { color: var(--text-2); background: rgba(255,255,255,0.02); }

.fnrp-w2-tab.is-active {
  color: var(--text);
  border-bottom-color: var(--accent);
  background: var(--accent-bg);
}

/* ── 3. Row list — proper vertical stack, no flex contamination ─── */
.fnrp-w2-list {
  display: block;     /* hard-block: no flex, no grid, no axis confusion */
  margin: 0;
  padding: 0;
  background: var(--surface);
}

.fnrp-w2-row {
  /* v11.9.1 — extended grid adds a 26px badge column at the start:
       [badge] [code+label stack] [price+chg stack]    (3 cols, no star)
       [badge] [code+label stack] [price+chg stack] [star]   (4 cols)
     The existing :has(.fnrp-w2-star) rule below still works — see comment
     there. Padding shaved slightly (12→10 / 16→12) and min-height reduced
     (56→52) to gain a little density without crowding. */
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  column-gap: 10px;
  padding: 10px 12px;
  min-height: 52px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .12s ease;
  position: relative;
}
.fnrp-w2-row:last-of-type { border-bottom: none; }

/* v11.9.1 — Vellum marker-wash hover: a warm ochre tint instead of the
   old cool grey, so the hover reads like an editor's highlighter pass
   rather than a soft selection. Strength is still subtle — well under
   the 6 % opacity ceiling the v11.1.1 design tokens established. */
.fnrp-w2-row:hover { background: rgba(195, 150, 70, 0.06); }
html[data-fnrp-theme="light"] .fnrp-w2-row:hover { background: rgba(195, 150, 70, 0.10); }

.fnrp-w2-row.is-active { background: var(--accent-bg); }
.fnrp-w2-row.is-active::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}
.fnrp-rtl .fnrp-w2-row.is-active::before {
  left: auto; right: 0;
  border-radius: 2px 0 0 2px;
}

/* Left side = ticker code + label, stacked vertically */
.fnrp-w2-row-l {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.fnrp-w2-row-code {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.fnrp-w2-row-label {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.fnrp-rtl .fnrp-w2-row-label { font-family: var(--sans-ar); }

/* Right side = price + chg%, stacked, right-aligned */
.fnrp-w2-row-r {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
  text-align: right;
}
.fnrp-rtl .fnrp-w2-row-r {
  align-items: flex-start;
  text-align: left;
}
.fnrp-w2-row-price {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums slashed-zero;
  line-height: 1.2;
}
.fnrp-w2-row-chg {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  padding: 2px 8px;
  border-radius: 4px;
  line-height: 1.4;
  min-width: 56px;
  text-align: center;
}
.fnrp-w2-row-chg.is-up    { color: var(--up);    background: var(--up-glow);   }
.fnrp-w2-row-chg.is-down  { color: var(--down);  background: var(--down-glow); }
.fnrp-w2-row-chg.is-flat  { color: var(--muted); background: transparent;      }

/* ── v11.9.1 — Vellum letter badge ────────────────────────────────── */
/*
   The first character of the ticker, in a 24×24 circle with the calm
   accent border. Replaces the v11.5.x absence of any icon in V2 with a
   quiet visual hook that helps glance-scan a long column (eye finds the
   capital letter before it reads the mono ticker).

   In LTR the badge is grid-column 1 (start side). In RTL the grid flips
   automatically because we set `direction: rtl` on the body; the badge
   stays on the START side of each row, which is what readers expect.
*/
.fnrp-w2-row-badge {
  grid-column: 1;
  grid-row: 1;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
}

.fnrp-w2-row.is-active .fnrp-w2-row-badge {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-bg);
}

html[data-fnrp-theme="light"] .fnrp-w2-row-badge {
  background: rgba(20, 22, 28, 0.04);
  border-color: rgba(20, 22, 28, 0.10);
}

/* ── v11.9.1 — Faint roman numeral ────────────────────────────────── */
/*
   A 9-px italic serif numeral in the upper-start corner of each row, at
   45 % opacity. The museum-catalog gesture from the Vellum design brief,
   kept very quiet so it adds order without competing with the data. The
   roman number is the row's position within its column (1-indexed).
*/
.fnrp-w2-row-roman {
  position: absolute;
  top: 4px;
  inset-inline-start: 4px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 9px;
  color: var(--accent);
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
  letter-spacing: 0.02em;
  z-index: 2;
}

html[data-fnrp-theme="light"] .fnrp-w2-row-roman {
  /* Light theme needs a touch more contrast on the faint italic */
  opacity: 0.55;
}

/* ── v11.9.1 — Star column extended for the new badge column ─────── */
/*
   The pre-v11.9.1 row grid was `1fr auto` (or `1fr auto auto` when the
   star was present). v11.9.1 prepends a 26 px badge column, so:
       no star  →  26px 1fr auto         (the new default; set above)
       w/ star  →  26px 1fr auto auto    (overridden here)
   The :has() selector was already in use at the previous code site —
   we just update its template to four slots.
*/
.fnrp-w2-col .fnrp-w2-row:has(.fnrp-w2-star) {
  grid-template-columns: 26px 1fr auto auto;
}

/* ── 4. Live tick flash — calmer than v11.5.5 ───────────────────── */
@keyframes fnrp-w2-flash-up {
  0%   { background: var(--up-glow);   }
  100% { background: transparent;      }
}
@keyframes fnrp-w2-flash-down {
  0%   { background: var(--down-glow); }
  100% { background: transparent;      }
}
.fnrp-w2-row.fnrp-w2-flash-up   { animation: fnrp-w2-flash-up   .45s ease-out; }
.fnrp-w2-row.fnrp-w2-flash-down { animation: fnrp-w2-flash-down .45s ease-out; }

/* ── 5. Show all / Show fewer toggle ────────────────────────────── */
.fnrp-w2-more {
  display: block;
  width: 100%;
  padding: 13px 16px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-align: center;
  transition: color .12s ease, background .12s ease;
}
.fnrp-rtl .fnrp-w2-more { font-family: var(--sans-ar); }
.fnrp-w2-more:hover { color: var(--accent); background: rgba(68,147,248,0.04); }
.fnrp-w2-more::after {
  content: ' ›';
  margin-inline-start: 6px;
  display: inline-block;
  transition: transform .12s ease;
}
.fnrp-rtl .fnrp-w2-more::after { content: ' ‹'; margin-inline-end: 6px; margin-inline-start: 0; }
.fnrp-w2-more:hover::after { transform: translateX(2px); }
.fnrp-rtl .fnrp-w2-more:hover::after { transform: translateX(-2px); }

/* ── 6. Mobile (≤ 600px) — slightly larger touch targets, same layout ── */
@media (max-width: 600px) {
  .fnrp-w2-row {
    padding: 14px 16px;
    min-height: 60px;
  }
  .fnrp-w2-row-code  { font-size: 14.5px; }
  .fnrp-w2-row-price { font-size: 14.5px; }
  .fnrp-w2-row-label { font-size: 12.5px; }
  .fnrp-w2-row-chg   { font-size: 12px; min-width: 60px; }
  .fnrp-w2-tab {
    padding: 14px 8px 13px;
    font-size: 13.5px;
  }
}

/* ── 7. Light theme overrides ───────────────────────────────────── */
html[data-fnrp-theme="light"] .fnrp-w2-row:hover    { background: rgba(15,23,42,0.025); }
html[data-fnrp-theme="light"] .fnrp-w2-tab:hover    { background: rgba(15,23,42,0.025); }
html[data-fnrp-theme="light"] .fnrp-w2-more:hover   { background: rgba(68,147,248,0.06); }

/* ════════════════════════════════════════════════════════════════════════
   v11.5.7 — Watchlist V2 mobile collapse + theme + clock fixes
   ──────────────────────────────────────────────────────────────────────── */

/* On mobile, make the watchlist header look tappable (it now toggles
   collapse). On desktop the header is purely informational and stays
   non-interactive. */
@media (max-width: 700px) {
  .fs-pairs--mobile:has(.fnrp-w2) .fs-card-hd {
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
  }
  /* Chevron indicator at the right edge of the header */
  .fs-pairs--mobile:has(.fnrp-w2) .fs-card-hd::after {
    content: '−';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--muted);
    transition: transform .18s ease;
    line-height: 1;
  }
  .fnrp-rtl .fs-pairs--mobile:has(.fnrp-w2) .fs-card-hd::after {
    right: auto; left: 16px;
  }
  /* When body is collapsed, flip chevron to '+' */
  .fs-pairs--mobile:has(.fnrp-w2-collapsed) .fs-card-hd::after {
    content: '+';
  }
  /* When collapsed, hide the body content entirely (just header remains).
     The padding collapses too so the card becomes a thin tappable strip. */
  #fs-pairs-body.fnrp-w2-collapsed {
    height: 0;
    overflow: hidden;
    padding: 0 !important;
  }
}

/* Light theme overrides — make sure article pages look correct */
html[data-fnrp-theme="light"],
html[data-fnrp-theme="light"] body {
  background: #ffffff !important;
  color: #1a1f2c !important;
}
html[data-fnrp-theme="light"] .ap-body,
html[data-fnrp-theme="light"] .ap-section {
  background: #ffffff;
  color: #1a1f2c;
}

/* v11.5.8: subtle gradient fade on the right edge of the tab strip
   to hint at scrollability when tabs overflow the container. */
.fnrp-w2 { position: relative; }
.fnrp-w2::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 44px; /* approx tab height */
  background: linear-gradient(to right, transparent, var(--surface));
  pointer-events: none;
  opacity: 0.7;
  z-index: 1;
}
.fnrp-rtl .fnrp-w2::after {
  right: auto;
  left: 0;
  background: linear-gradient(to left, transparent, var(--surface));
}

/* ═══════════════════════════════════════════════════════════════════════
   v11.8.2 — Horizontal-grid Watchlist + Portfolio + Mover columns
   ═══════════════════════════════════════════════════════════════════════

   Layout model: the watchlist and mover widget bodies become CSS Grid
   containers with `auto-fit` columns of min-width 140px. On the standard
   320px sidebar this yields 2 columns side-by-side (Portfolio | Crypto)
   wrapping to a second row (Forex | Commodities | Indices). On wider
   layouts the columns flow into one row.
   
   Every category is visible at the same time — no tab navigation, no
   hidden content. This matches the user's stated layout: "بدال ما يكون
   تحت بعض، رتّبه أفقي قسم للفوركس للكربتو وللأصول."

   We REUSE the existing .fnrp-w2-row / .fnrp-w2-row-code / -price / -chg
   classes from v11.5.5 so the row visuals match the rest of the plugin;
   inside a column they're just rendered in a tighter layout. */

/* Grid container — replaces the tab strip + single-list layout. */
#fs-pairs-body.fnrp-w2-grid,
.fs-pairs--mobile #fs-pairs-body.fnrp-w2-grid,
.fs-pairs--mobile .fs-card-body.fnrp-w2-grid,
.fs-card-body.fnrp-w2-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
  padding: 0 !important;
  overflow-x: visible !important;
  scroll-snap-type: none !important;
}

/* Defeat the v11.5.8 right-edge gradient (was meant for tab-strip scroll
   indication — there's no tab strip anymore). */
#fs-pairs-body.fnrp-w2-grid::after,
.fs-card-body.fnrp-w2-grid::after {
  display: none !important;
}

/* ── Column ───────────────────────────────────────────────────────────── */

.fnrp-w2-col {
  /* Each column gets a thin separator from its neighbour on the right
     (or left, in RTL). The last column has no separator courtesy of the
     :nth-last-of-type(1) below. */
  border-inline-end: 1px solid var(--border);
  /* When a column wraps to a new row, it also gets a top border so the
     grid reads as a real grid, not a freely-floating set of stacks. */
  border-top: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  min-width: 0; /* let row contents shrink instead of overflowing */
}

/* The first row of columns shouldn't have a top border (they sit right
   under the card header). This selector targets columns in the first
   "grid row" — there isn't a clean CSS-only way to detect grid rows, so
   we settle for "any column whose top edge is at the start of the
   grid" via the implicit first-line approach: a column with no other
   column above it would have its row count = 1. Pragmatic alternative:
   we just hide the top border on the first 4 columns (max one row in
   typical 4-column layouts). */
.fnrp-w2-col:nth-of-type(-n + 4) { border-top: 0; }

/* Strip the trailing column separator on the rightmost column of each
   row. With auto-fit we can't easily target "last in row" — but we can
   simulate it by giving every column the right border and letting the
   container's own right edge naturally truncate. That's the default
   above; nothing extra needed here. */

/* Column header — quiet uppercase label + count chip on the right. */
.fnrp-w2-col-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 9px 10px 7px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  background: var(--surface);
}
.fnrp-rtl .fnrp-w2-col-hd {
  font-family: var(--sans-ar);
  letter-spacing: 0;
  text-transform: none;
  font-size: 11.5px;
}

.fnrp-w2-col-label { display: inline-block; }

.fnrp-w2-col-count {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: 10px;
  opacity: 0.7;
}

/* Portfolio column gets a thin accent line at the start of its header. */
.fnrp-w2-col.is-portfolio .fnrp-w2-col-hd {
  position: relative;
}
.fnrp-w2-col.is-portfolio .fnrp-w2-col-hd::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--accent);
  opacity: 0.6;
}

/* Empty-state inside a column (used for empty Portfolio). */
.fnrp-w2-col-empty {
  padding: 14px 10px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
  font-family: var(--sans);
}
.fnrp-rtl .fnrp-w2-col-empty { font-family: var(--sans-ar); }

/* The list of rows inside a column. */
.fnrp-w2-col-rows {
  display: flex;
  flex-direction: column;
}

/* ── Compact row inside a column ──────────────────────────────────────── */
/*
  We re-target .fnrp-w2-row when it's a descendant of .fnrp-w2-col to
  collapse it into a narrow 2-column grid: [code+chg stack] [star].
  The "label" (Bitcoin / Ethereum subtitle) and the explicit price line
  are hidden — the column is too narrow for them. The percent change
  carries the up/down visual, and the symbol code is the identifier.
*/
.fnrp-w2-col .fnrp-w2-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 6px;
  padding: 8px 10px;
  min-height: 40px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  position: relative;
  transition: background .12s ease;
}
.fnrp-w2-col .fnrp-w2-row:last-of-type { border-bottom: 0; }
.fnrp-w2-col .fnrp-w2-row:hover { background: rgba(240, 246, 252, 0.025); }
html[data-fnrp-theme="light"] .fnrp-w2-col .fnrp-w2-row:hover {
  background: rgba(20, 22, 28, 0.025);
}

.fnrp-w2-col .fnrp-w2-row.is-active { background: var(--accent-bg); }
.fnrp-w2-col .fnrp-w2-row.is-active::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--accent);
}

/* Left stack: code on top, percent below. Hide the label (no room). */
.fnrp-w2-col .fnrp-w2-row-l {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.fnrp-w2-col .fnrp-w2-row-code {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  /* Truncate "EUR/USD" cleanly if column is very narrow */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fnrp-w2-col .fnrp-w2-row-label {
  /* Hidden inside a column — the column header already labels the
     category, and "Bitcoin"/"Ethereum" subtitles are noise in a narrow
     2-line cell. Still kept in the DOM for screen readers + as a hook
     for future wider-column variants. */
  display: none;
}

/* Right stack: price (small, muted) and chg (color-coded). */
.fnrp-w2-col .fnrp-w2-row-r {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: end;
}
.fnrp-rtl .fnrp-w2-col .fnrp-w2-row-r {
  align-items: flex-start;
  text-align: start;
}
.fnrp-w2-col .fnrp-w2-row-price {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums slashed-zero;
  line-height: 1.2;
}
.fnrp-w2-col .fnrp-w2-row-chg {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  padding: 1px 5px;
  border-radius: 3px;
  line-height: 1.3;
  min-width: 48px;
  text-align: center;
}
.fnrp-w2-col .fnrp-w2-row-chg.is-up   { color: var(--up);   background: var(--up-glow); }
.fnrp-w2-col .fnrp-w2-row-chg.is-down { color: var(--down); background: var(--down-glow); }
.fnrp-w2-col .fnrp-w2-row-chg.is-flat { color: var(--muted); background: transparent; }

/* ── Star button (portfolio toggle) ───────────────────────────────────── */

.fnrp-w2-star {
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  margin: 0;
  font-size: 13px;
  line-height: 1;
  color: var(--muted);
  opacity: 0.45;
  transition: color .12s ease, opacity .12s ease, transform .12s ease;
  min-width: 22px;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* v11.9.1 — was `grid-column: 3` when the row had 3 slots; now that
     v11.9.1 added a badge as col 1, the star naturally lands in col 4 by
     DOM order. Removing the pin lets the same star CSS work in both pre-
     and post-v11.9.1 row geometries. */
  grid-column: auto;
  grid-row: 1;
}
.fnrp-w2-star:hover { opacity: 1; color: var(--text-2); }
.fnrp-w2-star.is-on { color: var(--accent); opacity: 1; }

/* Make the row grid 3-col when there's a star. We do this by extending
   the row template via attribute selector — the row has a child
   .fnrp-w2-star, so its layout needs three slots.
   v11.9.1 — extended to four slots: [badge][left][right][star]. */
.fnrp-w2-col .fnrp-w2-row:has(.fnrp-w2-star) {
  grid-template-columns: 26px 1fr auto auto;
}

@media (max-width: 700px) {
  .fnrp-w2-star {
    font-size: 15px;
    min-width: 28px;
    min-height: 28px;
    opacity: 0.6;
  }
}

/* ── "Show all" toggle ────────────────────────────────────────────────── */

.fnrp-w2-col .fnrp-w2-more {
  appearance: none;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  cursor: pointer;
  padding: 6px 10px;
  width: 100%;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.04em;
  transition: color .12s ease, background .12s ease;
}
.fnrp-w2-col .fnrp-w2-more:hover {
  color: var(--accent);
  background: rgba(68, 147, 248, 0.06);
}
html[data-fnrp-theme="light"] .fnrp-w2-col .fnrp-w2-more:hover {
  background: rgba(68, 147, 248, 0.08);
}

/* ── Mover columns reuse the same column visuals ──────────────────────── */
/*
  fs-mover rows look slightly different from watchlist rows (rank + sym
  + pct, 2-col layout). They live inside .fnrp-w2-col .fnrp-w2-col-rows
  and pick up the column borders / header automatically.
*/
.fnrp-w2-col .fs-mover {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 6px;
  padding: 7px 10px;
  min-height: 32px;
  border-bottom: 1px solid var(--border);
  font-family: var(--sans);
}
.fnrp-w2-col .fs-mover:last-child { border-bottom: 0; }
.fnrp-w2-col .fs-mover-l {
  display: contents; /* spread rank + sym into the parent grid */
}
.fnrp-w2-col .fs-mover-rank {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 14px;
  text-align: center;
}
.fnrp-w2-col .fs-mover-sym {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  /* Truncate long symbols ("XAU/USD") if column is narrow */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fnrp-w2-col .fs-mover-pct {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 1px 4px;
  border-radius: 3px;
  min-width: 46px;
  text-align: center;
}
.fnrp-w2-col .fs-mover-pct.up   { color: var(--up);   background: var(--up-glow); }
.fnrp-w2-col .fs-mover-pct.down { color: var(--down); background: var(--down-glow); }

/* ── Mobile tweaks ─────────────────────────────────────────────────────── */

@media (max-width: 700px) {
  /* On phones, columns get a touch more vertical breathing room. */
  .fnrp-w2-col .fnrp-w2-row {
    padding: 10px 10px;
    min-height: 44px;
  }
  .fnrp-w2-col .fnrp-w2-row-code { font-size: 13px; }
  .fnrp-w2-col .fnrp-w2-row-price { font-size: 11.5px; }
  .fnrp-w2-col .fnrp-w2-row-chg { font-size: 11.5px; }
  .fnrp-w2-col .fs-mover { padding: 8px 10px; min-height: 36px; }
  .fnrp-w2-col .fs-mover-sym { font-size: 12px; }
  .fnrp-w2-col .fs-mover-pct { font-size: 11px; }
  /* When V2 grid is mobile, allow the columns to be ~150px each so two
     fit on a 360px screen (with the page's mobile padding). */
  #fs-pairs-body.fnrp-w2-grid,
  .fs-pairs--mobile #fs-pairs-body.fnrp-w2-grid,
  .fs-pairs--mobile .fs-card-body.fnrp-w2-grid,
  .fs-card-body.fnrp-w2-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v11.8.3 — Google Translate widget chrome suppression
   ═══════════════════════════════════════════════════════════════════════
   
   Google's TranslateElement widget injects a top banner ("Translated by
   Google", language switcher, x-close), a tiny gadget where we mount it,
   and an underline-hover tooltip on translated phrases. None of those
   are wanted for our use case — we want SILENT in-place translation.
   These rules hide every visible artifact while letting the actual
   translation work continue.
*/

/* Banner across the top of the page */
.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame,
iframe.goog-te-banner-frame { display: none !important; }

/* Google adds top: 40px to <body> when banner shows; undo that */
body { top: 0 !important; }
html.translated-rtl,
html.translated-ltr { margin-top: 0 !important; }

/* Hover tooltip + highlight on translated phrases */
.goog-tooltip,
.goog-tooltip:hover,
.goog-text-highlight {
    display: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* The widget's own gadget UI (the language-switcher pill) */
#google_translate_element,
.goog-te-gadget,
.goog-te-gadget-simple,
.goog-logo-link,
.goog-te-balloon-frame {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}

/* Some setups inject an iframe with this class */
iframe[id=":1.container"],
iframe[id=":2.container"],
iframe.goog-te-menu-frame { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   v11.8.5 — Google Translate widget: KILL ALL VISIBLE ARTIFACTS
   ═══════════════════════════════════════════════════════════════════════

   v11.8.3/v11.8.4 hid the old class names (`.goog-te-banner-frame`,
   `.goog-te-gadget`, etc.). Google rolled out a new chrome with
   obfuscated class names starting with `VIpgJd-*` and `skiptranslate`
   wrapper divs at body level, plus a persistent floating "translation
   indicator" button. The previous CSS missed all of these — hence the
   icon in the user's screenshot.

   The rules below cast a wider net:
   - All `.skiptranslate` containers (these wrap every Google artifact)
   - The full `VIpgJd-*` obfuscated namespace
   - Specific known IDs: #goog-gt-tt, #goog-gt-vt, .goog-gt-tt
   - `font[style*="background-color"]` — Google occasionally wraps
     translated phrases in inline-styled <font> tags
   - Any iframe whose src points at translate.google.com
   - Position/transform tricks that can't be safely overridden are
     handled by `display: none !important` rather than `opacity: 0`,
     so the icon takes ZERO space and can't be hover-revealed.
*/

/* Catch-all: every skiptranslate wrapper Google injects at body level */
body > .skiptranslate,
body > div.skiptranslate,
body > iframe.skiptranslate {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -99999px !important;
    top: -99999px !important;
}

/* The new obfuscated chrome namespace (rolled out 2023-2024) */
[class*="VIpgJd-"] {
    display: none !important;
    visibility: hidden !important;
}

/* Translation tooltip + balloon that follow the cursor */
#goog-gt-tt, .goog-gt-tt,
#goog-gt-vt, .goog-gt-vt,
.goog-te-balloon-frame,
.goog-te-spinner-pos,
.goog-te-spinner-animation {
    display: none !important;
    visibility: hidden !important;
}

/* Any iframe sourced from translate.google.com (covers banner, menu,
   AND the floating "translation suggestion" button) */
iframe[src*="translate.google.com"],
iframe[src*="translate.googleusercontent.com"] {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    border: 0 !important;
    visibility: hidden !important;
}

/* Inline <font> wrappers Google adds around translated phrases —
   they sometimes carry a yellow highlight on hover */
font[style*="background-color"],
font[style*="background:"] {
    background: transparent !important;
    background-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v11.8.7 — Watchlist: compact multi-column grid for the legacy renderer
   ═══════════════════════════════════════════════════════════════════════

   When the V2 horizontal-grid renderer isn't active (toggle off, or no
   `watchlistTabs` configured), the legacy renderer stacks every symbol
   in a single vertical column. With many crypto symbols that produces a
   tall, unbalanced sidebar — which is exactly what the user complained
   about in v11.8.6.

   This block turns the legacy `#fs-pairs-body` into a responsive grid:
   - 2 columns when the sidebar is ≥320px wide (typical desktop sidebar)
   - 1 column on narrow mobile sidebars (<300px)
   - The auto-fit/minmax handles intermediate widths automatically.

   Row internals (.fs-pair) keep their existing 22px-icon / 1fr-meta /
   auto-price three-track grid, but get tightened padding so two rows
   sit comfortably side by side without overflowing.

   Same treatment applied to the gainers/losers movers bodies — they
   share the same `.fs-pair` row class on the legacy path. The V2 grid
   columns are unaffected (they already are their own grid container).
*/

#fs-pairs-body:has(> .fs-pair),
#fs-gainers-body:has(> .fs-pair),
#fs-losers-body:has(> .fs-pair) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  column-gap: 6px;
  row-gap: 2px;
  padding: 4px 2px;
}

/* Tighten the row so two fit per line without the price wrapping */
#fs-pairs-body .fs-pair,
#fs-gainers-body .fs-pair,
#fs-losers-body .fs-pair {
  padding: 6px 8px;
  column-gap: 6px;
  grid-template-columns: 20px 1fr auto;
  min-width: 0;          /* allow content to ellipsis instead of overflow */
}

/* In multi-column mode, the symbol/code column must allow truncation
   instead of pushing the price out of view. */
#fs-pairs-body .fs-pair-meta,
#fs-gainers-body .fs-pair-meta,
#fs-losers-body .fs-pair-meta {
  min-width: 0;
}
#fs-pairs-body .fs-pair-sym,
#fs-gainers-body .fs-pair-sym,
#fs-losers-body .fs-pair-sym {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The faint divider line between consecutive .fs-pair rows assumes a
   single vertical stack — it now would draw between grid CELLS, which
   looks chaotic. Hide it in multi-column mode and let the column gap
   provide visual separation. */
#fs-pairs-body .fs-pair + .fs-pair::before,
#fs-gainers-body .fs-pair + .fs-pair::before,
#fs-losers-body .fs-pair + .fs-pair::before {
  display: none;
}

/* Icon: shrink slightly so two rows fit comfortably on a 320px sidebar */
#fs-pairs-body .fs-pair-icon,
#fs-gainers-body .fs-pair-icon,
#fs-losers-body .fs-pair-icon {
  width: 20px;
  height: 20px;
  font-size: 10px;
}

/* Price + change: single column, right-aligned, no wrapping */
#fs-pairs-body .fs-pair-r,
#fs-gainers-body .fs-pair-r,
#fs-losers-body .fs-pair-r {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
#fs-pairs-body .fs-pair-price,
#fs-gainers-body .fs-pair-price,
#fs-losers-body .fs-pair-price {
  font-size: 12px;
  white-space: nowrap;
}
#fs-pairs-body .fs-pair-chg,
#fs-gainers-body .fs-pair-chg,
#fs-losers-body .fs-pair-chg {
  font-size: 10px;
  white-space: nowrap;
}

/* Loading placeholder: span the whole grid so it doesn't get stuffed
   into a single skinny cell. */
#fs-pairs-body .fs-pair-loading,
#fs-gainers-body .fs-pair-loading,
#fs-losers-body .fs-pair-loading {
  grid-column: 1 / -1;
}

/* RTL: the icon track stays on the start side; the grid is otherwise
   direction-agnostic. */

/* Narrow sidebars (mobile, or theme-constrained desktop) — collapse to
   one column so the single row layout still reads cleanly. */
@media (max-width: 380px) {
  #fs-pairs-body:has(> .fs-pair),
  #fs-gainers-body:has(> .fs-pair),
  #fs-losers-body:has(> .fs-pair) {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v11.8.8 — Tabbed Watchlist Pro: premium trading-terminal look
   ═══════════════════════════════════════════════════════════════════════

   Replaces the v11.8.2 horizontal-column grid with a single horizontal
   tab strip + one panel below. Four tabs by default — Crypto / Forex /
   Assets / Metals. Active tab gets a sliding underline indicator that
   animates between tabs on click.

   Targets `#fs-pairs-body.fnrp-w2-tabs-mode` so this CSS only fires on
   the new layout; v11.8.7's legacy `:has(> .fs-pair)` grid still
   handles the case when V2 is disabled.
*/

#fs-pairs-body.fnrp-w2-tabs-mode {
  display: flex !important;          /* override the v11.8.7 grid */
  flex-direction: column;
  grid-template-columns: none !important;
  gap: 0;
  padding: 0;
}

/* ── Tab strip ─────────────────────────────────────────────────────── */
.fnrp-w2-tabs {
  display: flex;
  align-items: stretch;
  position: relative;
  margin: 0 -10px 4px;               /* stretch to card edges */
  padding: 0 6px;
  border-bottom: 1px solid var(--border-2);
  background: linear-gradient(to bottom, rgba(0,0,0,0.025), rgba(0,0,0,0));
}
html[data-fnrp-theme="light"] .fnrp-w2-tabs {
  background: linear-gradient(to bottom, rgba(13,157,124,0.025), rgba(13,157,124,0));
}

.fnrp-w2-tab {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 11px 4px 10px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease;
  position: relative;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.fnrp-w2-tab:hover {
  color: var(--text);
  background: rgba(68,147,248,0.04);
}
.fnrp-w2-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 4px;
}
.fnrp-w2-tab.is-active {
  color: var(--text);
  font-weight: 700;
}

.fnrp-w2-tab-label {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Count chip beside each label — pill-styled accent badge */
.fnrp-w2-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 15px;
  padding: 0 5px;
  background: rgba(68,147,248,0.08);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0;
  transition: background 180ms ease, color 180ms ease;
}
.fnrp-w2-tab.is-active .fnrp-w2-tab-count {
  background: rgba(68,147,248,0.22);
  color: var(--accent);
}
.fnrp-w2-tab:hover .fnrp-w2-tab-count {
  background: rgba(68,147,248,0.14);
}

/* ── Sliding underline indicator ───────────────────────────────────── */
.fnrp-w2-tab-indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg,
              rgba(68,147,248,0.7),
              var(--accent),
              rgba(68,147,248,0.7));
  border-radius: 2px 2px 0 0;
  box-shadow: 0 0 14px rgba(68,147,248,0.55),
              0 0 4px rgba(68,147,248,0.85);
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
              width 280ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  will-change: transform, width;
}
html[data-fnrp-theme="light"] .fnrp-w2-tab-indicator {
  box-shadow: 0 0 8px rgba(13,157,124,0.45),
              0 0 3px rgba(13,157,124,0.7);
}

/* ── Tab panel (the symbol list for the active tab) ────────────────── */
.fnrp-w2-tabpanel {
  padding: 6px 0 4px;
  min-height: 80px;
  transition: opacity 120ms ease;
}
.fnrp-w2-tabpanel.is-switching {
  opacity: 0.4;
}
.fnrp-w2-tabpanel-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Empty-state message inside a tab panel */
.fnrp-w2-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--muted-2);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* ── Responsive: very narrow sidebars ──────────────────────────────── */
@media (max-width: 320px) {
  .fnrp-w2-tabs {
    overflow-x: auto;
    scrollbar-width: thin;
    scroll-snap-type: x mandatory;
  }
  .fnrp-w2-tab {
    flex: 0 0 auto;
    padding: 11px 14px 10px;
    scroll-snap-align: start;
  }
}

/* ── RTL: indicator transforms still work; tab strip flows right→left
       because the parent direction is RTL. translateX is direction-
       agnostic when measured from getBoundingClientRect(). */

/* ═══════════════════════════════════════════════════════════════════════
   v11.8.9 — Watchlist multi-column grid: calm, professional, terminal-style
   ═══════════════════════════════════════════════════════════════════════

   Design principles:
   1. Cells separated by 1 px borders. That's the only structural
      visual element.
   2. NO accent glow, NO sliding indicators, NO colored count chips,
      NO animations beyond a 100 ms hover fade.
   3. Color used ONLY for price-change percentages (green up, red down).
      Everything else is neutral.
   4. Monospace for all numbers. Sans-serif for labels.
   5. Generous-but-tight padding (Bloomberg density without being cramped).
   6. Equal column widths via repeat(auto-fit) at minmax(140px, 1fr) —
      4 columns side by side at typical sidebar widths, wraps to 2x2
      on narrow sidebars, then 1 column on phone.

   This replaces the v11.8.8 tab CSS (which still lives in the file
   above this block but only fires when the v11.8.8 fnrp-w2-tabs-mode
   class is present — and the v11.8.9 renderer never sets that class).
*/

#fs-pairs-body.fnrp-w2-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
  padding: 0;
  /* Reset whatever v11.8.7 or v11.8.8 may have set on this element */
}

/* ── Column wrapper ──────────────────────────────────────────────── */
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-col {
  border-inline-start: 1px solid var(--border-2);
  padding: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-col:first-child {
  border-inline-start: none;
}

/* ── Column header — quiet uppercase label, no chip ──────────────── */
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-col-hd {
  display: block;
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--border);
  background: transparent;
}
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-col-label {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The count chip from v11.8.2 is intentionally hidden — the user
   asked for a calmer design. Keep the rule available so we can
   bring it back via a single declaration switch if desired. */
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-col-count {
  display: none;
}

/* ── Symbol row list inside a column ─────────────────────────────── */
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-col-rows {
  display: flex;
  flex-direction: column;
}

/* Each symbol row. We reuse the existing .fnrp-w2-row class from
   v11.8.2's fnrpWatchlistRenderRow() — only the spacing changes here. */
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 8px;
  padding: 7px 10px;
  min-height: 0;            /* override v11.8.2's 56px which was too tall */
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 100ms ease;
  min-width: 0;
}
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-row:last-child {
  border-bottom: none;
}
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-row:hover {
  background: rgba(68,147,248,0.03);
}

/* Inside each row */
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-row-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-row-code {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--muted-2);
  letter-spacing: 0.04em;
  display: block;
  margin-top: 1px;
}
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-row-price {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  text-align: end;
}
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-row-chg {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  white-space: nowrap;
  text-align: end;
  display: block;
  margin-top: 1px;
}

/* The +/- color is the ONLY color usage in this design.
   Up = green (--up), down = red (--down), unchanged = muted. */
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-row-chg.is-up { color: var(--up); }
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-row-chg.is-down { color: var(--down); }

/* ── Empty column placeholder ───────────────────────────────────── */
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-col-empty {
  padding: 24px 10px;
  text-align: center;
  color: var(--muted-2);
  font-family: var(--mono);
  font-size: 14px;
  opacity: 0.4;
}

/* ── The v11.8.2 star-button column (Portfolio) is intentionally
   not styled here. fnrpWatchlistV2Render() no longer injects a
   portfolio column. If someone enables it via custom JS, it will
   inherit the same column styling as the other four. */
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-star {
  display: none;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 380px) {
  #fs-pairs-body.fnrp-w2-grid {
    grid-template-columns: 1fr 1fr;     /* 2 columns on phones */
  }
  #fs-pairs-body.fnrp-w2-grid .fnrp-w2-col:nth-child(2n+1) {
    border-inline-start: none;
  }
  #fs-pairs-body.fnrp-w2-grid .fnrp-w2-col:nth-child(n+3) {
    border-top: 1px solid var(--border-2);
  }
}

/* ── RTL: borders flip direction automatically via inset-inline-start.
   No special rules needed. */

/* ── Mover widgets (gainers/losers) use the same .fnrp-w2-col +
   .fnrp-w2-row classes from v11.8.2; the v11.8.7 :has(> .fs-pair)
   grid stays as their fallback when they fall back to legacy. The
   v11.8.9 styling above does NOT cascade into them because the
   mover bodies are #fs-gainers-body / #fs-losers-body, not
   #fs-pairs-body. They keep their existing v11.8.2 look. */

/* ═══════════════════════════════════════════════════════════════════════
   v11.8.10 — Watchlist Calm: a complete reset for visual peace
   ═══════════════════════════════════════════════════════════════════════

   Mental model:
   - The user opens the page and takes a BREATH. Their eyes find the
     prices instantly. They don't scan, they GLANCE. They close the
     page calmer than they opened it.
   - Reference: Apple Stocks app, Robinhood's home screen, Linear's
     dashboard. Generous whitespace, lowercase labels, no borders
     between rows, no glow effects.

   Rules followed:
   1. Whitespace is the structural element. Borders are removed.
   2. lowercase category labels (not UPPERCASE — quieter on the brain).
   3. ONE focal point per row: the price, big, monospace.
   4. Color reserved for change percentage only (green/red).
   5. Hover is a 100ms color fade, NOT a background change.
   6. Default visible row count = 4; rest behind a soft "+ N more" link.
   7. Column separators are gaps, not borders.

   Specificity strategy: every rule prefixed with
   `#fs-pairs-body.fnrp-w2-grid` and uses `!important` ONLY where a
   v11.8.x predecessor rule must be silenced. Movers / IPOs / CB
   widgets are NOT affected — they use #fs-gainers-body, #fs-losers-body,
   etc.
*/

/* Reset the parent grid: more breathing room between columns, no
   borders anywhere on the container itself. */
#fs-pairs-body.fnrp-w2-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0 !important;
  padding: 8px 0 12px !important;
  background: transparent;
}

/* ── COLUMN ─────────────────────────────────────────────────────────── */
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-col {
  border: none !important;
  padding: 14px 16px 10px !important;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
}

/* A single ultra-soft vertical divider between adjacent columns.
   Only 1px wide, 60% opacity, only the inner edges. */
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-col + .fnrp-w2-col::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: var(--border-2);
  opacity: 0.55;
}

/* ── COLUMN HEADER ──────────────────────────────────────────────────── */
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-col-hd {
  display: block;
  padding: 0 0 14px !important;
  margin: 0 0 4px !important;
  border-bottom: none !important;
  background: transparent !important;
}
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-col-label {
  display: block;
  font-family: var(--sans);
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  text-transform: lowercase !important;     /* the heart of the rewrite */
  color: var(--muted-2);
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-col-count {
  display: none !important;
}

/* ── ROW LIST ───────────────────────────────────────────────────────── */
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-col-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Each symbol row — generous vertical padding, NO border, only a tiny
   background shift on hover. The whitespace BETWEEN rows is the
   separator, not a line. */
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-row {
  display: grid !important;
  /* v11.9.1 — 4 grid slots:  [badge] [left] [right] [star] */
  grid-template-columns: 24px 1fr auto auto !important;
  align-items: center !important;
  column-gap: 10px !important;
  padding: 9px 0 !important;
  min-height: 0 !important;
  border-bottom: none !important;
  background: transparent !important;
  cursor: pointer;
  transition: opacity 120ms ease;
}
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-row:last-child {
  border-bottom: none !important;
}
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-row::before,
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-row::after {
  display: none !important;                  /* kill any v11.8.2 ::before bars */
}

/* v11.9.1 — Vellum marker-wash hover. The pre-v11.9.1 design faded the
   whole row to opacity 0.78 ("background changes feel twitchy, opacity
   changes feel calm"). v11.9.1 reverts to a background wash, but in the
   Vellum sense: a warm ochre tint, not a cool grey one. The wash reads
   like an editor's marker pass under the row you're reading instead of
   a "this item is dimmed" gesture. */
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-row:hover {
  background: rgba(195, 150, 70, 0.10) !important;
  opacity: 1;
}
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-row.is-active {
  background: rgba(195, 150, 70, 0.16) !important;
  opacity: 1;
}
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-row.is-active .fnrp-w2-row-code {
  color: var(--accent);
}

/* ── LEFT STACK (code + label) ─────────────────────────────────────── */
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-row-l {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  min-width: 0;
}
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-row-code {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: var(--text);
  text-transform: uppercase;
  line-height: 1.2 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The label (e.g. "Bitcoin") whispers. */
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-row-label {
  font-family: var(--sans) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  color: var(--muted-2);
  opacity: 0.7;
  letter-spacing: 0;
  line-height: 1.2 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: none !important;
}

/* ── RIGHT STACK (price + change) ──────────────────────────────────── */
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-row-r {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 2px !important;
  white-space: nowrap;
}
/* The PRICE is the only thing the eye should land on. */
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-row-price {
  font-family: var(--mono) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text);
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  text-align: end;
}
/* Change % — small, muted by default, color ONLY on real moves. */
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-row-chg {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0;
  line-height: 1.2 !important;
  opacity: 0.85;
  text-align: end;
}
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-row-chg.is-up { color: var(--up); }
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-row-chg.is-down { color: var(--down); }
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-row-chg.is-flat {
  color: var(--muted-2);
  opacity: 0.55;
}

/* The portfolio star button — hidden in calm mode. */
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-star {
  display: none !important;
}

/* ── "+ N more" link ───────────────────────────────────────────────── */
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-col-more {
  margin: 12px 0 0;
  padding: 4px 0;
  background: none;
  border: none;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--muted-2);
  text-align: start;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 150ms ease, color 150ms ease;
  text-transform: lowercase;
}
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-col-more:hover {
  opacity: 1;
  color: var(--accent);
}

/* ── EMPTY STATE ───────────────────────────────────────────────────── */
#fs-pairs-body.fnrp-w2-grid .fnrp-w2-col-empty {
  padding: 32px 0 16px !important;
  text-align: center;
  font-family: var(--mono);
  font-size: 16px;
  color: var(--muted-2);
  opacity: 0.35;
}

/* ── RESPONSIVE: phones get 2 columns, then 1 ──────────────────────── */
@media (max-width: 500px) {
  #fs-pairs-body.fnrp-w2-grid {
    grid-template-columns: 1fr 1fr;
  }
  #fs-pairs-body.fnrp-w2-grid .fnrp-w2-col:nth-child(2n+1)::before {
    display: none;
  }
  /* Horizontal divider between row 1 and row 2 of cards */
  #fs-pairs-body.fnrp-w2-grid .fnrp-w2-col:nth-child(n+3) {
    border-top: 1px solid var(--border-2) !important;
    margin-top: 4px;
  }
}
@media (max-width: 340px) {
  #fs-pairs-body.fnrp-w2-grid {
    grid-template-columns: 1fr;
  }
  #fs-pairs-body.fnrp-w2-grid .fnrp-w2-col::before {
    display: none;
  }
  #fs-pairs-body.fnrp-w2-grid .fnrp-w2-col + .fnrp-w2-col {
    border-top: 1px solid var(--border-2) !important;
  }
}

/* ── Match the watchlist CARD HEADER itself to the calmer system ────
   The card title "WATCHLIST" + "● LIVE" tag still rendered uppercase
   by older CSS. Soften those too for consistency. */
#fs-pairs .fs-card-hd .fs-card-title {
  letter-spacing: 0.04em;
  font-weight: 500;
  opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════════════════
   v11.8.12 — Anti-flicker overlay (moved to wp_head)
   ═══════════════════════════════════════════════════════════════════════

   v11.8.11 attempted to fix the English-flash by hiding only elements
   with `translate="yes"`. That left a lot of UI (Story Stats labels,
   badges, "newsroom" source labels, Live Prices headers, etc.) still
   visible in English during the translation window — producing visible
   flicker the user complained about.

   v11.8.12 takes a stricter approach: hide the ENTIRE <body> behind a
   full-page overlay (matching the page theme background) with a small
   centered spinner. The body is revealed only after Google adds its
   `translated-ltr` / `translated-rtl` class to <html>, or after a
   3-second fallback timer fires.

   The CSS + the synchronous init script are printed in <head> via the
   `wp_head` action in findex-news-runtime-pro.php (function
   `fnrp_print_translate_head_init`). Doing it in <head> is critical:
   it must run BEFORE <body> parses, so the browser never paints any
   English content visibly.

   For the standalone article template (`includes/article.php`), the
   same rules are inlined in the page's own `<head>` block so the
   template doesn't depend on `wp_head` actions firing in a particular
   order.

   This stylesheet block is intentionally empty for v11.8.12 — the
   real rules live next to the script in <head> to keep them as a
   single coherent piece. Keeping this comment block here makes the
   architectural decision visible to anyone reading frontend.css.
*/


/* ═══════════════════════════════════════════════════════════════════════════
   v11.9.6 — Watchlist: tabbed sidebar (Vellum aesthetic)
   ═══════════════════════════════════════════════════════════════════════════

   What this is
   ────────────
   v11.9.4-5 lifted the watchlist out of the sidebar into a full-width
   strip above the news body, so the four sections (Crypto / Forex /
   Equities / Metals) could sit side-by-side as horizontal columns.
   The user reported that as a regression: the strip was dominating
   the page and pushing the news below the fold.

   v11.9.6 puts the watchlist BACK in the sidebar (right-hand column,
   320 px wide, where it has always lived), and renders the four
   sections as a TAB STRIP instead of as side-by-side columns.  One
   section is visible at a time; the tab strip at the top is how the
   user switches between them.  Result: the watchlist is small and on
   the right, and the news area is fully reclaimed.

   The Vellum aesthetic from v11.9.4-5 is preserved at sidebar
   dimensions: italic serif tab labels, lowercase roman numerals,
   ochre accent, muted up/down, generous-but-not-wasteful row padding.

   Click → chart still drops in inline below the active row.  The
   relocator JS (fnrpInlineChartIntoActiveRow) now looks for the
   active row in `.fnrp-w2` (matches both the new tabs container and
   the old grid container, so rollback to v11.9.5 still works).

   ──────────────────────────────────────────────────────────────────────── */


/* ── 0. Vellum design tokens, scoped to the watchlist card ───────────── */
/*
   Same tokens v11.9.5 introduced, kept for the inline chart styling
   and the row hover wash.  No paper-coloured background this time —
   the watchlist card uses the same surface as every other sidebar
   card so it doesn't read as a foreign object on the page.
*/
#fs-pairs .fs-card-body.fnrp-w2,
#fs-pairs.fs-pairs--mobile .fs-card-body.fnrp-w2 {
  --w2-accent:       #cfa05a;
  --w2-accent-soft:  rgba(207, 160, 90, 0.06);
  --w2-accent-mid:   rgba(207, 160, 90, 0.12);
  --w2-serif:        'Source Serif 4', 'Iowan Old Style', Georgia,
                     'Times New Roman', serif;
  --w2-sans:         'Inter', -apple-system, BlinkMacSystemFont,
                     'Segoe UI', sans-serif;
  --w2-mono:         'JetBrains Mono', 'SF Mono', 'Roboto Mono',
                     ui-monospace, Menlo, monospace;
}
html[data-fnrp-theme="light"] #fs-pairs .fs-card-body.fnrp-w2 {
  --w2-accent:       #a87330;
  --w2-accent-soft:  rgba(168, 115, 48, 0.06);
  --w2-accent-mid:   rgba(168, 115, 48, 0.12);
}


/* ── 1. The card body in tabs mode ───────────────────────────────────── */
/*
   No grid, no 4-column layout — just a vertical stack of:
     [ tab strip ] → [ status chip ] → [ search ] → [ rows ] → [ more ]
   followed by the inline chart if a row is active.
*/
#fs-pairs-body.fnrp-w2-tabs,
.fs-pairs--mobile #fs-pairs-body.fnrp-w2-tabs {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent;
  box-sizing: border-box;
}
#fs-pairs-body.fnrp-w2-tabs,
#fs-pairs-body.fnrp-w2-tabs * {
  box-sizing: border-box;
}


/* ── 2. Tab strip ────────────────────────────────────────────────────── */
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 4px 2px 0;
  border-bottom: 1px solid var(--border);
  /* v11.9.7 — no horizontal scroll; tabs share width equally and
     ellipsise on overflow.  The sidebar is 320 px; 4 tabs × ~74 px
     each leaves room for the label + roman without clipping. */
  overflow-x: hidden;
}

/* Each tab: lowercase roman + italic-serif label.  Compact enough
   that all 4 tabs fit in a 320 px sidebar without horizontal scroll.
   The count chip moved out of the tab (it's redundant — we already
   show "N · live" as a status line below the active tab).  Tabs
   that overflow can still be reached via horizontal scroll. */
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-tab {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 8px 2px 9px;
  margin: 0;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  color: var(--muted);
  font-family: var(--w2-serif);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  transition: color .15s ease, border-color .15s ease;
  white-space: nowrap;
  /* v11.9.7 — `flex: 1 1 0` so all 4 tabs are exactly equal width
     regardless of label length.  Combined with min-width:0 + label
     truncation this guarantees METALS doesn't get clipped by EQUITIES. */
  flex: 1 1 0;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-tab:hover {
  color: var(--text);
}
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-tab.is-active {
  color: var(--text);
  border-bottom-color: var(--w2-accent);
}
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-tab-roman {
  /* v11.9.7 — hidden in the tab strip: at 320 px sidebar width, the
     roman prefix + label combo for "EQUITIES" was forcing the
     METALS tab to clip.  The labels alone (CRYPTO / FOREX / EQUITIES
     / METALS) are clear enough.  The roman prefix is still rendered
     before each row (where it provides ordinal context within a
     section). */
  display: none;
}
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-tab.is-active .fnrp-w2-tab-roman {
  opacity: 1;
}
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-tab-label {
  font-family: var(--w2-serif);
  font-style: normal;
  font-weight: 500;
  line-height: 1.1;
  /* v11.9.7 — ellipsise on overflow inside the equal-width tab cell */
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.fnrp-rtl #fs-pairs-body.fnrp-w2-tabs .fnrp-w2-tab-label {
  font-family: var(--sans-ar);
}
/* The per-tab count chip is hidden in v11.9.6 — the section's
   "N · live/pending" status line under the tab strip carries the
   same information.  Keeping the markup so future styles can show
   it again on wider viewports if desired. */
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-tab-count {
  display: none;
}


/* ── 3. Section content (.fnrp-w2-col is the active section) ────────── */
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col {
  display: flex;
  flex-direction: column;
  padding: 0 0 10px;
}

/* Tiny "N · live" status under the tab strip — quiet italic */
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col-hd {
  padding: 7px 12px 0;
}
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col-status {
  font-family: var(--w2-serif);
  font-style: italic;
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}


/* ── 4. Search bar (only when section has > 5 symbols) ───────────────── */
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col-search {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 12px 4px;
  padding: 4px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: border-color .15s ease;
}
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col-search:focus-within {
  border-color: var(--w2-accent);
}
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col-search-icon {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  flex: 0 0 auto;
}
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col-search-input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 0;
  font-family: var(--w2-serif);
  font-style: italic;
  font-size: 11.5px;
  color: var(--text);
}
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col-search-input::placeholder {
  color: var(--muted);
}
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}


/* ── 5. Row list ─────────────────────────────────────────────────────── */
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col-rows {
  display: flex;
  flex-direction: column;
  margin-top: 2px;
}

/* Hide the v11.9.1 letter-badge and the star button — calm mode. */
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-row-badge,
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-star {
  display: none !important;
}

/* The row: roman ordinal · code+label · price+chg.
   v11.9.8 — bumped further from v11.9.7 (10×14 → 12×16, 42 → 48 px
   min-height).  Combined with reducing the default row count from
   8 to 5, the watchlist breathes properly. */
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col .fnrp-w2-row {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) auto !important;
  column-gap: 12px !important;
  row-gap: 0 !important;
  align-items: center !important;
  padding: 12px 16px !important;
  min-height: 48px;
  border-bottom: 0 !important;
  position: relative;
  cursor: pointer;
  transition: background .18s ease;
  background: transparent;
  color: var(--text);
}
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col .fnrp-w2-row:hover {
  background: var(--w2-accent-soft);
}

/* Roman ordinal — italic serif, ochre, right-aligned */
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-row-roman {
  position: static !important;
  grid-column: 1;
  grid-row: 1;
  /* v11.9.7 — upright mono, not italic serif.  At 10.5px the italic
     serif rendering was getting smeared/skewed (the user's
     "الأرقام الإيتنية مشهوة" complaint).  JetBrains Mono upright
     is crisp at any size and lines up cleanly with the rest of the
     mono-set prices on the same row. */
  font-family: var(--w2-mono);
  font-style: normal;
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: end;
  align-self: center;
  user-select: none;
  pointer-events: none;
  opacity: 0.75;
}

/* Left stack — bold mono code + italic serif label */
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col .fnrp-w2-row-l {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col .fnrp-w2-row-code {
  font-family: var(--w2-mono);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col .fnrp-w2-row-label {
  display: block !important;
  font-family: var(--w2-serif) !important;
  font-style: italic !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
  color: var(--muted) !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.fnrp-rtl #fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col .fnrp-w2-row-label {
  font-family: var(--sans-ar) !important;
  font-style: normal !important;
}

/* Right stack — price + percent */
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col .fnrp-w2-row-r {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  text-align: end;
  min-width: 0;
}
.fnrp-rtl #fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col .fnrp-w2-row-r {
  align-items: flex-start;
  text-align: start;
}
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col .fnrp-w2-row-price {
  font-family: var(--w2-mono);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums slashed-zero;
  line-height: 1.3;
  white-space: nowrap;
  letter-spacing: 0;
}
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col .fnrp-w2-row-chg {
  font-family: var(--w2-mono);
  font-size: 10px;
  font-weight: 500;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  min-width: 0;
  line-height: 1.2;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col .fnrp-w2-row-chg.is-up   { color: var(--up); }
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col .fnrp-w2-row-chg.is-down { color: var(--down); }
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col .fnrp-w2-row-chg.is-flat { color: var(--muted); }


/* ── 6. Active row + inline chart ────────────────────────────────────── */
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col .fnrp-w2-row.is-active {
  background: var(--w2-accent-mid);
}
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col .fnrp-w2-row.is-active .fnrp-w2-row-code {
  color: var(--w2-accent);
}
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col .fnrp-w2-row.is-active::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--w2-accent);
  pointer-events: none;
}

/* Inline #fs-chart — when it sits inside .fnrp-w2-col (relocated by JS)
   it picks up a compact frame that reads as a continuation of the row
   above it.  Width is the full column (no inset margins) so the chart
   has every pixel of sidebar room. */
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col .fs-chart {
  margin: 0 12px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: none;
  padding: 8px 0 10px;
}
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col .fs-chart .fs-chart-hd {
  padding: 0 12px 6px;
}
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col .fs-chart .fs-chart-id .sym {
  font-family: var(--w2-serif);
  font-weight: 500;
  font-size: 14px;
  color: var(--text);
  letter-spacing: 0;
}
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col .fs-chart .fs-chart-id .pair {
  font-family: var(--w2-mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 3px;
}
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col .fs-chart .fs-chart-now {
  font-family: var(--w2-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col .fs-chart .fs-chart-pct {
  font-family: var(--w2-mono);
  font-size: 10px;
  font-weight: 500;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--w2-accent-mid);
}
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col .fs-chart .fs-chart-pct.up   { color: var(--up); }
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col .fs-chart .fs-chart-pct.down { color: var(--down); }
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col .fs-chart .fs-chart-tf {
  margin: 0 12px 6px;
}
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col .fs-chart .fs-chart-tf-btn {
  font-family: var(--w2-serif);
  font-size: 10.5px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  padding: 3px 7px;
  border-radius: 3px;
}
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col .fs-chart .fs-chart-tf-btn:hover {
  border-color: var(--w2-accent);
  color: var(--text);
  background: var(--w2-accent-soft);
}
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col .fs-chart .fs-chart-tf-btn.active {
  border-color: var(--w2-accent);
  background: var(--w2-accent-mid);
  color: var(--w2-accent);
}
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col .fs-chart .fs-chart-wrap {
  margin: 4px 12px 0;
  height: 150px;
  padding: 2px 0 0;
}
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col .fs-chart .fs-chart-foot {
  padding: 4px 12px 0;
  font-size: 8.5px;
}
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col .fs-chart .fs-chart-close {
  color: var(--muted);
  border-color: var(--border);
}
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col .fs-chart .fs-chart-close:hover {
  color: var(--text);
  border-color: var(--w2-accent);
}


/* ── 7. "+ N more" toggle and empty state ────────────────────────────── */
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col-more {
  font-family: var(--w2-serif);
  font-style: italic;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  padding: 6px 12px 0;
  background: transparent;
  border: 0;
  text-align: start;
  cursor: pointer;
}
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col-more:hover {
  color: var(--w2-accent);
}
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col-empty {
  padding: 8px 12px;
  font-size: 11px;
  color: var(--muted);
  font-family: var(--w2-serif);
  font-style: italic;
}


/* ── 8. Mobile: same tabs design works at any width ──────────────────── */
@media (max-width: 700px) {
  #fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col-rows {
    /* on mobile, allow the section to scroll vertically inside the card
       if the user expanded a long list */
    max-height: none;
  }
}

/* ────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   15.6  FINDEX PULSE CALENDAR — v12 ADDITIONS (v11.11.0)
   Expandable rows, heatmap view, currency strength sidebar, multi-select
   currency chips, timezone selector, starred events, toast.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Modal header view-mode toggle ─────────────────────────────────────── */
.fn-econ-view-toggle {
  display: inline-flex;
  gap: 2px;
  margin-inline-start: 16px;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.fn-econ-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.fn-econ-view-btn:hover { color: var(--text); }
.fn-econ-view-btn.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.fn-econ-view-icon { font-size: 14px; line-height: 1; }
.fn-econ-view-lbl  { font-size: 12px; }
@media (max-width: 720px) {
  .fn-econ-view-lbl { display: none; }
  .fn-econ-view-toggle { margin-inline-start: 8px; }
  .fn-econ-view-btn { padding: 6px 9px; }
}

/* ── Filter rows — multi-row layout ────────────────────────────────────── */
.fn-econ-modal-filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.fn-econ-filter-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
}
.fn-econ-filter-row--currencies {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Timezone selector */
.fn-econ-modal-tz {
  font-family: var(--sans);
  font-size: 12px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
  min-width: 110px;
}
.fn-econ-modal-tz:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* ── Currency flag chips (multi-select) ─────────────────────────────────── */
.fn-econ-cur-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 99px;
  cursor: pointer;
  transition: background-color .12s, border-color .12s, color .12s, transform .08s;
  font-variant-numeric: tabular-nums;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.fn-econ-cur-chip:hover {
  border-color: var(--line-2, var(--text-3));
  color: var(--text);
}
.fn-econ-cur-chip:active { transform: scale(.96); }
.fn-econ-cur-chip.is-active {
  background: rgba(68,147,248,.12);
  border-color: var(--accent);
  color: var(--accent);
}
.fn-econ-cur-chip--all {
  font-style: italic;
  font-weight: 600;
}
/* v11.16.1 — Flag span retired; currency code carries the visual identity.
   The .fn-econ-cur-chip-flag class is still emitted by some legacy code paths;
   collapse it to nothing so it doesn't add empty whitespace. */
.fn-econ-cur-chip-flag,
.fn-econ-strength-flag,
.fn-econ-row-flag { display: none; }
.fn-econ-cur-chip-code { font-family: var(--mono); }

/* v11.16.2 — INSTANT FILTER: rows / day groups hidden by class toggle.
   Using display:none here (not visibility) so hidden rows don't occupy any
   layout space. Combined with no transition, the user perceives the filter
   change as instant. */
.fn-econ-row.is-hidden,
.fn-econ-day-group.is-hidden { display: none !important; }

/* v11.16.2 — VIRTUAL SCROLLING (browser-native).
   content-visibility:auto lets the browser skip layout + paint for any
   .fn-econ-row that's outside the viewport. With ~20 rows visible at a time
   and 600 in the DOM, the browser only does layout/paint work for the
   visible slice. contain-intrinsic-size reserves the layout space so the
   scrollbar size doesn't jump as the user scrolls. */
.fn-econ-row {
    content-visibility: auto;
    contain-intrinsic-size: 0 56px;
    /* When expanded, the actual size is larger — the browser falls back
       to measured size, so the reserved value is just a hint. */
}
.fn-econ-row.is-expanded {
    contain-intrinsic-size: auto;
}

/* CSS containment for the modal body — isolates layout/paint/style work
   to this subtree so changes here don't invalidate the parent page. */
.fn-econ-modal-body {
    contain: layout style paint;
}
.fn-econ-day-group {
    contain: layout style;
}

/* Smooth interactions: GPU-accelerated transform on chip press. */
.fn-econ-chip, .fn-econ-cur-chip, .fn-econ-cal-chip {
    will-change: transform;
}

/* Hide the empty placeholder when there are visible rows. */
.fn-econ-empty-inline { padding: 40px 20px; text-align: center; }


/* ── Body wrap: main + sidebar ─────────────────────────────────────────── */
.fn-econ-modal-bodywrap {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 0;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}
.fn-econ-modal-body {
  overflow-y: auto;
  padding: 8px 0;
}
.fn-econ-modal-sidebar {
  border-inline-start: 1px solid var(--line);
  background: var(--surface-2);
  padding: 16px 14px;
  overflow-y: auto;
}
.fn-econ-side-title {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 4px;
}
.fn-econ-side-sub {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 14px;
  opacity: .75;
}
.fn-econ-side-bars { display: flex; flex-direction: column; gap: 9px; }
.fn-econ-side-empty {
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
}
.fn-econ-strength-row {
  display: grid;
  grid-template-columns: 18px 36px 1fr 22px;
  gap: 8px;
  align-items: center;
  font-family: var(--sans);
  font-size: 12px;
}
.fn-econ-strength-flag { font-size: 14px; }
.fn-econ-strength-code {
  font-family: var(--mono);
  color: var(--text-2);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .04em;
}
.fn-econ-strength-bar {
  height: 6px;
  background: rgba(255,255,255,.04);
  border-radius: 3px;
  overflow: hidden;
}
.fn-econ-strength-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #6db2ff);
  border-radius: 3px;
  transition: width .4s ease;
}
[dir="rtl"] .fn-econ-strength-fill {
  background: linear-gradient(-90deg, var(--accent), #6db2ff);
}
.fn-econ-strength-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-2);
  text-align: end;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .fn-econ-modal-bodywrap { grid-template-columns: 1fr; }
  .fn-econ-modal-sidebar {
    border-inline-start: 0;
    border-top: 1px solid var(--line);
    max-height: 240px;
  }
}

/* ── Event row — restructured for expand ──────────────────────────────── */
.fn-econ-row {
  display: block;
  padding: 0;
  border-bottom: 1px solid var(--line);
  transition: background .15s;
}
.fn-econ-row:hover { background: rgba(255,255,255,.02); }
.fn-econ-row-head {
  display: grid;
  grid-template-columns: 28px 58px 86px 1fr auto 18px 24px;
  gap: 12px;
  align-items: center;
  padding: 11px 16px;
  cursor: pointer;
  user-select: none;
}
.fn-econ-row-head:hover .fn-econ-row-expand { color: var(--text); }

.fn-econ-row-star {
  background: transparent;
  border: 0;
  color: var(--text-3);
  font-size: 17px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color .15s, transform .15s;
}
.fn-econ-row-star:hover { color: var(--text-2); transform: scale(1.1); }
.fn-econ-row-star.is-starred { color: #f5b042; }

.fn-econ-row-expand {
  background: transparent;
  border: 0;
  color: var(--text-3);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s, color .15s;
}
.fn-econ-row.is-expanded .fn-econ-row-expand { transform: rotate(180deg); color: var(--text); }

/* Numbers: always LTR for financial conventions */
.fn-econ-val-num,
.fn-econ-row-time,
.fn-econ-row-cc,
.fn-econ-heatmap-hbucket,
.fn-econ-strength-code,
.fn-econ-strength-num {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

/* Expanded detail panel */
.fn-econ-row-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 0 16px 16px 16px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .3s ease, opacity .3s ease, padding .3s ease;
}
.fn-econ-row.is-expanded .fn-econ-row-detail {
  max-height: 800px;
  opacity: 1;
  padding-bottom: 16px;
}
@media (max-width: 720px) {
  .fn-econ-row-detail { grid-template-columns: 1fr; }
}

.fn-econ-detail-label {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}
.fn-econ-detail-edu {
  grid-column: 1 / -1;
  padding: 14px;
  background: linear-gradient(135deg, rgba(68,147,248,.05), transparent 70%), var(--surface-2);
  border-inline-start: 3px solid var(--accent);
  border-radius: 6px;
  position: relative;
}
.fn-econ-detail-edu-text {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 10px;
}
.fn-econ-bias-pill {
  display: inline-block;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 99px;
  letter-spacing: .04em;
}
.fn-econ-bias-pill--bullish {
  background: rgba(38,166,91,.15);
  color: #4ad27c;
  border: 1px solid rgba(38,166,91,.3);
}
.fn-econ-bias-pill--bearish {
  background: rgba(255,93,108,.15);
  color: #ff7a87;
  border: 1px solid rgba(255,93,108,.3);
}
.fn-econ-bias-pill--neutral {
  background: rgba(180,180,180,.1);
  color: var(--text-2);
  border: 1px solid var(--line);
}

/* Mini history bars */
.fn-econ-detail-chart {
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.fn-econ-mini-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 70px;
  padding-top: 8px;
}
.fn-econ-mini-bar {
  flex: 1;
  background: linear-gradient(180deg, var(--text-3), var(--text-3));
  opacity: .45;
  border-radius: 2px 2px 0 0;
  min-height: 8px;
  transition: opacity .15s, background .15s;
  cursor: help;
}
.fn-econ-mini-bar:hover { opacity: .85; }
.fn-econ-mini-bar.is-latest {
  background: linear-gradient(180deg, var(--accent), #6db2ff);
  opacity: 1;
}

/* Affected pairs */
.fn-econ-detail-pairs {
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.fn-econ-pairs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
  gap: 6px;
}
.fn-econ-pair-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px;
  align-items: center;
  padding: 6px 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 11px;
}
.fn-econ-pair-code {
  font-weight: 500;
  color: var(--text);
  letter-spacing: .03em;
}
.fn-econ-pair-dir { font-size: 11px; font-weight: bold; }
.fn-econ-pair-dir--up   { color: #4ad27c; }
.fn-econ-pair-dir--down { color: #ff7a87; }
.fn-econ-pair-vol {
  font-size: 10px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* ── Heatmap view ──────────────────────────────────────────────────────── */
.fn-econ-modal-body--heatmap { padding: 24px 20px; }

.fn-econ-heatmap {
  display: grid;
  grid-template-columns: 64px repeat(6, 1fr);
  gap: 4px;
  margin-bottom: 16px;
}
.fn-econ-heatmap-corner { /* empty */ }
.fn-econ-heatmap-hbucket {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-3);
  text-align: center;
  padding: 6px 0;
  letter-spacing: .03em;
}
.fn-econ-heatmap-hday {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-inline-end: 10px;
  font-weight: 500;
}
.fn-econ-heatmap-hday.is-today {
  color: var(--accent);
  font-weight: 700;
}
.fn-econ-heatmap-cell {
  position: relative;
  aspect-ratio: 1.4;
  min-height: 48px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  --cell-intensity: 0;
  transition: transform .12s, border-color .15s;
}
.fn-econ-heatmap-cell:hover { transform: scale(1.05); }
.fn-econ-heatmap-cell.is-empty {
  background: transparent;
  border-style: dashed;
  cursor: default;
}
.fn-econ-heatmap-cell.is-low {
  background: rgba(68,147,248, calc(.12 + var(--cell-intensity) * .25));
  border-color: rgba(68,147,248,.3);
}
.fn-econ-heatmap-cell.is-medium {
  background: rgba(245,176,66, calc(.15 + var(--cell-intensity) * .4));
  border-color: rgba(245,176,66,.45);
}
.fn-econ-heatmap-cell.is-high {
  background: rgba(255,93,108, calc(.18 + var(--cell-intensity) * .55));
  border-color: rgba(255,93,108,.55);
}
.fn-econ-heatmap-count {
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

.fn-econ-heatmap-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: .04em;
}
.fn-econ-leg-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-inline-end: 6px;
  vertical-align: middle;
}
.fn-econ-leg-dot.is-low    { background: rgba(68,147,248,.5); }
.fn-econ-leg-dot.is-medium { background: rgba(245,176,66,.55); }
.fn-econ-leg-dot.is-high   { background: rgba(255,93,108,.6); }

@media (max-width: 720px) {
  .fn-econ-heatmap { grid-template-columns: 44px repeat(6, 1fr); gap: 3px; }
  .fn-econ-heatmap-cell { min-height: 38px; font-size: 11px; }
  .fn-econ-heatmap-hbucket { font-size: 9px; }
  .fn-econ-heatmap-hday { font-size: 10px; padding-inline-end: 6px; }
}

/* ── Pulse strip — next event with translate=no currency code ──────────── */
.fn-econ-next-cur {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 1px 5px;
  margin: 0 5px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--text);
  vertical-align: middle;
}

/* ── Toast ─────────────────────────────────────────────────────────────── */
.fn-econ-toast {
  position: absolute;
  bottom: 16px;
  inset-inline-start: 50%;
  transform: translate(-50%, 20px);
  padding: 8px 16px;
  background: var(--text);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  opacity: 0;
  pointer-events: none;
  transition: transform .25s, opacity .25s;
  z-index: 10;
}
[dir="rtl"] .fn-econ-toast { transform: translate(50%, 20px); }
.fn-econ-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
[dir="rtl"] .fn-econ-toast.is-visible { transform: translate(50%, 0); }

/* ── Modal sheet — let it be wider for the sidebar ─────────────────────── */
.fn-econ-modal-sheet {
  max-width: 1080px;
  width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ── Mobile responsive — row collapses to stack ────────────────────────── */
@media (max-width: 720px) {
  .fn-econ-row-head {
    grid-template-columns: 24px 48px 70px 1fr 18px 20px;
    gap: 8px;
    padding: 10px 12px;
  }
  .fn-econ-row-head .fn-econ-row-vals {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 6px;
    border-top: 1px dashed var(--line);
    margin-top: 4px;
  }
  .fn-econ-filter-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .fn-econ-modal-chips { width: 100%; justify-content: space-between; }
  .fn-econ-modal-tz { width: 100%; }
}

/* ── RTL fine-tuning ───────────────────────────────────────────────────── */
[dir="rtl"] .fn-econ-modal-search { padding: 8px 12px 8px 12px; }
[dir="rtl"] .fn-econ-row-name,
[dir="rtl"] .fn-econ-row-country,
[dir="rtl"] .fn-econ-detail-edu-text {
  font-family: var(--sans-ar, var(--sans));
}
[dir="rtl"] .fn-econ-detail-edu { border-inline-start: 0; border-inline-end: 3px solid var(--accent); }

/* ═══════════════════════════════════════════════════════════════════════════
   16.  WATCHLIST V12 (v11.12.0) — Icon tabs + Inline sparkline
   Replaces the v11.9.1 Vellum badge + Roman-numeral row layout with a
   trading-pro layout: icon tab bar, context line, clean row, expandable
   inline sparkline preview before the full chart loads in the sidebar.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 16.1  Icon tab strip — all 6+ tabs fit any sidebar width ─────────── */
.fnrp-w2-tabs--icons {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 2px;
  padding: 6px 4px 0;
  border-bottom: 1px solid var(--border);
  overflow: visible; /* no scroll needed — icons always fit */
}

.fnrp-w2-tab--icon {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: color .15s, border-color .15s, background .15s;
  border-radius: 4px 4px 0 0;
}
.fnrp-w2-tab--icon:hover {
  color: var(--text-2);
  background: rgba(255,255,255,0.02);
}
.fnrp-w2-tab--icon.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: var(--accent-bg);
}
.fnrp-w2-tab-iconwrap {
  display: inline-flex;
  width: 18px;
  height: 18px;
}
.fnrp-w2-tab-iconwrap svg {
  width: 100%;
  height: 100%;
  display: block;
}
.fnrp-w2-tab-dot {
  position: absolute;
  top: 6px;
  inset-inline-end: 10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transition: opacity .15s;
}
.fnrp-w2-tab--icon.is-active .fnrp-w2-tab-dot { opacity: 0; }
.fnrp-w2-tab--icon:not(.is-active) .fnrp-w2-tab-dot { opacity: .35; }

/* ── 16.2  Context line — full name + count for the active tab ─────────── */
.fnrp-w2-context {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 14px 6px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.fnrp-w2-context-name {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text);
}
.fnrp-rtl .fnrp-w2-context-name { font-family: var(--sans-ar); letter-spacing: 0; }
.fnrp-w2-context-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  background: var(--surface-2, rgba(255,255,255,0.03));
  border-radius: 99px;
  border: 1px solid var(--border);
}

/* ── 16.3  Row layout v12 — clean, no badge, no roman ─────────────────── */
.fnrp-w2-row--v12 {
  display: block;       /* row contains head + detail panels */
  padding: 0;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.fnrp-w2-row--v12:last-child { border-bottom: none; }
.fnrp-w2-row--v12:hover { background: rgba(255,255,255,0.02); }
html[data-fnrp-theme="light"] .fnrp-w2-row--v12:hover { background: rgba(0,0,0,0.025); }
.fnrp-w2-row--v12.is-active { background: var(--accent-bg); }
.fnrp-w2-row--v12.is-active::before { display: none; }   /* old marker bar replaced by directional dot */

.fnrp-w2-row-head {
  display: grid;
  grid-template-columns: 8px 1fr auto 14px;
  gap: 10px;
  align-items: center;
  padding: 11px 14px;
  cursor: pointer;
  user-select: none;
  min-height: 52px;
}

/* The directional dot: 6px coloured pip on the start gutter */
.fnrp-w2-row-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  margin: 0 auto;
}
.fnrp-w2-row-dot.is-up   { background: var(--up); box-shadow: 0 0 0 3px var(--up-glow); }
.fnrp-w2-row-dot.is-down { background: var(--down); box-shadow: 0 0 0 3px var(--down-glow); }
.fnrp-w2-row-dot.is-flat { background: var(--muted); }

/* Chevron — rotates when expanded */
.fnrp-w2-row-chev {
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease, color .15s;
}
.fnrp-w2-row--v12:hover .fnrp-w2-row-chev { color: var(--text-2); }
.fnrp-w2-row--v12.is-expanded .fnrp-w2-row-chev {
  transform: rotate(180deg);
  color: var(--accent);
}

/* Hide the old badge / roman / star button in v12 layout */
.fnrp-w2-row--v12 .fnrp-w2-row-badge,
.fnrp-w2-row--v12 .fnrp-w2-row-roman,
.fnrp-w2-row--v12 .fnrp-w2-star { display: none; }

/* ── 16.4  Inline detail panel — sparkline + summary + CTA ────────────── */
.fnrp-w2-row-detail {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 14px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.015));
  transition: max-height .35s ease, opacity .25s ease, padding .25s ease;
}
.fnrp-w2-row--v12.is-expanded .fnrp-w2-row-detail {
  max-height: 220px;
  opacity: 1;
  padding: 4px 14px 14px;
}

.fnrp-w2-spark {
  width: 100%;
  height: 60px;
  margin-bottom: 8px;
}
.fnrp-w2-spark-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.fnrp-w2-spark-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.fnrp-w2-spark-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 0;
  background: rgba(255,255,255,0.02);
  border-radius: 4px;
}
html[data-fnrp-theme="light"] .fnrp-w2-spark-cell { background: rgba(0,0,0,0.025); }
.fnrp-w2-spark-lbl {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.fnrp-w2-spark-val {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums slashed-zero;
  direction: ltr;
}

.fnrp-w2-spark-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 4px;
  cursor: pointer;
  justify-content: center;
  transition: background .15s, color .15s;
}
.fnrp-rtl .fnrp-w2-spark-cta { font-family: var(--sans-ar); }
.fnrp-w2-spark-cta:hover {
  background: var(--accent);
  color: white;
}
.fnrp-w2-spark-cta svg { transition: transform .15s; }
.fnrp-w2-spark-cta:hover svg { transform: translateX(2px); }
.fnrp-rtl .fnrp-w2-spark-cta:hover svg { transform: translateX(-2px) scaleX(-1); }
.fnrp-rtl .fnrp-w2-spark-cta svg { transform: scaleX(-1); }

/* ── 16.5  RTL adjustments ────────────────────────────────────────────── */
.fnrp-rtl .fnrp-w2-row-r {
  align-items: flex-start;
  text-align: left;
}
.fnrp-rtl .fnrp-w2-tab-dot {
  inset-inline-end: 10px;
}

/* ── 16.6  Narrow viewport: stronger compaction ──────────────────────── */
@media (max-width: 380px) {
  .fnrp-w2-tabs--icons { padding: 4px 2px 0; }
  .fnrp-w2-tab--icon { padding: 7px 0; }
  .fnrp-w2-tab-iconwrap { width: 16px; height: 16px; }
  .fnrp-w2-context { padding: 8px 12px 5px; }
  .fnrp-w2-context-name { font-size: 11px; }
  .fnrp-w2-row-head { padding: 9px 10px; gap: 8px; min-height: 48px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   16.2  MARKETS WATCHLIST V12.1 (v11.12.1) — CLEAN REBUILD
   
   Why a new namespace (`fnrp-mkt-*`)?
   v11.12.0 reused `.fnrp-w2-row` and added `.fnrp-w2-row--v12` on top of
   it. The original `.fnrp-w2-row { display: grid; grid-template-columns:
   26px 1fr auto }` and the new `.fnrp-w2-row--v12 { display: block }`
   both applied with equal specificity; the cascade outcome depended on
   rule order in the file, which broke when the cache-busting query
   string forced a fresh load. The result: tickers disappeared, prices
   floated in the wrong column.
   
   Fresh namespace = zero cascade overlap = guaranteed predictable
   rendering. The trade is +200 lines of CSS; the debugging time saved
   is well worth it.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Row container ──────────────────────────────────────────────────── */
.fnrp-mkt-row {
  display: block;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background-color .2s ease;
}
html[data-fnrp-theme="light"] .fnrp-mkt-row {
  border-bottom-color: rgba(0,0,0,0.05);
}
.fnrp-mkt-row:last-child { border-bottom: none; }

.fnrp-mkt-row.is-expanded {
  background: rgba(255,255,255,0.015);
}
html[data-fnrp-theme="light"] .fnrp-mkt-row.is-expanded {
  background: rgba(0,0,0,0.015);
}

/* ── Row main (always visible, click target) ───────────────────────── */
.fnrp-mkt-row-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  cursor: pointer;
  user-select: none;
  min-height: 54px;
  transition: background-color .15s ease;
}
.fnrp-mkt-row-main:hover {
  background: rgba(255,255,255,0.025);
}
html[data-fnrp-theme="light"] .fnrp-mkt-row-main:hover {
  background: rgba(0,0,0,0.025);
}
.fnrp-mkt-row.is-active .fnrp-mkt-row-main {
  background: var(--accent-bg);
}
.fnrp-mkt-row.is-active::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}

/* ── Left column: ticker + name ─────────────────────────────────────── */
.fnrp-mkt-row-l {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}

.fnrp-mkt-row-code {
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums slashed-zero;
  line-height: 1.2;
  direction: ltr;
  unicode-bidi: isolate;
  /* Make sure long tickers don't push the right column off-screen */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fnrp-mkt-row-name {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fnrp-rtl .fnrp-mkt-row-name {
  font-family: var(--sans-ar, var(--sans));
}

/* ── Right column: price + change ───────────────────────────────────── */
.fnrp-mkt-row-r {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex: 0 0 auto;
  text-align: end;
}

.fnrp-mkt-row-price {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: 0.01em;
  line-height: 1.2;
  direction: ltr;
  unicode-bidi: isolate;
}

.fnrp-mkt-row-chg {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  direction: ltr;
  unicode-bidi: isolate;
  padding: 2px 7px;
  border-radius: 4px;
}
.fnrp-mkt-row-chg.is-up   {
  color: var(--up);
  background: var(--up-glow);
}
.fnrp-mkt-row-chg.is-down {
  color: var(--down);
  background: var(--down-glow);
}
.fnrp-mkt-row-chg.is-flat {
  color: var(--muted);
  background: transparent;
}

/* ── Detail panel (sparkline + summary + CTA) ───────────────────────── */
.fnrp-mkt-row-detail {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 16px;
  transition: max-height .35s ease, opacity .25s ease, padding .25s ease;
}
.fnrp-mkt-row.is-expanded .fnrp-mkt-row-detail {
  max-height: 280px;
  opacity: 1;
  padding: 4px 16px 16px;
}

/* Sparkline */
.fnrp-mkt-spark {
  width: 100%;
  height: 64px;
  margin-bottom: 10px;
}
.fnrp-mkt-spark-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.fnrp-mkt-spark-svg.is-up .fnrp-mkt-spark-line   { stroke: var(--up); }
.fnrp-mkt-spark-svg.is-up .fnrp-mkt-spark-area   { fill: var(--up-glow); opacity: .9; }
.fnrp-mkt-spark-svg.is-up .fnrp-mkt-spark-dot    { fill: var(--up); }
.fnrp-mkt-spark-svg.is-down .fnrp-mkt-spark-line { stroke: var(--down); }
.fnrp-mkt-spark-svg.is-down .fnrp-mkt-spark-area { fill: var(--down-glow); opacity: .9; }
.fnrp-mkt-spark-svg.is-down .fnrp-mkt-spark-dot  { fill: var(--down); }
.fnrp-mkt-spark-line {
  fill: none;
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* OHLC summary */
.fnrp-mkt-spark-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.fnrp-mkt-spark-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0;
  background: rgba(255,255,255,0.025);
  border-radius: 4px;
}
html[data-fnrp-theme="light"] .fnrp-mkt-spark-cell {
  background: rgba(0,0,0,0.03);
}
.fnrp-mkt-spark-lbl {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 3px;
}
.fnrp-mkt-spark-val {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums slashed-zero;
  direction: ltr;
}

/* CTA button */
.fnrp-mkt-spark-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px 12px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--accent);
  background: rgba(68, 147, 248, 0.07);
  border: 1px solid rgba(68, 147, 248, 0.25);
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s ease;
}
.fnrp-rtl .fnrp-mkt-spark-cta {
  font-family: var(--sans-ar, var(--sans));
}
.fnrp-mkt-spark-cta:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.fnrp-mkt-spark-cta svg {
  transition: transform .15s ease;
}
.fnrp-mkt-spark-cta:hover svg {
  transform: translateX(3px);
}
.fnrp-rtl .fnrp-mkt-spark-cta svg {
  transform: scaleX(-1);
}
.fnrp-rtl .fnrp-mkt-spark-cta:hover svg {
  transform: scaleX(-1) translateX(3px);
}

/* ── Narrow viewport adjustments ────────────────────────────────────── */
@media (max-width: 380px) {
  .fnrp-mkt-row-main { padding: 11px 12px; min-height: 50px; gap: 10px; }
  .fnrp-mkt-row-code { font-size: 13px; }
  .fnrp-mkt-row-name { font-size: 11px; }
  .fnrp-mkt-row-price { font-size: 13px; }
  .fnrp-mkt-row-chg { font-size: 11px; padding: 2px 6px; }
  .fnrp-mkt-spark { height: 56px; }
}

/* ── Belt + braces: kill the OLD v11.9.1 row layout when it co-exists.
   When the new row is rendered, the row is a direct child of the
   container — but if any cached/legacy CSS still finds `.fnrp-w2-row`
   selectors on our element, we want to win. The new row does NOT carry
   any of the old class names, so this is purely defensive. ────────── */
.fnrp-mkt-row .fnrp-w2-row-badge,
.fnrp-mkt-row .fnrp-w2-row-roman,
.fnrp-mkt-row .fnrp-w2-star {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   16.3  MARKETS WATCHLIST V12.2 (v11.12.2) — Generous spacing + Pro layout
   
   Complaints from the v11.12.1 production screenshot:
     1. "Two charts appear" — row click opened inline preview AND
        triggered the sidebar chart loader. Fixed in JS (row click now
        only toggles the inline preview).
     2. "Too cramped" — row padding was 13px, sparkline only 64px,
        OHLC cells were tiny. This file fixes spacing.
     3. "Synthetic data looks fake" — JS now generates a wave-curve
        instead of a random walk. CSS-side, the chart is bigger so the
        improved curve is actually visible.
     4. "Not professional enough for a real trader" — added Day's
        Range / Day Spread / From Open rows below OHLC (standard kit
        on TradingView, IBKR, Bloomberg watchlists).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Override 16.2 spacing for breathing room ─────────────────────────── */
.fnrp-mkt-row-main {
  padding: 18px 18px;       /* was 13px 16px */
  min-height: 64px;         /* was 54px */
  gap: 16px;                /* was 12px */
}
.fnrp-mkt-row-code {
  font-size: 14.5px;        /* was 13.5px */
}
.fnrp-mkt-row-name {
  font-size: 12px;          /* was 11.5px */
}
.fnrp-mkt-row-price {
  font-size: 15px;          /* was 14px */
}
.fnrp-mkt-row-chg {
  font-size: 12px;
  padding: 3px 9px;         /* was 2px 7px */
}

/* Detail panel — taller breathing room */
.fnrp-mkt-row.is-expanded .fnrp-mkt-row-detail {
  max-height: 460px;        /* was 280px */
  padding: 8px 18px 20px;   /* was 4px 16px 16px */
}

/* ── Bigger sparkline — 100px tall ───────────────────────────────────── */
.fnrp-mkt-spark {
  height: 100px !important; /* was 64px */
  margin-bottom: 14px;
  padding: 4px 0;
}

/* ── OHLC cells — bigger, calmer ─────────────────────────────────────── */
.fnrp-mkt-spark-summary {
  gap: 8px;                 /* was 6px */
  margin-bottom: 14px;
}
.fnrp-mkt-spark-cell {
  padding: 10px 4px;        /* was 6px 0 */
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 6px;       /* was 4px */
}
html[data-fnrp-theme="light"] .fnrp-mkt-spark-cell {
  background: rgba(0,0,0,0.025);
  border-color: rgba(0,0,0,0.04);
}
.fnrp-mkt-spark-lbl {
  font-size: 10px;          /* was 9px */
  letter-spacing: .18em;
  margin-bottom: 6px;
  opacity: .8;
}
.fnrp-mkt-spark-val {
  font-size: 12.5px;        /* was 11px */
  font-weight: 600;
}
.fnrp-mkt-spark-val.is-up   { color: var(--up); }
.fnrp-mkt-spark-val.is-down { color: var(--down); }

/* ── Pro stats panel (Day's Range / Spread / From Open) ──────────────── */
.fnrp-mkt-spark-pro {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 14px;
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 6px;
  overflow: hidden;
}
html[data-fnrp-theme="light"] .fnrp-mkt-spark-pro {
  border-color: rgba(0,0,0,0.05);
}

.fnrp-mkt-spark-prorow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  font-family: var(--sans);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  background: rgba(255,255,255,0.02);
}
html[data-fnrp-theme="light"] .fnrp-mkt-spark-prorow {
  border-bottom-color: rgba(0,0,0,0.04);
  background: rgba(0,0,0,0.015);
}
.fnrp-mkt-spark-prorow:last-child { border-bottom: none; }
.fnrp-rtl .fnrp-mkt-spark-prorow { font-family: var(--sans-ar, var(--sans)); }

.fnrp-mkt-spark-prolbl {
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: .02em;
}

.fnrp-mkt-spark-proval {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums slashed-zero;
  direction: ltr;
  unicode-bidi: isolate;
}
.fnrp-mkt-spark-proval.is-up   { color: var(--up); }
.fnrp-mkt-spark-proval.is-down { color: var(--down); }

/* ── CTA — calmer, more inviting ─────────────────────────────────────── */
.fnrp-mkt-spark-cta {
  padding: 11px 16px;       /* was 9px 12px */
  font-size: 12.5px;        /* was 11.5px */
  font-weight: 600;
  gap: 8px;
  border-radius: 7px;       /* was 6px */
}

/* ── Narrow viewport — still respectful of breathing room ────────────── */
@media (max-width: 380px) {
  .fnrp-mkt-row-main { padding: 14px 14px; min-height: 58px; gap: 12px; }
  .fnrp-mkt-row.is-expanded .fnrp-mkt-row-detail { padding: 6px 14px 16px; }
  .fnrp-mkt-spark { height: 80px !important; }
  .fnrp-mkt-spark-cell { padding: 8px 2px; }
  .fnrp-mkt-spark-lbl { font-size: 9px; }
  .fnrp-mkt-spark-val { font-size: 11.5px; }
  .fnrp-mkt-spark-prolbl, .fnrp-mkt-spark-proval { font-size: 11px; }
  .fnrp-mkt-spark-cta { font-size: 12px; padding: 10px 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   22.  ARTICLE SHEET (v11.13.2)
   The article slides in from the END side over the news stream, with a
   carbon-dark backdrop blur. Matches the HTML Carbon mockup exactly.
   The article iframe loads the existing single-article page, so all of
   article.js (comments, login, like, share, save) keeps working as-is.
   ═══════════════════════════════════════════════════════════════════════════ */

.fnrp-art-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 21, 0.82);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  z-index: 100000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fnrp-art-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Light theme keeps a dark backdrop intentionally — the article inside
   is dark Carbon, so the eye locks onto it more naturally with dimming. */
html[data-fnrp-theme="light"] .fnrp-art-overlay {
  background: rgba(10, 14, 21, 0.65);
}

/* Close button — floats over the backdrop, NOT inside the sheet, so the
   sheet itself stays clean and the close hit-area sits in the "wasted"
   gap on the start side. */
.fnrp-art-close {
  position: fixed;
  top: 18px;
  inset-inline-start: 24px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #e3e9f2;
  cursor: pointer;
  transition: background 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 100002;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.fnrp-art-close:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: rotate(90deg);
}
.fnrp-art-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The sheet itself — slides in from the inset-end side */
.fnrp-art-sheet {
  position: fixed;
  top: 0;
  inset-inline-end: 0;
  width: min(820px, 94vw);
  height: 100vh;
  background: var(--bg);
  border-inline-start: 1px solid var(--border);
  box-shadow: -20px 0 60px -20px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Slide in from end side — works for both LTR and RTL via logical prop */
  transform: translateX(100%);
  transition: transform 0.48s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
[dir="rtl"] .fnrp-art-sheet {
  transform: translateX(-100%);
  box-shadow: 20px 0 60px -20px rgba(0, 0, 0, 0.6);
}
.fnrp-art-overlay.is-open .fnrp-art-sheet {
  transform: translateX(0);
}

/* Iframe — fills the sheet, no border, transparent until loaded */
.fnrp-art-iframe {
  flex: 1;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fnrp-art-overlay.is-loaded .fnrp-art-iframe {
  opacity: 1;
}

/* Loader — three pulsing dots while the iframe boots */
.fnrp-art-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 8px;
  opacity: 1;
  transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
.fnrp-art-overlay.is-loaded .fnrp-art-loader {
  opacity: 0;
}
.fnrp-art-loader span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: fnrpLoaderPulse 1.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.fnrp-art-loader span:nth-child(2) { animation-delay: 0.15s; }
.fnrp-art-loader span:nth-child(3) { animation-delay: 0.30s; }
@keyframes fnrpLoaderPulse {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
  40%           { opacity: 1;    transform: scale(1.15); }
}

/* Mobile — full-screen sheet, close button moves to corner of sheet */
@media (max-width: 760px) {
  .fnrp-art-sheet {
    width: 100vw;
    border-inline-start: 0;
  }
  .fnrp-art-close {
    top: 12px;
    inset-inline-start: 12px;
    width: 38px;
    height: 38px;
  }
}

/* Body scroll-lock indicator — the overlay JS sets body { overflow: hidden }
   directly; this rule is here so any sticky-positioned descendant of body
   doesn't jitter sideways when the scrollbar disappears. */
body:has(.fnrp-art-overlay.is-open) {
  /* Reserve scrollbar gutter to prevent layout shift when sheet opens */
  scrollbar-gutter: stable;
}

/* ═══════════════════════════════════════════════════════════════════════════
   23.  WATCHLIST DEFENSIVE OVERRIDES (v11.13.2)
   Belt-and-braces rules to ensure the v11.12.1 .fnrp-mkt-* layout wins
   against any leftover .fnrp-w2-* CSS that targets the same elements.
   The new row builder uses fresh class names, but if ANY rule from the
   v11.9.1 layout still touches descendants of .fnrp-mkt-row, the layout
   can look "overlapping" — that's what the user keeps reporting.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Force fresh layout for any element inside the new row namespace —
   the !important here is the surgical, last-resort kind, not blanket
   override. Only on .fnrp-mkt-row descendants. */
.fnrp-mkt-row {
  position: relative !important;
  display: block !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
.fnrp-mkt-row-main {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.fnrp-mkt-row-l {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  align-items: flex-start !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  text-align: start !important;
}
.fnrp-mkt-row-r {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  align-items: flex-end !important;
  flex: 0 0 auto !important;
}
[dir="rtl"] .fnrp-mkt-row-r {
  align-items: flex-start !important;
  text-align: start !important;
}
.fnrp-mkt-row-code,
.fnrp-mkt-row-name,
.fnrp-mkt-row-price,
.fnrp-mkt-row-chg {
  margin: 0 !important;
  white-space: nowrap !important;
}

/* Kill any v11.9.1 grid/badge/roman/star residues that might still ride
   on the row from cached CSS or theme overrides. */
.fnrp-mkt-row .fnrp-w2-row-badge,
.fnrp-mkt-row .fnrp-w2-row-roman,
.fnrp-mkt-row .fnrp-w2-row-chev,
.fnrp-mkt-row .fnrp-w2-row-dot,
.fnrp-mkt-row .fnrp-w2-row-head,
.fnrp-mkt-row .fnrp-w2-star {
  display: none !important;
}

/* Ensure the watchlist card has consistent padding on every theme. The
   old v11.9.1 padding was 10px 12px with a grid template; if any stray
   rule still applies that, override here. */
.fnrp-w2-card .fnrp-mkt-row-main {
  padding: 14px 16px !important;
  min-height: 56px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   24.  SEARCH BAR — visible feedback (v11.13.2)
   Clear-button (×) + loading shimmer on the icon so users SEE the search
   responding. The previous version was silent: type → 350ms → results
   change. Without any "loading" cue, users couldn't tell if the search
   was working or hung.
   ═══════════════════════════════════════════════════════════════════════════ */

.fh-search-w { position: relative; }

.fh-search-clear {
  position: absolute;
  top: 50%;
  inset-inline-end: 6px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: 0;
  background: var(--surface-2);
  color: var(--muted);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s cubic-bezier(0.22, 0.61, 0.36, 1),
              color 0.15s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fh-search-clear:hover {
  background: var(--accent);
  color: #fff;
}
html[data-fnrp-theme="light"] .fh-search-clear:hover { color: #fff; }

/* Loading shimmer — the magnifying-glass icon pulses jade while the
   debounced request is in flight */
.fh-search-w.is-loading .fh-search-ic {
  color: var(--accent);
  animation: fhSearchPulse 1s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes fhSearchPulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

/* When there's text, the input gets a subtle accent border to confirm
   "you have an active filter on the stream" */
.fh-search-w.has-text {
  box-shadow: 0 0 0 1px var(--accent-bg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   25.  WATCHLIST V13 — Radical compaction (v11.13.3)
   
   The user kept calling the widget "cramped and depressing". Diagnosis:
     • SIX stacked header lines before any data:
         1. "WATCHLIST"  (card header)
         2. "LIVE" pill  
         3. 6-icon tab strip
         4. "CRYPTO · 35"  (context line)
         5. "35 · LIVE"    (column status)
         6. "Search 35…"   (search input)
     • Asset rows ~70px tall, content stacked vertically on both sides,
       zero visual interest (no chart preview at all).
   
   Fix in v11.13.3:
     1. Killed lines 4, 5, 6 entirely (in JS). Now just card header → tabs → rows.
     2. Added inline mini-sparkline cell to every row.
     3. Tightened row padding (was 18px, now 12-14px) so 5+ rows fit
        cleanly without scroll.
     4. Made the active tab visually OBVIOUS — filled jade background,
        not just an underline.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tighter rows + sparkline cell ─────────────────────────────────────── */
.fnrp-w2-col--v13 .fnrp-mkt-row-main,
.fnrp-w2-col--v13 .fnrp-mkt-row-head,
.fs-card-body.fnrp-w2 .fnrp-mkt-row-main {
  padding: 11px 14px !important;
  min-height: 48px !important;
  gap: 10px !important;
}

.fnrp-mkt-row-spark {
  flex: 0 0 60px;
  width: 60px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  transition: opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fnrp-mkt-row:hover .fnrp-mkt-row-spark { opacity: 1; }
.fnrp-mkt-row-spark svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* When row is expanded, hide the inline mini-spark — the big spark
   in the detail panel takes over */
.fnrp-mkt-row.is-expanded .fnrp-mkt-row-spark {
  opacity: 0.35;
}

/* ── Active tab — FILLED background, not just underline ─────────────── */
.fnrp-w2-tab--icon.is-active {
  background: var(--accent) !important;
  color: var(--bg) !important;
  border-radius: 7px !important;
  position: relative;
}
.fnrp-w2-tab--icon.is-active::after {
  display: none !important;   /* drop the underline; the fill IS the indicator */
}
.fnrp-w2-tab--icon.is-active .fnrp-w2-tab-iconwrap svg {
  stroke-width: 1.8;
}
.fnrp-w2-tabs--icons {
  padding: 8px 6px !important;
  gap: 4px !important;
  border-bottom: 1px solid var(--border);
}
.fnrp-w2-tab--icon {
  padding: 7px 0 !important;
  border-radius: 7px !important;
  transition: background 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),
              color 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fnrp-w2-tab--icon:not(.is-active):hover {
  background: var(--bg-2) !important;
  color: var(--text) !important;
}
.fnrp-w2-tab-dot { display: none !important; }   /* no longer needed — active state is now filled */

/* ── Row layout — 3 columns: left | spark | right ───────────────────── */
.fnrp-w2-col--v13 .fnrp-mkt-row-main {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}
.fnrp-w2-col--v13 .fnrp-mkt-row-l {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 90px;
}
.fnrp-w2-col--v13 .fnrp-mkt-row-r {
  flex: 1 1 auto !important;
  align-items: flex-end !important;
}
[dir="rtl"] .fnrp-w2-col--v13 .fnrp-mkt-row-r {
  align-items: flex-start !important;
}

/* Smaller code/name fonts so 3 columns fit in narrow widget */
.fnrp-w2-col--v13 .fnrp-mkt-row-code {
  font-size: 12.5px !important;
  font-weight: 700 !important;
}
.fnrp-w2-col--v13 .fnrp-mkt-row-name {
  font-size: 10.5px !important;
  color: var(--muted-2) !important;
}
.fnrp-w2-col--v13 .fnrp-mkt-row-price {
  font-size: 13px !important;
  font-weight: 600 !important;
}
.fnrp-w2-col--v13 .fnrp-mkt-row-chg {
  font-size: 10.5px !important;
  padding: 1px 6px !important;
  border-radius: 3px !important;
}

/* Row separator — softer, less "list-y" */
.fnrp-mkt-row {
  border-bottom: 1px solid var(--line-soft, rgba(255,255,255,0.04)) !important;
}
html[data-fnrp-theme="light"] .fnrp-mkt-row {
  border-bottom-color: rgba(15,23,42,0.04) !important;
}

/* Subtle hover lift — gives the row "click me" feel */
.fnrp-mkt-row-main:hover {
  background: var(--accent-bg, rgba(77,212,172,0.06)) !important;
}

/* "+ N more" button — make it look like part of the design, not an afterthought */
.fnrp-w2-col-more {
  display: block;
  width: 100%;
  padding: 11px 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s cubic-bezier(0.22, 0.61, 0.36, 1),
              background 0.15s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fnrp-w2-col-more:hover {
  color: var(--accent);
  background: var(--accent-bg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   26.  EARNINGS CARDS (v11.14.0)
   
   The third view mode of the economic-calendar modal — corporate earnings.
   ~68 major US/global names in the seed; paid-feed integration via the
   `fnrp_earnings_calendar` PHP filter.
   ═══════════════════════════════════════════════════════════════════════════ */

.fn-earn-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin: 0 0 10px;
  overflow: hidden;
  transition: border-color 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),
              background 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fn-earn-card:hover {
  border-color: var(--border-2);
  transform: translateY(-1px);
}
.fn-earn-card--impact-high {
  border-inline-start: 3px solid var(--down);
}
.fn-earn-card--impact-medium {
  border-inline-start: 3px solid var(--warn);
}
.fn-earn-card--impact-low {
  border-inline-start: 3px solid var(--muted-2);
}

.fn-earn-card-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
}

.fn-earn-card-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.fn-earn-card-ticker {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
  direction: ltr;
  unicode-bidi: isolate;
}
.fn-earn-card-company {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

.fn-earn-card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
[dir="rtl"] .fn-earn-card-right { align-items: flex-start; }
.fn-earn-card-time {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-2);
  letter-spacing: 0.04em;
  direction: ltr;
  unicode-bidi: isolate;
}
.fn-earn-card-session {
  color: var(--accent);
  font-weight: 600;
}
.fn-earn-card-sector {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid;
  border-radius: 99px;
}

.fn-earn-card-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 0 16px 14px;
}
.fn-earn-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 4px;
  background: var(--bg-2);
  border-radius: 6px;
  text-align: center;
}
.fn-earn-stat-lbl {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.2;
}
.fn-earn-stat-val {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  direction: ltr;
  unicode-bidi: isolate;
}
.fn-earn-stat-val--muted { color: var(--muted); font-weight: 500; }
.fn-earn-stat--mcap { background: var(--accent-bg); }
.fn-earn-stat--mcap .fn-earn-stat-val { color: var(--accent); }

/* Mobile — stack stats 2-per-row instead of 5-per-row */
@media (max-width: 720px) {
  .fn-earn-card-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .fn-earn-card-company { max-width: 180px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   27.  DATE-RANGE QUICK FILTERS (v11.15.0)
   Chip strip in the economic-calendar modal that scopes Today / Week /
   Month / Quarter — fixes the "only 5 entries showing" complaint by
   defaulting to a wider window.
   ═══════════════════════════════════════════════════════════════════════════ */

.fn-econ-modal-chips--range {
  display: flex;
  gap: 4px;
  padding: 0;
}
.fn-econ-chip--range {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  border-radius: 99px;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fn-econ-chip--range:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.fn-econ-chip--range.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   v11.18.0 — SERVICES ICON RAIL + SLIDE-IN PANELS
   A narrow 52px icon rail attached to the right edge of fn-sidebar.
   Each icon opens a dedicated slide-in panel (same motion as article sheet).
   No emoji. Fully translatable. Light/dark + RTL compatible.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Icon rail — 52px strip on the right of the sidebar ────────────────── */
#fsv-rail {
  width: 52px;
  min-width: 52px;
  max-width: 52px;
  background: var(--bg, #0e1118);
  border-inline-start: 1px solid rgba(120,140,170,.10);
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0 20px;
  gap: 2px;
  z-index: 100;
  flex-shrink: 0;
  align-self: flex-start;
}

/* Rail icon button */
.fsv-rail-btn {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  color: rgba(120,140,170,.45);
  transition: color .22s, background .22s, border-color .22s, transform .18s;
  position: relative;
  padding: 0;
  flex-shrink: 0;
}
.fsv-rail-btn:hover {
  color: rgba(180,195,210,.85);
  background: rgba(120,140,170,.07);
  border-color: rgba(120,140,170,.14);
  transform: scale(1.07);
}
.fsv-rail-btn.is-active {
  color: var(--accent, #4dd4ac);
  background: rgba(77,212,172,.10);
  border-color: rgba(77,212,172,.28);
}
.fsv-rail-btn.is-active-bc {
  color: #5fa3d1;
  background: rgba(95,163,209,.10);
  border-color: rgba(95,163,209,.28);
}
.fsv-rail-btn svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.55;
}

/* Active indicator — thin line on the inline-end edge */
.fsv-rail-btn::after {
  content: '';
  position: absolute;
  inset-inline-end: -1px;
  top: 20%;
  bottom: 20%;
  width: 2px;
  background: currentColor;
  border-radius: 2px 0 0 2px;
  opacity: 0;
  transition: opacity .22s;
}
.fsv-rail-btn.is-active::after,
.fsv-rail-btn.is-active-bc::after { opacity: 1; }

.fsv-rail-divider {
  width: 22px;
  height: 1px;
  background: rgba(120,140,170,.10);
  margin: 8px 0;
  flex-shrink: 0;
}

/* ── Slide-in panel (shared shell) ─────────────────────────────────────── */
#fsv-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8,11,18,.70);
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
  z-index: 99998;
  opacity: 0;
  pointer-events: none;
  transition: opacity .30s cubic-bezier(.22,.61,.36,1);
}
#fsv-panel-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* The sheet */
#fsv-panel-sheet {
  position: fixed;
  top: 0;
  inset-inline-end: 52px; /* sits just inset of the rail */
  width: min(440px, 92vw);
  height: 100vh;
  background: #0f1219;
  border-inline-start: 1px solid rgba(120,140,170,.12);
  box-shadow: -18px 0 50px -10px rgba(0,0,0,.55);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(calc(100% + 52px));
  transition: transform .46s cubic-bezier(.16,1,.3,1);
  will-change: transform;
  z-index: 99999;
}
[dir="rtl"] #fsv-panel-sheet {
  inset-inline-end: auto;
  inset-inline-start: 52px;
  transform: translateX(calc(-100% - 52px));
  box-shadow: 18px 0 50px -10px rgba(0,0,0,.55);
}
#fsv-panel-overlay.is-open #fsv-panel-sheet {
  transform: translateX(0);
}
[data-fnrp-theme="light"] #fsv-panel-sheet {
  background: #f5f7fa;
  border-color: rgba(0,0,0,.10);
}

/* Panel close button */
#fsv-panel-close {
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(120,140,170,.08);
  border: 1px solid rgba(120,140,170,.14);
  color: rgba(120,140,170,.6);
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
  transition: background .2s, color .2s, transform .2s;
  flex-shrink: 0;
}
#fsv-panel-close:hover {
  background: rgba(120,140,170,.18);
  color: #e3e9f2;
  transform: rotate(90deg);
}
#fsv-panel-close svg { stroke: currentColor; fill: none; }

/* Scrollable panel body */
#fsv-panel-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 54px 28px 36px;
  scrollbar-width: thin;
  scrollbar-color: rgba(120,140,170,.15) transparent;
}
#fsv-panel-body::-webkit-scrollbar { width: 4px; }
#fsv-panel-body::-webkit-scrollbar-thumb {
  background: rgba(120,140,170,.15);
  border-radius: 2px;
}

/* ── Panel content shared atoms ─────────────────────────────────────────── */
.fsv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.fsv-eyebrow::before {
  content: '';
  width: 18px;
  height: 1px;
  background: currentColor;
  display: block;
}
.fsv-eyebrow-jade { color: #4dd4ac; }
.fsv-eyebrow-steel { color: #5fa3d1; }

.fsv-panel-h1 {
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 600;
  line-height: 1.18;
  color: #e7e9ec;
  margin-bottom: 10px;
  letter-spacing: -.2px;
}
.fsv-panel-h1 em {
  font-style: italic;
  font-weight: 400;
  color: #8a919e;
  font-family: Georgia, 'Times New Roman', serif;
}
.fsv-panel-lead {
  font-size: 13.5px;
  line-height: 1.7;
  color: #8a919e;
  margin-bottom: 26px;
  max-width: 380px;
}

/* ── VerifiedBrands panel ───────────────────────────────────────────────── */

/* Status badge */
.fsv-vb-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #f5b85f;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(245,184,95,.09);
  border: 1px solid rgba(245,184,95,.26);
  margin-bottom: 20px;
}
.fsv-vb-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f5b85f;
  animation: fsv-pulse 2s ease-in-out infinite;
}
@keyframes fsv-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .3; }
}

/* Blurred broker grid */
.fsv-broker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 20px 0 22px;
}
.fsv-broker-card {
  aspect-ratio: 1.6 / 1;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(120,140,170,.10);
  border-radius: 9px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color .25s, transform .25s;
}
.fsv-broker-card:hover {
  border-color: rgba(77,212,172,.30);
  transform: translateY(-2px);
}
.fsv-broker-card:hover .fsv-broker-blur { transform: scale(1.08); }

.fsv-broker-blur {
  width: 60%;
  height: 18px;
  background: linear-gradient(110deg,
    rgba(120,140,170,.3),
    rgba(170,185,200,.35),
    rgba(120,140,170,.25));
  filter: blur(10px);
  border-radius: 4px;
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.fsv-broker-card:nth-child(2n)  .fsv-broker-blur { width:70%; height:14px; }
.fsv-broker-card:nth-child(3n)  .fsv-broker-blur { width:45%; height:26px; border-radius:50%; }
.fsv-broker-card:nth-child(5n)  .fsv-broker-blur { width:78%; height:12px; }

.fsv-broker-lock {
  position: absolute;
  top: 7px;
  inset-inline-end: 7px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(8,11,18,.6);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(120,140,170,.14);
  display: grid;
  place-items: center;
  color: rgba(120,140,170,.5);
}
.fsv-broker-lock svg { width: 9px; height: 9px; stroke: currentColor; fill: none; stroke-width: 1.5; }

.fsv-broker-soon {
  position: absolute;
  bottom: 6px;
  inset-inline-start: 7px;
  font-family: var(--mono, monospace);
  font-size: 9px; /* v11.22.3 (BUG-16) — was 7.5px, below readable floor */
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(120,140,170,.45);
  background: rgba(8,11,18,.55);
  backdrop-filter: blur(4px);
  padding: 1px 5px;
  border-radius: 3px;
}

/* Notify form */
.fsv-notify-form {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.fsv-notify-input {
  flex: 1;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(120,140,170,.18);
  border-radius: 8px;
  padding: 10px 12px;
  color: #e7e9ec;
  font-size: 13px;
  outline: none;
  transition: border-color .2s, background .2s;
  font-family: inherit;
}
.fsv-notify-input:focus {
  border-color: rgba(77,212,172,.4);
  background: rgba(77,212,172,.04);
}
.fsv-notify-input::placeholder { color: rgba(120,140,170,.35); }
.fsv-notify-btn {
  padding: 10px 16px;
  border-radius: 8px;
  background: #4dd4ac;
  color: #052418;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background .2s, box-shadow .2s, transform .18s;
  white-space: nowrap;
  font-family: inherit;
}
.fsv-notify-btn:hover {
  background: #63e0bc;
  box-shadow: 0 0 18px rgba(77,212,172,.28);
  transform: translateY(-1px);
}

/* Criteria grid */
.fsv-crit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 24px;
}
.fsv-crit-item {
  padding: 12px 14px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(120,140,170,.09);
  border-radius: 9px;
  font-size: 12px;
  color: #8a919e;
  line-height: 1.4;
  transition: border-color .22s, color .22s;
}
.fsv-crit-item:hover { border-color: rgba(77,212,172,.25); color: #b3b8c2; }
.fsv-crit-title { font-size: 11.5px; font-weight: 600; color: #c5cad4; margin-bottom: 3px; }

/* ── Broker Complaint panel ─────────────────────────────────────────────── */

/* Motivational quote strip */
.fsv-bc-quote {
  padding: 13px 16px;
  border-inline-start: 2px solid #5fa3d1;
  background: rgba(95,163,209,.07);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  color: #9fb8ce;
  line-height: 1.65;
  margin-bottom: 24px;
  font-style: italic;
}

/* Form fields */
.fsv-form { display: flex; flex-direction: column; gap: 14px; }
.fsv-form-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fsv-field { display: flex; flex-direction: column; gap: 6px; }
.fsv-label {
  font-size: 11.5px;
  font-weight: 500;
  color: #8a919e;
}
.fsv-input {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(120,140,170,.16);
  border-radius: 8px;
  padding: 10px 12px;
  color: #e7e9ec;
  font-size: 13px;
  outline: none;
  width: 100%;
  transition: border-color .2s, background .2s, box-shadow .2s;
  font-family: inherit;
}
.fsv-input:focus {
  border-color: rgba(95,163,209,.45);
  background: rgba(95,163,209,.04);
  box-shadow: 0 0 0 3px rgba(95,163,209,.10);
}
.fsv-input-jade:focus {
  border-color: rgba(77,212,172,.45);
  background: rgba(77,212,172,.04);
  box-shadow: 0 0 0 3px rgba(77,212,172,.10);
}
.fsv-input::placeholder { color: rgba(120,140,170,.32); }
select.fsv-input { cursor: pointer; }
select.fsv-input option { background: #0f1219; color: #e7e9ec; }
[data-fnrp-theme="light"] .fsv-input { background: #f0f2f5; border-color: rgba(0,0,0,.14); color: #1a1f29; }
[data-fnrp-theme="light"] select.fsv-input option { background: #ffffff; color: #1a1f29; }
.fsv-textarea { resize: vertical; min-height: 84px; line-height: 1.6; }

/* Progress bar */
.fsv-bc-progress {
  display: flex;
  gap: 5px;
  margin-bottom: 22px;
}
.fsv-bc-progress-seg {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: rgba(120,140,170,.14);
  transition: background .35s;
}
.fsv-bc-progress-seg.done    { background: #5fa3d1; }
.fsv-bc-progress-seg.current { background: linear-gradient(90deg, #5fa3d1 50%, rgba(120,140,170,.14) 50%); }

/* Privacy note */
.fsv-privacy {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 11px;
  color: rgba(120,140,170,.45);
  line-height: 1.5;
  padding-top: 4px;
}
.fsv-privacy svg { flex-shrink: 0; margin-top: 1px; stroke: currentColor; fill: none; }

/* Submit button */
.fsv-submit {
  width: 100%;
  padding: 12px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all .22s;
  font-family: inherit;
}
.fsv-submit-steel { background: #5fa3d1; color: #04162a; }
.fsv-submit-steel:hover { background: #74b5de; box-shadow: 0 0 18px rgba(95,163,209,.3); transform: translateY(-1px); }
.fsv-submit-jade  { background: #4dd4ac; color: #052418; }
.fsv-submit-jade:hover  { background: #63e0bc; box-shadow: 0 0 18px rgba(77,212,172,.28); transform: translateY(-1px); }

/* Divider before actions */
.fsv-form-divider {
  height: 1px;
  background: rgba(120,140,170,.09);
  margin: 6px 0;
}

/* ── Academy panel ──────────────────────────────────────────────────────── */

/* Path track */
.fsv-path-track {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 20px 0 26px;
}
.fsv-path-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}
.fsv-path-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4px;
  border: 1.5px solid currentColor;
  background: rgba(255,255,255,.03);
  transition: background .25s;
}
.fsv-path-circle:hover { background: rgba(255,255,255,.07); }
.fsv-path-c1 { color: #4dd4ac; }
.fsv-path-c2 { color: #5fa3d1; }
.fsv-path-c3 { color: #f5b85f; }
.fsv-path-lbl {
  font-size: 11px;
  color: #7a818e;
  white-space: nowrap;
}
.fsv-path-line {
  flex: 1;
  height: 1.5px;
  opacity: .35;
  margin: 0 3px;
  margin-bottom: 22px;
}
.fsv-path-line-1 { background: linear-gradient(90deg, #4dd4ac, #5fa3d1); }
.fsv-path-line-2 { background: linear-gradient(90deg, #5fa3d1, #f5b85f); }

/* Benefits */
.fsv-benefits {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px 16px;
  background: rgba(77,212,172,.04);
  border: 1px solid rgba(77,212,172,.14);
  border-radius: 10px;
  margin: 18px 0;
}
.fsv-benefit {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: #9fb8ae;
  line-height: 1.4;
}
.fsv-benefit-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(77,212,172,.55);
  flex-shrink: 0;
}
.fsv-nofee {
  font-family: var(--mono, monospace);
  font-size: 10.5px;
  letter-spacing: .5px;
  color: rgba(120,140,170,.35);
  text-align: center;
  padding: 4px 0 2px;
}

/* ── Success state ─────────────────────────────────────────────────────── */
.fsv-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px 36px;
  gap: 12px;
  animation: fsv-fadein .4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes fsv-fadein {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fsv-success-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(77,212,172,.10);
  border: 1.5px solid rgba(77,212,172,.35);
  display: grid;
  place-items: center;
  animation: fsv-pop .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes fsv-pop {
  0%  { transform: scale(.5);  opacity: 0; }
  70% { transform: scale(1.1); opacity: 1; }
  100%{ transform: scale(1);   opacity: 1; }
}
.fsv-success-ring svg { stroke: #4dd4ac; fill: none; }
.fsv-success-title {
  font-size: 19px;
  font-weight: 600;
  color: #e7e9ec;
  line-height: 1.25;
}
.fsv-success-body {
  font-size: 13.5px;
  color: #7a818e;
  line-height: 1.65;
  max-width: 300px;
}

/* ── Panel content entrance stagger ─────────────────────────────────────── */
#fsv-panel-body > * {
  opacity: 0;
  transform: translateY(10px);
  animation: fsv-fadein .42s cubic-bezier(.16,1,.3,1) forwards;
}
#fsv-panel-body > *:nth-child(1)  { animation-delay: .08s; }
#fsv-panel-body > *:nth-child(2)  { animation-delay: .13s; }
#fsv-panel-body > *:nth-child(3)  { animation-delay: .18s; }
#fsv-panel-body > *:nth-child(4)  { animation-delay: .23s; }
#fsv-panel-body > *:nth-child(5)  { animation-delay: .28s; }
#fsv-panel-body > *:nth-child(6)  { animation-delay: .33s; }
#fsv-panel-body > *:nth-child(7)  { animation-delay: .38s; }
#fsv-panel-body > *:nth-child(8)  { animation-delay: .43s; }
#fsv-panel-body > *:nth-child(9)  { animation-delay: .48s; }
#fsv-panel-body > *:nth-child(10) { animation-delay: .53s; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  #fsv-panel-sheet { inset-inline-end: 0; }
  [dir="rtl"] #fsv-panel-sheet { inset-inline-start: 0; inset-inline-end: auto; }
}
@media (max-width: 760px) {
  #fsv-rail { display: none; }
  #fsv-panel-sheet { width: 100vw; inset-inline-end: 0; }
}
@media (max-width: 480px) {
  #fsv-panel-body { padding: 54px 20px 28px; }
  .fsv-crit-grid { grid-template-columns: 1fr; }
  .fsv-form-row2  { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v11.18.0 — SERVICES ICON RAIL + SLIDE-IN PANELS
   Rail lives as 3rd column of fn-body grid (built in buildBody, never appended
   via setTimeout). This ensures correct position at top of page always.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Extend fn-body grid to 3 columns ──────────────────────────────────── */
#fnrp-body {
  grid-template-columns: 1fr 320px 44px !important;
}

/* ── Rail ───────────────────────────────────────────────────────────────── */
#fsv-rail {
  width: 44px;
  min-width: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 20px;
  gap: 4px;
  position: sticky;
  top: 80px;
  align-self: flex-start;
  border-inline-start: 1px solid rgba(120,140,170,.08);
  background: transparent;
  z-index: 10;
}

/* ── Rail divider ───────────────────────────────────────────────────────── */
.fsv-rail-div {
  width: 20px;
  height: 1px;
  background: rgba(120,140,170,.10);
  margin: 6px 0;
  flex-shrink: 0;
}

/* ── Rail button ────────────────────────────────────────────────────────── */
.fsv-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(120,140,170,.10);
  cursor: pointer;
  color: rgba(140,155,175,.55);
  transition: color .22s, background .22s, border-color .22s, box-shadow .22s, transform .18s;
  flex-shrink: 0;
  padding: 0;
  outline: none;
}

/* Icon box inside button */
.fsv-btn-iw {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.fsv-btn-iw svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  transition: stroke .22s;
}

/* Hover — reveal clearly interactive */
.fsv-btn:hover {
  color: rgba(200,215,230,.85);
  background: rgba(120,140,170,.10);
  border-color: rgba(120,140,170,.22);
  transform: scale(1.08);
  box-shadow: 0 0 0 3px rgba(120,140,170,.07);
}

/* Jade variant hover */
.fsv-btn-jade:hover {
  color: #4dd4ac;
  background: rgba(77,212,172,.10);
  border-color: rgba(77,212,172,.30);
  box-shadow: 0 0 12px rgba(77,212,172,.18);
}

/* Steel variant hover */
.fsv-btn-steel:hover {
  color: #5fa3d1;
  background: rgba(95,163,209,.10);
  border-color: rgba(95,163,209,.30);
  box-shadow: 0 0 12px rgba(95,163,209,.18);
}

/* Active states (panel open) */
.fsv-btn-active {
  color: #4dd4ac !important;
  background: rgba(77,212,172,.12) !important;
  border-color: rgba(77,212,172,.38) !important;
  box-shadow: 0 0 16px rgba(77,212,172,.22) !important;
}
.fsv-btn-active::after {
  content: '';
  position: absolute;
  inset-inline-end: -1px;
  top: 22%;
  bottom: 22%;
  width: 2px;
  background: #4dd4ac;
  border-radius: 2px 0 0 2px;
  box-shadow: 0 0 6px rgba(77,212,172,.5);
}
.fsv-btn-active-bc {
  color: #5fa3d1 !important;
  background: rgba(95,163,209,.12) !important;
  border-color: rgba(95,163,209,.38) !important;
  box-shadow: 0 0 16px rgba(95,163,209,.22) !important;
}
.fsv-btn-active-bc::after {
  content: '';
  position: absolute;
  inset-inline-end: -1px;
  top: 22%;
  bottom: 22%;
  width: 2px;
  background: #5fa3d1;
  border-radius: 2px 0 0 2px;
  box-shadow: 0 0 6px rgba(95,163,209,.5);
}

/* ── Tooltip ────────────────────────────────────────────────────────────── */
.fsv-tip {
  position: absolute;
  inset-inline-end: calc(100% + 9px);
  top: 50%;
  transform: translateY(-50%);
  background: #1a1f2b;
  border: 1px solid rgba(120,140,170,.18);
  border-radius: 6px;
  padding: 5px 10px;
  font-family: var(--ar, sans-serif);
  font-size: 11.5px;
  font-weight: 500;
  color: #c5cad4;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) translateX(4px);
  transition: opacity .18s, transform .18s;
  z-index: 20;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
/* RTL: tooltip appears on the left */
.fnrp-rtl .fsv-tip {
  inset-inline-end: auto;
  inset-inline-start: calc(100% + 9px);
  transform: translateY(-50%) translateX(-4px);
}
.fsv-btn:hover .fsv-tip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.fnrp-rtl .fsv-btn:hover .fsv-tip {
  transform: translateY(-50%) translateX(0);
}
/* Tooltip arrow */
.fsv-tip::before {
  content: '';
  position: absolute;
  inset-inline-end: -5px;
  top: 50%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-inline-start-color: rgba(120,140,170,.18);
}
.fnrp-rtl .fsv-tip::before {
  inset-inline-end: auto;
  inset-inline-start: -5px;
  border-inline-start-color: transparent;
  border-inline-end-color: rgba(120,140,170,.18);
}

/* ── Attention pulse ring (fires once on load) ──────────────────────────── */
.fsv-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 13px;
  border: 1.5px solid rgba(77,212,172,.5);
  animation: fsv-pulse-anim 1.4s ease-out 3;
  pointer-events: none;
}
.fsv-btn-steel .fsv-pulse {
  border-color: rgba(95,163,209,.5);
}
@keyframes fsv-pulse-anim {
  0%   { opacity: .8; transform: scale(1); }
  60%  { opacity: 0;  transform: scale(1.5); }
  100% { opacity: 0;  transform: scale(1.5); }
}

/* ── Panel overlay ──────────────────────────────────────────────────────── */
#fsv-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7,9,16,.78);
  backdrop-filter: blur(12px) saturate(110%);
  -webkit-backdrop-filter: blur(12px) saturate(110%);
  z-index: 99990;
  opacity: 0;
  pointer-events: none;
  transition: opacity .30s cubic-bezier(.22,.61,.36,1);
}
#fsv-overlay.fsv-open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Slide-in sheet ─────────────────────────────────────────────────────── */
#fsv-sheet {
  position: fixed;
  top: 0;
  inset-inline-end: 44px;
  width: min(460px, 94vw);
  height: 100vh;
  background: #0f1320;
  border-inline-start: 1px solid rgba(120,140,170,.13);
  box-shadow: -16px 0 48px -8px rgba(0,0,0,.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(calc(100% + 44px));
  transition: transform .46s cubic-bezier(.16,1,.3,1);
  will-change: transform;
  z-index: 99991;
}
[dir="rtl"] #fsv-sheet, .fnrp-rtl #fsv-sheet {
  inset-inline-end: auto;
  inset-inline-start: 44px;
  transform: translateX(calc(-100% - 44px));
  box-shadow: 16px 0 48px -8px rgba(0,0,0,.6);
}
#fsv-overlay.fsv-open #fsv-sheet {
  transform: translateX(0);
}
[data-fnrp-theme="light"] #fsv-sheet {
  background: #f6f8fb;
  border-color: rgba(0,0,0,.10);
}

/* Close button */
#fsv-close {
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(120,140,170,.08);
  border: 1px solid rgba(120,140,170,.14);
  color: rgba(140,155,175,.6);
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
  transition: background .2s, color .2s, transform .2s;
}
#fsv-close:hover {
  background: rgba(120,140,170,.18);
  color: #e3e9f2;
  transform: rotate(90deg);
}
#fsv-close svg { stroke: currentColor; fill: none; }

/* Panel body — scrollable */
#fsv-panel-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 56px 28px 40px;
  scrollbar-width: thin;
  scrollbar-color: rgba(120,140,170,.14) transparent;
}
#fsv-panel-body::-webkit-scrollbar { width: 4px; }
#fsv-panel-body::-webkit-scrollbar-thumb { background: rgba(120,140,170,.14); border-radius: 2px; }

/* Stagger entrance animation for panel children */
#fsv-panel-body > * {
  opacity: 0;
  transform: translateY(10px);
  animation: fsv-in .4s cubic-bezier(.16,1,.3,1) forwards;
}
#fsv-panel-body > *:nth-child(1)  { animation-delay: .07s; }
#fsv-panel-body > *:nth-child(2)  { animation-delay: .12s; }
#fsv-panel-body > *:nth-child(3)  { animation-delay: .17s; }
#fsv-panel-body > *:nth-child(4)  { animation-delay: .22s; }
#fsv-panel-body > *:nth-child(5)  { animation-delay: .27s; }
#fsv-panel-body > *:nth-child(6)  { animation-delay: .32s; }
#fsv-panel-body > *:nth-child(7)  { animation-delay: .37s; }
#fsv-panel-body > *:nth-child(8)  { animation-delay: .42s; }
#fsv-panel-body > *:nth-child(9)  { animation-delay: .47s; }
#fsv-panel-body > *:nth-child(10) { animation-delay: .52s; }
@keyframes fsv-in {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Panel atoms ────────────────────────────────────────────────────────── */
.fsv-ey {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.fsv-ey::before { content: ''; width: 16px; height: 1px; background: currentColor; display: block; }
.fsv-ey-jade  { color: #4dd4ac; }
.fsv-ey-steel { color: #5fa3d1; }

.fsv-h1 {
  font-size: clamp(22px,3.2vw,30px);
  font-weight: 600;
  line-height: 1.16;
  color: #e7e9ec;
  letter-spacing: -.3px;
  margin-bottom: 10px;
}
.fsv-h1-steel .fsv-h1 { color: #c8dae8; }
.fsv-h1-jade  { color: #4dd4ac; }

.fsv-accent-line {
  font-size: 13.5px;
  font-weight: 600;
  color: #4dd4ac;
  margin-bottom: 12px;
}
.fsv-lead {
  font-size: 13.5px;
  line-height: 1.72;
  color: #7a818e;
  margin-bottom: 20px;
}

/* ── VerifiedBrands status badge ────────────────────────────────────────── */
.fsv-vb-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: #f5b85f;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(245,184,95,.08);
  border: 1px solid rgba(245,184,95,.24);
  margin-bottom: 18px;
}
.fsv-vb-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f5b85f;
  animation: fsv-dot 2s ease-in-out infinite;
}
@keyframes fsv-dot { 0%,100%{opacity:1} 50%{opacity:.28} }

/* ── Blurred broker grid ────────────────────────────────────────────────── */
.fsv-broker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 16px 0 14px;
}
.fsv-broker-card {
  aspect-ratio: 1.5/1;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(120,140,170,.09);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color .22s, transform .22s, box-shadow .22s;
}
.fsv-broker-card:hover {
  border-color: rgba(77,212,172,.28);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
.fsv-broker-card:hover .fsv-broker-blur { transform: scale(1.1); }
.fsv-broker-blur {
  width: 60%;
  height: 100%;
  max-height: 20px;
  background: linear-gradient(110deg,rgba(130,148,170,.28),rgba(170,185,200,.32),rgba(130,148,170,.22));
  filter: blur(10px);
  border-radius: 4px;
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.fsv-broker-card:nth-child(2n) .fsv-broker-blur { max-height:14px; width:72%; }
.fsv-broker-card:nth-child(3n) .fsv-broker-blur { max-height:26px; width:46%; border-radius:50%; }
.fsv-broker-lock {
  position: absolute;
  top: 5px;
  inset-inline-end: 5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(8,11,18,.58);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(120,140,170,.13);
  display: grid;
  place-items: center;
  color: rgba(120,140,170,.45);
}
.fsv-broker-lbl {
  position: absolute;
  bottom: 4px;
  inset-inline-start: 5px;
  font-family: var(--mono, monospace);
  font-size: 9px; /* v11.22.3 (BUG-16) — was 7px, below readable floor */
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(120,140,170,.38);
  background: rgba(8,11,18,.5);
  backdrop-filter: blur(4px);
  padding: 1px 4px;
  border-radius: 3px;
}

/* Notify form */
.fsv-notify-row { display: flex; gap: 8px; }
.fsv-notify-inp {
  flex: 1;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(120,140,170,.17);
  border-radius: 8px;
  padding: 9px 11px;
  color: #e7e9ec;
  font-size: 13px;
  outline: none;
  transition: border-color .2s, background .2s;
  font-family: inherit;
}
.fsv-notify-inp:focus { border-color: rgba(77,212,172,.4); background: rgba(77,212,172,.04); }
.fsv-notify-inp::placeholder { color: rgba(120,140,170,.3); }
.fsv-notify-btn {
  padding: 9px 14px;
  border-radius: 8px;
  background: #4dd4ac;
  color: #052418;
  font-size: 12.5px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background .2s, box-shadow .2s, transform .16s;
  white-space: nowrap;
  font-family: inherit;
}
.fsv-notify-btn:hover { background: #64e0bc; box-shadow: 0 0 16px rgba(77,212,172,.28); transform: translateY(-1px); }

/* lnk button */
.fsv-lnk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #4dd4ac;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity .2s;
  margin-bottom: 2px;
}
.fsv-lnk:hover { opacity: .7; }

/* OK inline */
.fsv-ok { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #4dd4ac; padding: 8px 0; }
.fsv-ok-ring {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(77,212,172,.10);
  border: 1.5px solid rgba(77,212,172,.35);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  animation: fsv-pop .45s cubic-bezier(.16,1,.3,1) both;
}
.fsv-ok-ring svg { stroke: #4dd4ac; fill: none; }
.fsv-ok-ring-lg {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(77,212,172,.10);
  border: 1.5px solid rgba(77,212,172,.3);
  display: grid; place-items: center;
  animation: fsv-pop .45s cubic-bezier(.16,1,.3,1) both;
}
@keyframes fsv-pop { 0%{transform:scale(.4);opacity:0} 70%{transform:scale(1.1);opacity:1} 100%{transform:scale(1);opacity:1} }

/* Criteria grid */
.fsv-crit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.fsv-crit {
  padding: 11px 13px;
  background: rgba(255,255,255,.022);
  border: 1px solid rgba(120,140,170,.08);
  border-radius: 8px;
  transition: border-color .22s, color .22s;
}
.fsv-crit:hover { border-color: rgba(77,212,172,.22); }
.fsv-crit-t { font-size: 11.5px; font-weight: 600; color: #c5cad4; margin-bottom: 3px; }
.fsv-crit-d { font-size: 11px; color: #666d7a; line-height: 1.45; }

/* Complaint quote strip */
.fsv-quote {
  padding: 12px 15px;
  border-inline-start: 2px solid #5fa3d1;
  background: rgba(95,163,209,.06);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  color: #8aabb8;
  line-height: 1.65;
  margin-bottom: 22px;
  font-style: italic;
}

/* Progress bar */
.fsv-progress { display: flex; gap: 5px; margin-bottom: 20px; }
.fsv-seg      { flex:1; height:2px; border-radius:2px; background:rgba(120,140,170,.13); }
.fsv-seg-done { flex:1; height:2px; border-radius:2px; background:#5fa3d1; }
.fsv-seg-cur  { flex:1; height:2px; border-radius:2px; background:linear-gradient(90deg,#5fa3d1 55%,rgba(120,140,170,.13) 55%); }

/* Step label */
.fsv-step-lbl {
  font-family: var(--mono, monospace);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #5fa3d1;
  margin-bottom: 18px;
}

/* Form fields */
.fsv-form { display: flex; flex-direction: column; gap: 14px; }
.fsv-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fsv-field { display: flex; flex-direction: column; gap: 6px; }
.fsv-lbl { font-size: 11.5px; font-weight: 500; color: #7a818e; }
.fsv-inp {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(120,140,170,.15);
  border-radius: 8px;
  padding: 10px 12px;
  color: #e7e9ec;
  font-size: 13px;
  outline: none;
  width: 100%;
  transition: border-color .2s, background .2s, box-shadow .2s;
  font-family: inherit;
}
.fsv-inp:focus {
  border-color: rgba(95,163,209,.44);
  background: rgba(95,163,209,.04);
  box-shadow: 0 0 0 3px rgba(95,163,209,.09);
}
.fsv-inp-jade:focus {
  border-color: rgba(77,212,172,.44);
  background: rgba(77,212,172,.04);
  box-shadow: 0 0 0 3px rgba(77,212,172,.09);
}
.fsv-inp::placeholder { color: rgba(120,140,170,.3); }
select.fsv-inp { cursor: pointer; }
select.fsv-inp option { background: #0f1320; color: #e7e9ec; }
.fsv-ta { resize: vertical; min-height: 82px; line-height: 1.6; }
[data-fnrp-theme="light"] .fsv-inp { background: #f0f2f5; border-color: rgba(0,0,0,.14); color: #1a1f29; }
[data-fnrp-theme="light"] select.fsv-inp option { background: #fff; color: #1a1f29; }

.fsv-privacy {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 11px; color: rgba(120,140,170,.4); line-height: 1.5;
}
.fsv-privacy svg { flex-shrink:0; margin-top:1px; stroke:currentColor; fill:none; }
.fsv-divider { height:1px; background:rgba(120,140,170,.09); margin:2px 0; }

/* Buttons */
.fsv-submit {
  width: 100%;
  padding: 12px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all .22s;
  font-family: inherit;
}
.fsv-submit-steel { background: #5fa3d1; color: #03121e; }
.fsv-submit-steel:hover { background: #74b5de; box-shadow: 0 0 18px rgba(95,163,209,.3); transform: translateY(-1px); }
.fsv-submit-jade  { background: #4dd4ac; color: #042416; }
.fsv-submit-jade:hover  { background: #64e0bc; box-shadow: 0 0 18px rgba(77,212,172,.3); transform: translateY(-1px); }

/* ── Academy path track ──────────────────────────────────────────────────── */
.fsv-track { display:flex; align-items:center; gap:0; margin:18px 0 22px; }
.fsv-tnode { display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; }
.fsv-tcircle {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono, monospace);
  font-size: 11px; font-weight: 600;
  border: 1.5px solid currentColor;
  background: rgba(255,255,255,.025);
}
.fsv-c1 { color: #4dd4ac; }
.fsv-c2 { color: #5fa3d1; }
.fsv-c3 { color: #f5b85f; }
.fsv-tlbl { font-size: 10.5px; color: #6b7280; white-space: nowrap; }
.fsv-tline { flex:1; height:1.5px; opacity:.3; margin:0 3px; margin-bottom:22px; }
.fsv-tline-1 { background:linear-gradient(90deg,#4dd4ac,#5fa3d1); }
.fsv-tline-2 { background:linear-gradient(90deg,#5fa3d1,#f5b85f); }

/* Benefits */
.fsv-bens { display:flex; flex-direction:column; gap:9px; padding:13px 15px; background:rgba(77,212,172,.04); border:1px solid rgba(77,212,172,.13); border-radius:9px; margin-bottom:4px; }
.fsv-ben { display:flex; align-items:center; gap:10px; font-size:12.5px; color:#8aaa94; line-height:1.4; }
.fsv-ben-dot { width:5px; height:5px; border-radius:50%; background:rgba(77,212,172,.5); flex-shrink:0; }
.fsv-nofee { font-family:var(--mono,monospace); font-size:10.5px; letter-spacing:.5px; color:rgba(120,140,170,.32); text-align:center; padding:4px 0 2px; }

/* ── Success ─────────────────────────────────────────────────────────────── */
.fsv-success { display:flex; flex-direction:column; align-items:center; text-align:center; padding:52px 24px 36px; gap:12px; }
.fsv-ok-title { font-size:19px; font-weight:600; color:#e7e9ec; }
.fsv-ok-body  { font-size:13.5px; color:#7a818e; line-height:1.65; max-width:300px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  #fnrp-body { grid-template-columns: 1fr 320px 44px !important; }
  #fsv-sheet { inset-inline-end: 0; }
  [dir="rtl"] #fsv-sheet, .fnrp-rtl #fsv-sheet { inset-inline-start: 0; }
}
@media (max-width: 920px) {
  #fnrp-body { grid-template-columns: 1fr 44px !important; }
  /* hide sidebar on mid-size, keep rail */
}
@media (max-width: 760px) {
  #fnrp-body { grid-template-columns: 1fr 44px !important; }
  #fsv-sheet { width: 100vw; }
}
@media (max-width: 560px) {
  #fsv-rail { display: none; }
  #fnrp-body { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  #fsv-panel-body { padding: 50px 18px 32px; }
  .fsv-row2 { grid-template-columns: 1fr; }
  .fsv-crit-grid { grid-template-columns: 1fr; }
  .fsv-broker-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v11.18.1 — WATCHLIST REDESIGN + RAIL PERIODIC GLOW
   ─────────────────────────────────────────────────────────────────────────
   Fixes:
   1. Watchlist rows: more breathing room, cleaner hierarchy
   2. Tab strip: lighter, more spacious, clearer active state
   3. Badge: better sizing, richer color
   4. Rail icons: periodic ambient pulse every ~8s (restful, not frantic)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Watchlist card frame — add a touch of depth ──────────────────────── */
#fs-pairs.fs-card {
  background: #111520 !important;
  border-color: rgba(120,140,170,.12) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
[data-fnrp-theme="light"] #fs-pairs.fs-card {
  background: #ffffff !important;
}

/* Card header */
#fs-pairs .fs-card-hd {
  padding: 14px 16px 12px !important;
  border-bottom: 1px solid rgba(120,140,170,.07) !important;
}
#fs-pairs .fs-card-title {
  font-size: 11px !important;
  letter-spacing: .22em !important;
  color: #9aa3b2 !important;
}

/* ── Tab strip — breathing room + clean icons ─────────────────────────── */
.fnrp-w2-tabs {
  background: #111520 !important;
  border-bottom: 1px solid rgba(120,140,170,.08) !important;
  padding: 0 8px !important;
  gap: 2px !important;
}
[data-fnrp-theme="light"] .fnrp-w2-tabs { background: #ffffff !important; }

.fnrp-w2-tab,
.fnrp-w2-tab--icon {
  padding: 11px 10px 10px !important;
  border-radius: 0 !important;
  border-bottom: 2px solid transparent !important;
  color: rgba(120,140,170,.42) !important;
  transition: color .18s, border-color .18s, background .18s !important;
}
.fnrp-w2-tab:hover,
.fnrp-w2-tab--icon:hover {
  color: rgba(160,175,195,.75) !important;
  background: rgba(120,140,170,.05) !important;
}
.fnrp-w2-tab.is-active,
.fnrp-w2-tab--icon.is-active {
  color: #4dd4ac !important;
  border-bottom-color: #4dd4ac !important;
  background: rgba(77,212,172,.05) !important;
}
.fnrp-w2-tab-iconwrap svg {
  width: 15px !important;
  height: 15px !important;
  stroke: currentColor !important;
}
/* Active dot under icon tab */
.fnrp-w2-tab-dot {
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  display: block !important;
  margin: 3px auto 0 !important;
  opacity: .6 !important;
}

/* ── Row list ─────────────────────────────────────────────────────────── */
.fnrp-w2-list {
  background: #111520 !important;
  padding: 4px 0 6px !important;
}
[data-fnrp-theme="light"] .fnrp-w2-list { background: #ffffff !important; }

/* ── Individual row — the heart of the redesign ──────────────────────── */
.fnrp-w2-row {
  grid-template-columns: 32px 1fr auto !important;
  padding: 11px 14px 11px 12px !important;
  min-height: 58px !important;
  column-gap: 12px !important;
  border-bottom: 1px solid rgba(120,140,170,.055) !important;
  transition: background .15s !important;
}
.fnrp-w2-row:last-of-type { border-bottom: none !important; }

.fnrp-w2-row:hover {
  background: rgba(77,212,172,.04) !important;
}
[data-fnrp-theme="light"] .fnrp-w2-row:hover {
  background: rgba(77,212,172,.07) !important;
}

.fnrp-w2-row.is-active {
  background: rgba(77,212,172,.07) !important;
}
.fnrp-w2-row.is-active::before {
  width: 2px !important;
  top: 10px !important;
  bottom: 10px !important;
  background: #4dd4ac !important;
  box-shadow: 0 0 6px rgba(77,212,172,.4) !important;
}

/* ── Badge (letter circle) — bigger, colored by category ─────────────── */
.fnrp-w2-row-badge {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  background: rgba(77,212,172,.08) !important;
  border: 1px solid rgba(77,212,172,.22) !important;
  color: #4dd4ac !important;
  display: grid !important;
  place-items: center !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  font-family: var(--mono, monospace) !important;
}

/* ── Code (symbol) ─────────────────────────────────────────────────────── */
.fnrp-w2-row-code {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  color: #dde3ee !important;
  line-height: 1.25 !important;
}

/* ── Label (full name) ────────────────────────────────────────────────── */
.fnrp-w2-row-label {
  font-size: 11px !important;
  color: rgba(120,140,170,.5) !important;
  line-height: 1.3 !important;
  margin-top: 1px !important;
}

/* ── Price ────────────────────────────────────────────────────────────── */
.fnrp-w2-row-price {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #dde3ee !important;
  line-height: 1.25 !important;
  letter-spacing: .01em !important;
}

/* ── Change pill ──────────────────────────────────────────────────────── */
.fnrp-w2-row-chg {
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
  border-radius: 5px !important;
  min-width: 52px !important;
  text-align: center !important;
  letter-spacing: .02em !important;
}
.fnrp-w2-row-chg.is-up {
  color: #22c993 !important;
  background: rgba(34,201,147,.11) !important;
}
.fnrp-w2-row-chg.is-down {
  color: #f06868 !important;
  background: rgba(240,104,104,.11) !important;
}
.fnrp-w2-row-chg.is-flat {
  color: rgba(120,140,170,.4) !important;
  background: transparent !important;
}

/* ── Right column spacing ─────────────────────────────────────────────── */
.fnrp-w2-row-r {
  gap: 5px !important;
}

/* ── Price flash animation — more visible ─────────────────────────────── */
@keyframes fnrp-w2-flash-up {
  0%   { background: rgba(34,201,147,.25); }
  100% { background: transparent; }
}
@keyframes fnrp-w2-flash-down {
  0%   { background: rgba(240,104,104,.25); }
  100% { background: transparent; }
}

/* ── "Show more" button ───────────────────────────────────────────────── */
.fnrp-w2-more {
  font-size: 11.5px !important;
  color: rgba(77,212,172,.6) !important;
  padding: 10px 14px !important;
  border-top: 1px solid rgba(120,140,170,.07) !important;
}
.fnrp-w2-more:hover { color: #4dd4ac !important; }

/* ── Roman numeral / sparkline badge ──────────────────────────────────── */
.fnrp-w2-row-roman {
  font-size: 13px !important;
  color: rgba(120,140,170,.35) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RAIL — Periodic ambient glow (replaces one-shot pulse)
   Fires every 8 seconds per button, staggered.
   Three pulses in quick succession then 5s rest — like breathing.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Remove the old one-shot pulse */
.fsv-pulse { display: none !important; }

/* New ambient glow on the button itself */
@keyframes fsv-ambient-jade {
  0%, 100%      { box-shadow: none; border-color: rgba(120,140,170,.10); }
  10%, 30%      { box-shadow: 0 0 0 4px rgba(77,212,172,.12), 0 0 14px rgba(77,212,172,.15); border-color: rgba(77,212,172,.35); }
  20%           { box-shadow: 0 0 0 6px rgba(77,212,172,.08), 0 0 20px rgba(77,212,172,.20); border-color: rgba(77,212,172,.40); }
  40%           { box-shadow: none; border-color: rgba(120,140,170,.10); }
}
@keyframes fsv-ambient-steel {
  0%, 100%      { box-shadow: none; border-color: rgba(120,140,170,.10); }
  10%, 30%      { box-shadow: 0 0 0 4px rgba(95,163,209,.12), 0 0 14px rgba(95,163,209,.15); border-color: rgba(95,163,209,.35); }
  20%           { box-shadow: 0 0 0 6px rgba(95,163,209,.08), 0 0 20px rgba(95,163,209,.20); border-color: rgba(95,163,209,.40); }
  40%           { box-shadow: none; border-color: rgba(120,140,170,.10); }
}

/* Apply to jade buttons — staggered delays */
#fsv-btn-verified {
  animation: fsv-ambient-jade 9s ease-in-out infinite;
  animation-delay: 3s;
}
#fsv-btn-academy {
  animation: fsv-ambient-jade 9s ease-in-out infinite;
  animation-delay: 6s;
}
#fsv-btn-complaint {
  animation: fsv-ambient-steel 9s ease-in-out infinite;
  animation-delay: 4.5s;
}

/* When panel is open — keep active state, pause ambient animation */
.fsv-btn-active,
.fsv-btn-active-bc {
  animation: none !important;
}

/* Light theme adjustments */
[data-fnrp-theme="light"] .fnrp-w2-row-badge {
  background: rgba(77,212,172,.10) !important;
  border-color: rgba(77,212,172,.30) !important;
  color: #1a9e7c !important;
}
[data-fnrp-theme="light"] .fnrp-w2-row-code,
[data-fnrp-theme="light"] .fnrp-w2-row-price { color: #1a1f29 !important; }
[data-fnrp-theme="light"] .fnrp-w2-row-label { color: rgba(80,90,110,.55) !important; }
[data-fnrp-theme="light"] .fnrp-w2-row-chg.is-up   { color: #0e8a5c !important; background: rgba(14,138,92,.10) !important; }
[data-fnrp-theme="light"] .fnrp-w2-row-chg.is-down  { color: #c03030 !important; background: rgba(192,48,48,.10) !important; }
[data-fnrp-theme="light"] #fs-pairs.fs-card { background: #ffffff !important; border-color: rgba(0,0,0,.10) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   v11.18.2 — WATCHLIST COMPLETE REDESIGN (FINAL)
   
   الفلسفة: Bloomberg Terminal meets calm reading room.
   – كل row يأخذ مساحته الطبيعية، لا شيء مضغوط
   – الـ sparkline في خانتها المستقلة، لا تتداخل مع أي نص
   – الـ tabs: أيقونات فقط، نظيفة، بدون filled background
   – تراتبية بصرية واضحة: Symbol → Name → (spark) → Price → %
   – ألوان محدودة: text/muted/up/down فقط
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CARD CONTAINER ─────────────────────────────────────────────────────── */
#fs-pairs.fs-card {
  background: #0d1017 !important;
  border: 1px solid rgba(120,140,170,.11) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 20px rgba(0,0,0,.35) !important;
}
[data-fnrp-theme="light"] #fs-pairs.fs-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.09) !important;
}

/* ── CARD HEADER ────────────────────────────────────────────────────────── */
#fs-pairs .fs-card-hd {
  padding: 14px 16px 12px !important;
  border-bottom: 1px solid rgba(120,140,170,.07) !important;
}

/* ── TAB STRIP — clean icon tabs, no filled background ever ─────────────── */
.fnrp-w2-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  padding: 0 6px !important;
  gap: 0 !important;
  background: #0d1017 !important;
  border-bottom: 1px solid rgba(120,140,170,.07) !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
[data-fnrp-theme="light"] .fnrp-w2-tabs { background: #fff !important; }
.fnrp-w2-tabs::-webkit-scrollbar { display: none !important; }

.fnrp-w2-tab,
.fnrp-w2-tab--icon {
  flex: 0 0 auto !important;
  padding: 10px 11px 9px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: rgba(120,140,170,.38) !important;
  cursor: pointer !important;
  transition: color .15s, border-color .15s !important;
  position: relative !important;
}
.fnrp-w2-tab:hover,
.fnrp-w2-tab--icon:hover {
  background: transparent !important;
  color: rgba(160,175,195,.65) !important;
}
.fnrp-w2-tab.is-active,
.fnrp-w2-tab--icon.is-active {
  color: #4dd4ac !important;
  background: transparent !important;
  border-bottom: 2px solid #4dd4ac !important;
  border-radius: 0 !important;
}
.fnrp-w2-tab-iconwrap {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.fnrp-w2-tab-iconwrap svg {
  width: 14px !important;
  height: 14px !important;
  stroke: currentColor !important;
  fill: none !important;
}
/* kill the tiny dot below active icon tab */
.fnrp-w2-tab-dot { display: none !important; }

/* ── ROW LIST CONTAINER ─────────────────────────────────────────────────── */
.fnrp-w2-col-rows,
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col-rows {
  display: block !important;
  padding: 0 !important;
  background: #0d1017 !important;
}
[data-fnrp-theme="light"] .fnrp-w2-col-rows,
[data-fnrp-theme="light"] #fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col-rows {
  background: #fff !important;
}

/* ── THE ROW — grid layout: [left] [spark] [right] ─────────────────────── */
/*
   Grid design:
   - Left  (ticker+name):  flex fill, min-width 0
   - Spark (mini chart):   fixed 56px, never grows/shrinks
   - Right (price+%):      fixed-width, right-aligned
   
   This guarantees the sparkline NEVER overlaps text.
*/
.fnrp-mkt-row {
  display: block !important;
  position: relative !important;
  border-bottom: 1px solid rgba(255,255,255,.038) !important;
  transition: background .14s !important;
}
[data-fnrp-theme="light"] .fnrp-mkt-row {
  border-bottom-color: rgba(0,0,0,.05) !important;
}
.fnrp-mkt-row:last-child { border-bottom: none !important; }

.fnrp-mkt-row-main {
  display: grid !important;
  grid-template-columns: 1fr 56px 88px !important;
  align-items: center !important;
  gap: 0 10px !important;
  padding: 12px 16px 12px 14px !important;
  min-height: 60px !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: background .14s !important;
}
.fnrp-mkt-row-main:hover {
  background: rgba(77,212,172,.04) !important;
}
[data-fnrp-theme="light"] .fnrp-mkt-row-main:hover {
  background: rgba(77,212,172,.06) !important;
}
.fnrp-mkt-row.is-expanded .fnrp-mkt-row-main,
.fnrp-mkt-row.is-active   .fnrp-mkt-row-main {
  background: rgba(77,212,172,.06) !important;
}
.fnrp-mkt-row.is-active::before {
  content: '' !important;
  position: absolute !important;
  inset-inline-start: 0 !important;
  top: 10px !important;
  bottom: 10px !important;
  width: 2px !important;
  background: #4dd4ac !important;
  border-radius: 0 2px 2px 0 !important;
  box-shadow: 0 0 8px rgba(77,212,172,.4) !important;
}

/* ── LEFT column: symbol + name ─────────────────────────────────────────── */
.fnrp-mkt-row-l {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.fnrp-mkt-row-code {
  font-family: var(--mono, 'JetBrains Mono', monospace) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: .025em !important;
  color: #dce2ee !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  direction: ltr !important;
}
.fnrp-mkt-row-name {
  font-family: var(--sans, 'Inter', sans-serif) !important;
  font-size: 11px !important;
  color: rgba(120,140,170,.48) !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ── SPARKLINE column — isolated, fixed width ────────────────────────────── */
.fnrp-mkt-row-spark {
  flex: none !important;
  width: 56px !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: .7 !important;
  transition: opacity .18s !important;
}
.fnrp-mkt-row-main:hover .fnrp-mkt-row-spark { opacity: 1 !important; }
.fnrp-mkt-row-spark svg {
  width: 56px !important;
  height: 22px !important;
  display: block !important;
  overflow: visible !important;
}

/* ── RIGHT column: price + change ─────────────────────────────────────────── */
.fnrp-mkt-row-r {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 4px !important;
  min-width: 0 !important;
}
.fnrp-mkt-row-price {
  font-family: var(--mono, monospace) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #dce2ee !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: .01em !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  direction: ltr !important;
}
.fnrp-mkt-row-chg {
  font-family: var(--mono, monospace) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  direction: ltr !important;
  text-align: center !important;
  min-width: 50px !important;
}
.fnrp-mkt-row-chg.is-up {
  color: #22c993 !important;
  background: rgba(34,201,147,.10) !important;
}
.fnrp-mkt-row-chg.is-down {
  color: #f07070 !important;
  background: rgba(240,112,112,.10) !important;
}
.fnrp-mkt-row-chg.is-flat {
  color: rgba(120,140,170,.38) !important;
  background: transparent !important;
}

/* ── EXPANDED detail panel ──────────────────────────────────────────────── */
.fnrp-mkt-row-detail {
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transition: max-height .32s cubic-bezier(.16,1,.3,1), opacity .22s !important;
}
.fnrp-mkt-row.is-expanded .fnrp-mkt-row-detail {
  max-height: 300px !important;
  opacity: 1 !important;
}

/* ── SHOW MORE button ───────────────────────────────────────────────────── */
.fnrp-w2-col-more,
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col-more {
  display: block !important;
  width: 100% !important;
  padding: 10px 16px !important;
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(120,140,170,.07) !important;
  color: rgba(77,212,172,.55) !important;
  font-family: var(--sans, sans-serif) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  text-align: start !important;
  cursor: pointer !important;
  transition: color .15s !important;
}
.fnrp-w2-col-more:hover,
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col-more:hover {
  color: #4dd4ac !important;
  background: transparent !important;
}

/* ── Light theme row adjustments ────────────────────────────────────────── */
[data-fnrp-theme="light"] .fnrp-mkt-row-code  { color: #1a1f2e !important; }
[data-fnrp-theme="light"] .fnrp-mkt-row-name  { color: rgba(80,90,110,.52) !important; }
[data-fnrp-theme="light"] .fnrp-mkt-row-price { color: #1a1f2e !important; }
[data-fnrp-theme="light"] .fnrp-mkt-row-chg.is-up   { color: #0e8a5c !important; background: rgba(14,138,92,.09) !important; }
[data-fnrp-theme="light"] .fnrp-mkt-row-chg.is-down { color: #c03030 !important; background: rgba(192,48,48,.09) !important; }

/* ── Kill all old conflicting overrides from v11.18.0/18.1 for mkt-rows ── */
/* (these selectors existed in earlier patches and may conflict) */
.fnrp-w2-row-badge { display: none !important; } /* only used in old w2-row, not mkt-row */

/* ═══════════════════════════════════════════════════════════════════════════
   v11.18.3 — WATCHLIST "TERMINAL TILES" REDESIGN
   
   الفلسفة التصميمية:
   كل رمز tile مستقلة بمساحتها الخاصة. الـ sparkline كخلفية شفافة لا
   تتداخل مع نص. المستخدم يرى شكل الحركة + السعر + الـ % دفعة واحدة.
   راحة نفسية من خلال: مسافات سخية + تراتبية بصرية واضحة + ألوان محدودة.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── بطاقة الـ watchlist ─────────────────────────────────────────────────── */
#fs-pairs.fs-card {
  background: #0b0e16 !important;
  border: 1px solid rgba(120,140,170,.10) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 28px rgba(0,0,0,.4) !important;
}
[data-fnrp-theme="light"] #fs-pairs.fs-card {
  background: #f4f6f9 !important;
  border-color: rgba(0,0,0,.08) !important;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
#fs-pairs .fs-card-hd {
  padding: 14px 16px 12px !important;
  background: #0b0e16 !important;
  border-bottom: 1px solid rgba(120,140,170,.07) !important;
}
[data-fnrp-theme="light"] #fs-pairs .fs-card-hd { background: #f4f6f9 !important; }
#fs-pairs .fs-card-title {
  font-size: 10.5px !important;
  letter-spacing: .24em !important;
  color: rgba(160,175,200,.55) !important;
}

/* ── Tab strip ───────────────────────────────────────────────────────────── */
.fnrp-w2-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  padding: 0 8px !important;
  gap: 0 !important;
  background: #0b0e16 !important;
  border-bottom: 1px solid rgba(120,140,170,.07) !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
[data-fnrp-theme="light"] .fnrp-w2-tabs { background: #f4f6f9 !important; }
.fnrp-w2-tabs::-webkit-scrollbar { display: none !important; }

.fnrp-w2-tab,
.fnrp-w2-tab--icon {
  flex: 0 0 auto !important;
  padding: 9px 10px 8px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  color: rgba(120,140,170,.35) !important;
  cursor: pointer !important;
  transition: color .15s, border-color .15s !important;
}
.fnrp-w2-tab:hover, .fnrp-w2-tab--icon:hover {
  color: rgba(160,175,200,.6) !important;
  background: transparent !important;
}
.fnrp-w2-tab.is-active, .fnrp-w2-tab--icon.is-active {
  color: #4dd4ac !important;
  background: transparent !important;
  border-bottom: 2px solid #4dd4ac !important;
}
.fnrp-w2-tab-iconwrap svg { width: 14px !important; height: 14px !important; }
.fnrp-w2-tab-dot { display: none !important; }

/* ── Tile grid container ─────────────────────────────────────────────────── */
.fnrp-w2-col-rows,
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col-rows {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1px !important;
  padding: 0 !important;
  background: rgba(120,140,170,.08) !important; /* gap color via parent bg */
}
[data-fnrp-theme="light"] .fnrp-w2-col-rows,
[data-fnrp-theme="light"] #fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col-rows {
  background: rgba(0,0,0,.06) !important;
}

/* Expanded tile — spans full width */
.fnrp-tile.is-expanded {
  grid-column: 1 / -1 !important;
}

/* ── THE TILE ────────────────────────────────────────────────────────────── */
.fnrp-tile {
  position: relative !important;
  background: #0b0e16 !important;
  padding: 13px 14px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  cursor: pointer !important;
  overflow: hidden !important;
  min-height: 80px !important;
  transition: background .15s !important;
  border-inline-start: 2px solid transparent !important;
}
[data-fnrp-theme="light"] .fnrp-tile { background: #ffffff !important; }

/* Color accent on left border */
.fnrp-tile.fnrp-tile-up { border-inline-start-color: rgba(34,201,147,.45) !important; }
.fnrp-tile.fnrp-tile-dn { border-inline-start-color: rgba(240,112,112,.35) !important; }
.fnrp-tile.fnrp-tile-flat { border-inline-start-color: rgba(120,140,170,.18) !important; }

/* Hover state */
.fnrp-tile:hover {
  background: #0e1320 !important;
}
[data-fnrp-theme="light"] .fnrp-tile:hover { background: #f0f4ff !important; }

/* Active / selected */
.fnrp-tile.is-active,
.fnrp-tile.is-expanded {
  background: #101626 !important;
}
[data-fnrp-theme="light"] .fnrp-tile.is-active,
[data-fnrp-theme="light"] .fnrp-tile.is-expanded { background: #e8effe !important; }

/* ── Sparkline background SVG ────────────────────────────────────────────── */
.fnrp-tile-spark-bg {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.fnrp-tile-spark-bg svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  opacity: .55 !important;
  transition: opacity .2s !important;
}
.fnrp-tile:hover .fnrp-tile-spark-bg svg { opacity: .8 !important; }

/* All text sits above the background spark */
.fnrp-tile-top,
.fnrp-tile-sym,
.fnrp-tile-name,
.fnrp-tile-price,
.fnrp-tile-pill { position: relative !important; z-index: 1 !important; }

/* ── Top row: symbol + % pill ────────────────────────────────────────────── */
.fnrp-tile-top {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 4px !important;
}
.fnrp-tile-sym {
  font-family: var(--mono, 'JetBrains Mono', monospace) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  color: #dce4f0 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
[data-fnrp-theme="light"] .fnrp-tile-sym { color: #1a1f2e !important; }

/* ── % Change pill ───────────────────────────────────────────────────────── */
.fnrp-tile-pill {
  font-family: var(--mono, monospace) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  padding: 2px 6px !important;
  border-radius: 5px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  line-height: 1.4 !important;
}
.fnrp-tile-pill.fnrp-tile-up {
  color: #22c993 !important;
  background: rgba(34,201,147,.12) !important;
}
.fnrp-tile-pill.fnrp-tile-dn {
  color: #f07070 !important;
  background: rgba(240,112,112,.12) !important;
}
.fnrp-tile-pill.fnrp-tile-flat {
  color: rgba(120,140,170,.45) !important;
  background: rgba(120,140,170,.07) !important;
}

/* ── Asset name (full name) ──────────────────────────────────────────────── */
.fnrp-tile-name {
  font-family: var(--sans, sans-serif) !important;
  font-size: 10px !important;
  color: rgba(120,140,170,.42) !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ── Price — the dominant number ─────────────────────────────────────────── */
.fnrp-tile-price {
  font-family: var(--mono, monospace) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #dce4f0 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: .01em !important;
  line-height: 1.2 !important;
  margin-top: 6px !important;
  white-space: nowrap !important;
  direction: ltr !important;
}
[data-fnrp-theme="light"] .fnrp-tile-price { color: #1a1f2e !important; }

/* Price flash animations */
.fnrp-tile.flash-up   .fnrp-tile-price { animation: fnrp-tile-flash-up   .55s ease-out !important; }
.fnrp-tile.flash-down .fnrp-tile-price { animation: fnrp-tile-flash-down .55s ease-out !important; }
@keyframes fnrp-tile-flash-up   { 0%{color:#22c993} 100%{color:#dce4f0} }
@keyframes fnrp-tile-flash-down { 0%{color:#f07070} 100%{color:#dce4f0} }

/* ── Expanded detail panel ───────────────────────────────────────────────── */
.fnrp-tile .fnrp-mkt-row-detail {
  position: relative !important;
  z-index: 1 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transition: max-height .36s cubic-bezier(.16,1,.3,1), opacity .24s !important;
  margin-top: 0 !important;
}
.fnrp-tile.is-expanded .fnrp-mkt-row-detail {
  max-height: 320px !important;
  opacity: 1 !important;
  margin-top: 10px !important;
}

/* ── Show more button ────────────────────────────────────────────────────── */
.fnrp-w2-col-more,
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col-more {
  grid-column: 1 / -1 !important;
  display: block !important;
  width: 100% !important;
  padding: 10px 16px !important;
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(120,140,170,.07) !important;
  color: rgba(77,212,172,.5) !important;
  font-family: var(--sans, sans-serif) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: color .15s !important;
}
.fnrp-w2-col-more:hover,
#fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col-more:hover {
  color: #4dd4ac !important;
  background: transparent !important;
}

/* ── Price update: reuse V2 functions that look for data-pair ────────────── */
/* The updateRow calls look for .fnrp-mkt-row-price / .fnrp-mkt-row-chg.
   We bridge with matching class names on the tile. */
.fnrp-tile .fnrp-mkt-row-price { display: none !important; } /* hidden, tile-price is shown */
.fnrp-tile .fnrp-mkt-row-chg   { display: none !important; } /* hidden, tile-pill is shown  */

/* ── Responsive: on very narrow sidebar, collapse to 1 col ──────────────── */
@media (max-width: 300px) {
  .fnrp-w2-col-rows,
  #fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col-rows {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v11.18.4 — FIX: Detail panel height + Rail icons spacing
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Fix tile expanded detail panel — more height for chart+AI signal ── */
/* v11.22.5 (ROOT FIX) — was max-height:700px with a solid #0b0e16 background.
   That reserved a tall black rectangle; whenever the inner content (sparkline
   + OHLC + CTA) was shorter than 700px OR failed to render, the user saw a big
   empty black void covering the watchlist (the exact reported bug). We now let
   the panel size to its real content: max-height grows generously ONLY as an
   animation cap, but min-height is 0 and the visible height is driven by the
   content. The background is applied to the content, not a fixed-height shell,
   so there is never a black gap below the content. */
.fnrp-tile.is-expanded .fnrp-mkt-row-detail {
  max-height: 520px !important;
  height: auto !important;
  opacity: 1 !important;
  margin-top: 0 !important;
  border-top: 1px solid rgba(120,140,170,.07) !important;
  background: transparent !important;
}
.fnrp-tile.is-expanded .fnrp-mkt-row-detail > * {
  /* content fills naturally; no phantom height below it */
}
[data-fnrp-theme="light"] .fnrp-tile.is-expanded .fnrp-mkt-row-detail {
  background: transparent !important;
}

/* Detail panel inner padding */
.fnrp-tile .fnrp-mkt-spark        { padding: 8px 12px 4px !important; }
.fnrp-tile .fnrp-mkt-spark-summary { padding: 8px 12px !important; }
.fnrp-tile .fnrp-mkt-spark-pro     { padding: 0 12px 4px !important; }
.fnrp-tile .fnrp-mkt-spark-cta     { margin: 8px 12px 12px !important; }

/* ── 2. Fix Rail icons — the core problem was the grid squeezing them ────── */

/* The rail sits outside fn-body grid now — appended to fnrp-root directly.
   Position: fixed on the right side, vertically centred.
   This guarantees it NEVER gets squeezed by the watchlist or grid. */
#fsv-rail {
  position: fixed !important;
  top: 50% !important;
  inset-inline-end: 0 !important;
  transform: translateY(-50%) !important;
  width: 48px !important;
  min-width: 48px !important;
  height: auto !important;
  background: rgba(11,14,22,.92) !important;
  border: 1px solid rgba(120,140,170,.12) !important;
  border-inline-end: none !important;
  border-radius: 12px 0 0 12px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  padding: 10px 0 !important;
  gap: 2px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  z-index: 9000 !important;
  box-shadow: -4px 0 24px rgba(0,0,0,.3) !important;
}
[data-fnrp-theme="light"] #fsv-rail {
  background: rgba(248,250,253,.95) !important;
  border-color: rgba(0,0,0,.10) !important;
}

/* Rail button — clean, properly spaced */
.fsv-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  color: rgba(140,158,185,.4) !important;
  transition: color .2s, background .2s, border-color .2s, transform .16s !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  position: relative !important;
}
.fsv-btn-iw {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
}
.fsv-btn-iw svg {
  width: 15px !important;
  height: 15px !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 1.6 !important;
}
.fsv-btn:hover {
  color: rgba(200,215,230,.8) !important;
  background: rgba(120,140,170,.08) !important;
  border-color: rgba(120,140,170,.18) !important;
  transform: scale(1.08) !important;
}
.fsv-btn-jade:hover {
  color: #4dd4ac !important;
  background: rgba(77,212,172,.10) !important;
  border-color: rgba(77,212,172,.28) !important;
}
.fsv-btn-steel:hover {
  color: #5fa3d1 !important;
  background: rgba(95,163,209,.10) !important;
  border-color: rgba(95,163,209,.28) !important;
}

/* Rail divider */
.fsv-rail-div {
  width: 20px !important;
  height: 1px !important;
  background: rgba(120,140,170,.12) !important;
  margin: 5px 0 !important;
  flex-shrink: 0 !important;
}

/* Active states */
.fsv-btn-active {
  color: #4dd4ac !important;
  background: rgba(77,212,172,.12) !important;
  border-color: rgba(77,212,172,.35) !important;
  animation: none !important;
}
.fsv-btn-active-bc {
  color: #5fa3d1 !important;
  background: rgba(95,163,209,.12) !important;
  border-color: rgba(95,163,209,.35) !important;
  animation: none !important;
}

/* Tooltip — appears to the LEFT of rail (since rail is on the right edge) */
.fsv-tip {
  position: absolute !important;
  right: calc(100% + 10px) !important;
  inset-inline-end: auto !important;
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) translateX(4px) !important;
  background: #1a1f2b !important;
  border: 1px solid rgba(120,140,170,.18) !important;
  border-radius: 6px !important;
  padding: 5px 10px !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: #c5cad4 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity .16s, transform .16s !important;
  z-index: 9001 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.35) !important;
}
.fsv-btn:hover .fsv-tip {
  opacity: 1 !important;
  transform: translateY(-50%) translateX(0) !important;
}
/* RTL: tooltip on the right */
.fnrp-rtl #fsv-rail {
  inset-inline-end: auto !important;
  inset-inline-start: 0 !important;
  border-radius: 0 12px 12px 0 !important;
  border-inline-start: none !important;
  border-inline-end: 1px solid rgba(120,140,170,.12) !important;
}
.fnrp-rtl .fsv-tip {
  right: auto !important;
  left: calc(100% + 10px) !important;
}

/* Tooltip arrow */
.fsv-tip::after {
  content: '' !important;
  position: absolute !important;
  right: -5px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border: 4px solid transparent !important;
  border-left-color: rgba(120,140,170,.18) !important;
}
.fnrp-rtl .fsv-tip::after {
  right: auto !important;
  left: -5px !important;
  border-left-color: transparent !important;
  border-right-color: rgba(120,140,170,.18) !important;
}

/* Ambient pulse — override ALL old pulse rules */
.fsv-pulse { display: none !important; }

#fsv-btn-verified { animation: fsv-ambient-jade 9s ease-in-out infinite; animation-delay: 3s; }
#fsv-btn-academy  { animation: fsv-ambient-jade 9s ease-in-out infinite; animation-delay: 6s; }
#fsv-btn-complaint{ animation: fsv-ambient-steel 9s ease-in-out infinite; animation-delay: 4.5s; }
.fsv-btn-active, .fsv-btn-active-bc { animation: none !important; }

/* Panel sheet: offset from right edge (fixed rail) */
#fsv-sheet {
  inset-inline-end: 48px !important;
}
[dir="rtl"] #fsv-sheet, .fnrp-rtl #fsv-sheet {
  inset-inline-end: auto !important;
  inset-inline-start: 48px !important;
}

/* fn-body: restore to original 2-col grid — rail is now fixed position */
#fnrp-body {
  grid-template-columns: 1fr 320px !important;
}

/* Mobile: hide fixed rail on small screens */
@media (max-width: 640px) {
  #fsv-rail { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v11.18.1 — MOBILE LAYOUT FIX (targeted, surgical)
   
   Fixes a regression introduced in v11.18.0:
   The Services Icon Rail feature added `#fnrp-body { grid-template-columns: 
   1fr 320px !important }` (line 9355) which overrides the `@media (max-width: 
   1100px)` rule at line 2675 that should collapse the layout to a single 
   column on mobile.
   
   Result: on mobile, the 320px sidebar (news) sits next to the 1fr content 
   (top movers, prices) in a viewport that's only ~400px wide. Everything is 
   crushed: prices clipped, percentages broken to two lines, news headlines 
   truncated to 2-3 letters per line.
   
   This block restores correct mobile behavior:
   1. Below 1100px: single-column layout (content stacks vertically)
   2. Below 880px: tighten paddings + reduce gaps  
   3. Below 640px: fully optimized for phone widths (mover grid → 2 cols max)
   4. Below 480px: smallest phones — mover grid → 1 col, hide empty placeholders
   
   All rules use #fnrp-root or #fnrp-body parent for specificity; no !important 
   abuse, no override of typography/colors, no JS changes. Safe to remove this 
   block to revert.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── (1) Below 1100px: force single column, kill the 320px sidebar lock ──── */
@media (max-width: 1100px) {
  #fnrp-body,
  #fnrp-root #fnrp-body {
    grid-template-columns: 1fr !important;
  }
  #fnrp-root .fn-sidebar {
    position: static;
    width: 100%;
  }
}

/* ── (2) Below 880px: tablet/large phone — tighten spacing ───────────────── */
@media (max-width: 880px) {
  #fnrp-root .fn-body {
    padding: 0 12px;
    gap: 14px;
  }
  /* Top price cards: stack properly, no horizontal overflow */
  #fnrp-root .fs-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  #fnrp-root .fs-card-body {
    overflow-x: hidden;
  }
}

/* ── (3) Below 640px: phone — mover grid 2 cols max ─────────────────────── */
@media (max-width: 640px) {
  /* Mover grid (Top Gainers/Losers): force max 2 columns instead of 4 */
  #fnrp-root .fs-card-body.fnrp-w2-grid,
  #fnrp-root #fs-pairs-body.fnrp-w2-grid,
  #fnrp-root #fs-gainers-body.fnrp-w2-grid,
  #fnrp-root #fs-losers-body.fnrp-w2-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* Mover rows: keep ticker + pct on one line, never wrap */
  #fnrp-root .fs-mover {
    grid-template-columns: 18px 1fr auto;
    padding: 8px 8px;
    column-gap: 6px;
  }
  #fnrp-root .fs-mover-pct {
    font-size: 11px;
    white-space: nowrap;
    padding: 2px 5px;
  }
  #fnrp-root .fs-mover-sym {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #fnrp-root .fnrp-w2-col {
    min-width: 0;
  }
  /* Top news items: full width, readable */
  #fnrp-root .fn-item {
    padding: 14px 12px;
    min-width: 0;
  }
  #fnrp-root .fn-title,
  #fnrp-root .fn-title-lead {
    font-size: 15px;
    line-height: 1.35;
    word-break: normal;
  }
  /* Container itself: edge-to-edge but with safe padding */
  #fnrp-root .fn-body {
    padding: 0 10px;
    gap: 12px;
  }
  /* Price rows: cleaner stacking */
  #fnrp-root .fnrp-mkt-row-main {
    padding: 11px 12px;
    min-height: 48px;
  }
}

/* ── (4) Below 480px: small phone — 1 column for movers, hide empty cols ── */
@media (max-width: 480px) {
  /* Mover grid: single column on tiny screens */
  #fnrp-root .fs-card-body.fnrp-w2-grid,
  #fnrp-root #fs-gainers-body.fnrp-w2-grid,
  #fnrp-root #fs-losers-body.fnrp-w2-grid {
    grid-template-columns: 1fr !important;
  }
  /* Hide columns with 0 items to save vertical space */
  #fnrp-root .fnrp-w2-col:has(.fnrp-w2-col-count:empty),
  #fnrp-root .fnrp-w2-col .fnrp-w2-col-empty:only-child {
    /* Keep visible but compact — don't break layout if browser doesn't 
       support :has() */
    opacity: .55;
  }
  #fnrp-root .fnrp-w2-col-empty {
    padding: 8px 12px;
    font-size: 11px;
  }
  /* Card padding tighter */
  #fnrp-root .fs-card-hd {
    padding: 10px 12px 8px;
  }
  /* Outer body */
  #fnrp-root .fn-body {
    padding: 0 8px;
  }
}

/* ── (5) Safety net: prevent any horizontal scroll on body level ────────── */
html.fnrp-active,
body.fnrp-active {
  overflow-x: hidden !important;
}
@media (max-width: 1100px) {
  #fnrp-root,
  #fnrp-body {
    max-width: 100vw;
    overflow-x: hidden;
  }
}

/* ── (6) Tabular numerics on percentages (so digits align vertically) ───── */
#fnrp-root .fs-mover-pct {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ─── END v11.18.1 MOBILE FIX ────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────
 * v11.19.1 — Mobile GPU relief for the economic calendar overlay.
 * The backdrop-filter: blur(8px) on a full-screen overlay was a major
 * contributor to the laggy feel on mid-range phones. Tablets and phones
 * (max-width: 900px) now get a lighter 2px blur; desktop is unchanged.
 * Single rule, scoped, easy to revert. */
@media (max-width: 900px) {
    .fn-econ-modal-overlay {
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
}
/* ─── END v11.19.1 ───────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════════════════
   ⚡ v11.22.0 — RADICAL WATCHLIST REDESIGN
   ───────────────────────────────────────────────────────────────────────────
   Complete visual overhaul of the watchlist. Removes the giant red sparkline
   background that consumed every tile. Replaces stark white with warm cream.
   Adds proper hierarchy: avatar badge → symbol+name → price → tiny pill.
   The sparkline becomes a small mini-chart inset on the right, not a
   background screaming "everything is down".
   ═══════════════════════════════════════════════════════════════════════════ */


/* ─── 0. KILL THE BACKGROUND SPARKLINE (the red squiggle problem) ──────── */
/* The tile had a full-bleed SVG sparkline as background. When prices were
   down, every tile turned into a red blob with text floating on it. This
   was the single biggest visual problem. The sparkline is moved out of
   background into a small dedicated cell (see section 3 below). */
.fnrp-tile-spark-bg {
  display: none !important;
}


/* ─── 1. WATCHLIST CARD CONTAINER ───────────────────────────────────────── */
/* Soft warm card instead of stark white. Subtle border, gentle radius. */

#fnrp-sidebar #fs-pairs.fs-card {
  background: #fbfaf7 !important;
  border: 1px solid rgba(20, 22, 28, 0.06) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(20, 22, 28, 0.02), 0 8px 24px -16px rgba(20, 22, 28, 0.08) !important;
}

html[data-fnrp-theme="dark"] #fnrp-sidebar #fs-pairs.fs-card {
  background: #0e1320 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px -16px rgba(0, 0, 0, 0.5) !important;
}


/* ─── 2. CARD HEADER ────────────────────────────────────────────────────── */
/* "WATCHLIST · LIVE" header — gets a clean monochrome look, no neon dot. */

#fnrp-sidebar #fs-pairs .fs-card-hd {
  padding: 16px 18px 12px !important;
  border-bottom: 1px solid rgba(20, 22, 28, 0.04) !important;
  background: transparent !important;
}
html[data-fnrp-theme="dark"] #fnrp-sidebar #fs-pairs .fs-card-hd {
  border-bottom-color: rgba(255, 255, 255, 0.04) !important;
}

#fnrp-sidebar #fs-pairs .fs-card-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #5a6470 !important;
}
html[data-fnrp-theme="dark"] #fnrp-sidebar #fs-pairs .fs-card-title {
  color: #8c98ad !important;
}


/* ─── 3. ROW STRUCTURE — clean grid: avatar / name+price / spark / pill ── */

/* The CSS Grid layout for each row. This is the heart of the redesign:
   instead of a chaotic tile with a full-bleed sparkline behind text,
   each row is now a structured grid where every element knows its place. */

#fnrp-sidebar .fnrp-tile,
#fnrp-sidebar #fs-pairs-body .fnrp-w2-row {
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) 56px auto !important;
  grid-template-rows: auto auto !important;
  column-gap: 12px !important;
  row-gap: 2px !important;
  align-items: center !important;
  padding: 14px 18px !important;
  min-height: 64px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(20, 22, 28, 0.05) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  position: relative !important;
  cursor: pointer !important;
  transition: background .18s ease !important;
  border-inline-start: 0 !important;
  overflow: visible !important;
}

html[data-fnrp-theme="dark"] #fnrp-sidebar .fnrp-tile,
html[data-fnrp-theme="dark"] #fnrp-sidebar #fs-pairs-body .fnrp-w2-row {
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

#fnrp-sidebar .fnrp-tile:last-child,
#fnrp-sidebar #fs-pairs-body .fnrp-w2-row:last-child {
  border-bottom: 0 !important;
}

/* Hover — warm tint on the row, no transform */
#fnrp-sidebar .fnrp-tile:hover,
#fnrp-sidebar #fs-pairs-body .fnrp-w2-row:hover {
  background: rgba(77, 212, 172, 0.05) !important;
}
html[data-fnrp-theme="dark"] #fnrp-sidebar .fnrp-tile:hover,
html[data-fnrp-theme="dark"] #fnrp-sidebar #fs-pairs-body .fnrp-w2-row:hover {
  background: rgba(77, 212, 172, 0.06) !important;
}

/* Active — mint left rail */
#fnrp-sidebar .fnrp-tile.is-active,
#fnrp-sidebar .fnrp-tile.is-expanded,
#fnrp-sidebar #fs-pairs-body .fnrp-w2-row.is-active {
  background: rgba(77, 212, 172, 0.07) !important;
}
#fnrp-sidebar .fnrp-tile.is-active::before,
#fnrp-sidebar .fnrp-tile.is-expanded::before,
#fnrp-sidebar #fs-pairs-body .fnrp-w2-row.is-active::before {
  content: "" !important;
  position: absolute !important;
  inset-inline-start: 0 !important;
  top: 12px !important;
  bottom: 12px !important;
  width: 3px !important;
  background: #4dd4ac !important;
  border-radius: 0 2px 2px 0 !important;
}


/* ─── 4. AVATAR BADGE — first column ─────────────────────────────────────── */
/* Each row gets a soft colored circle with the first letter of the ticker.
   Acts as a visual anchor; brain reads "B" for Bitcoin faster than "BTCUSDT". */

#fnrp-sidebar .fnrp-tile-sym {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  background: rgba(77, 212, 172, 0.10) !important;
  color: #2d8a6f !important;
  line-height: 1 !important;
  text-overflow: clip !important;
  overflow: hidden !important;
  /* Show only first 3 chars max via text-overflow trick */
  white-space: nowrap !important;
  padding: 0 !important;
}
html[data-fnrp-theme="dark"] #fnrp-sidebar .fnrp-tile-sym {
  background: rgba(77, 212, 172, 0.14) !important;
  color: #6fe0c0 !important;
}


/* ─── 5. NAME + PRICE — the middle stacked column ───────────────────────── */

/* The "Bitcoin" full name sits on top of the price as a small caption */
#fnrp-sidebar .fnrp-tile-name {
  grid-column: 2 !important;
  grid-row: 1 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #6b7280 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: none !important;
}
html[data-fnrp-theme="dark"] #fnrp-sidebar .fnrp-tile-name {
  color: #98a3b3 !important;
}

/* The big price number */
#fnrp-sidebar .fnrp-tile-price {
  grid-column: 2 !important;
  grid-row: 2 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1a1f2e !important;
  font-variant-numeric: tabular-nums slashed-zero !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  direction: ltr !important;
  text-align: start !important;
}
html[data-fnrp-theme="dark"] #fnrp-sidebar .fnrp-tile-price {
  color: #e3e9f2 !important;
}


/* ─── 6. MINI SPARKLINE — third column ──────────────────────────────────── */
/* The sparkline is now a small inset chart on the right of each row, sized
   56×24px. Much more restrained than the previous full-bleed background.
   Color is mint or coral depending on direction, with reduced opacity. */

#fnrp-sidebar .fnrp-tile .fnrp-tile-spark-bg {
  display: block !important;
  position: relative !important;
  grid-column: 3 !important;
  grid-row: 1 / span 2 !important;
  width: 56px !important;
  height: 24px !important;
  align-self: center !important;
  pointer-events: none !important;
  inset: auto !important;
  z-index: 0 !important;
  opacity: .55 !important;
}
#fnrp-sidebar .fnrp-tile .fnrp-tile-spark-bg svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  opacity: 1 !important;
}


/* ─── 7. CHANGE PILL — fourth column (smaller, quieter) ─────────────────── */
/* Was a big bold pill. Now compact and properly weighted. */

#fnrp-sidebar .fnrp-tile-top {
  display: contents !important;  /* dissolve the wrapping div */
}

#fnrp-sidebar .fnrp-tile-pill {
  grid-column: 4 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  min-width: 56px !important;
  text-align: center !important;
}

/* UP — soft green ink on whisper-green ground */
#fnrp-sidebar .fnrp-tile-pill.fnrp-tile-up {
  color: #15803d !important;
  background: rgba(34, 197, 94, 0.10) !important;
}
html[data-fnrp-theme="dark"] #fnrp-sidebar .fnrp-tile-pill.fnrp-tile-up {
  color: #4ade80 !important;
  background: rgba(74, 222, 128, 0.12) !important;
}

/* DOWN — quiet coral, NOT alarm red. This is the biggest psychological win.
   The old design used #f07070 (saturated alarm red); we use #b85450
   (terracotta) which reads "negative" without shouting "PANIC". */
#fnrp-sidebar .fnrp-tile-pill.fnrp-tile-dn {
  color: #b8453a !important;
  background: rgba(184, 69, 58, 0.08) !important;
}
html[data-fnrp-theme="dark"] #fnrp-sidebar .fnrp-tile-pill.fnrp-tile-dn {
  color: #f87171 !important;
  background: rgba(248, 113, 113, 0.12) !important;
}

/* FLAT */
#fnrp-sidebar .fnrp-tile-pill.fnrp-tile-flat {
  color: #6b7280 !important;
  background: rgba(107, 114, 128, 0.08) !important;
}


/* ─── 8. KILL THE LEFT-EDGE COLORED BORDER ──────────────────────────────── */
/* The tile had a 2px solid colored left border (red for down, green for up)
   AS WELL AS a colored sparkline AS WELL AS a colored pill. Triple redundancy
   on the same data. Kill the border; pill carries the signal. */
#fnrp-sidebar .fnrp-tile.fnrp-tile-up,
#fnrp-sidebar .fnrp-tile.fnrp-tile-dn,
#fnrp-sidebar .fnrp-tile.fnrp-tile-flat {
  border-inline-start-color: transparent !important;
}


/* ─── 9. SCROLLBAR — gentle, no harsh white block on the side ──────────── */

#fnrp-sidebar #fs-pairs-body,
#fnrp-sidebar #fs-pairs .fs-card-body {
  scrollbar-width: thin !important;
  scrollbar-color: rgba(20, 22, 28, 0.12) transparent !important;
}
#fnrp-sidebar #fs-pairs-body::-webkit-scrollbar,
#fnrp-sidebar #fs-pairs .fs-card-body::-webkit-scrollbar {
  width: 6px !important;
  background: transparent !important;
}
#fnrp-sidebar #fs-pairs-body::-webkit-scrollbar-thumb,
#fnrp-sidebar #fs-pairs .fs-card-body::-webkit-scrollbar-thumb {
  background: rgba(20, 22, 28, 0.10) !important;
  border-radius: 3px !important;
}
#fnrp-sidebar #fs-pairs-body::-webkit-scrollbar-thumb:hover,
#fnrp-sidebar #fs-pairs .fs-card-body::-webkit-scrollbar-thumb:hover {
  background: rgba(20, 22, 28, 0.20) !important;
}
html[data-fnrp-theme="dark"] #fnrp-sidebar #fs-pairs-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.10) !important;
}


/* ─── 10. ICON-TABS STRIP AT THE TOP (CRYPTO / FOREX / etc) ─────────────── */
/* Was a busy strip of small icons. Make it a clean segmented control. */

#fnrp-sidebar #fs-pairs-body .fnrp-w2-tabs.fnrp-w2-tabs--icons {
  padding: 12px 12px 8px !important;
  border-bottom: 1px solid rgba(20, 22, 28, 0.05) !important;
  display: flex !important;
  gap: 2px !important;
  justify-content: space-between !important;
  background: rgba(20, 22, 28, 0.02) !important;
}
html[data-fnrp-theme="dark"] #fnrp-sidebar #fs-pairs-body .fnrp-w2-tabs.fnrp-w2-tabs--icons {
  background: rgba(255, 255, 255, 0.02) !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

#fnrp-sidebar #fs-pairs-body .fnrp-w2-tab--icon {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 8px 6px !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
  transition: background .15s, color .15s !important;
  color: #8a909a !important;
}
#fnrp-sidebar #fs-pairs-body .fnrp-w2-tab--icon:hover {
  background: rgba(77, 212, 172, 0.08) !important;
  color: #2d8a6f !important;
}
#fnrp-sidebar #fs-pairs-body .fnrp-w2-tab--icon.is-active {
  background: #ffffff !important;
  color: #1a1f2e !important;
  box-shadow: 0 1px 3px rgba(20, 22, 28, 0.08) !important;
}
html[data-fnrp-theme="dark"] #fnrp-sidebar #fs-pairs-body .fnrp-w2-tab--icon.is-active {
  background: #1a2030 !important;
  color: #e3e9f2 !important;
}


/* ─── 11. "+ N MORE" TOGGLE BUTTON ──────────────────────────────────────── */

#fnrp-sidebar .fnrp-w2-more,
#fnrp-sidebar #fs-pairs-body .fnrp-w2-col-more {
  width: 100% !important;
  padding: 12px 18px !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(20, 22, 28, 0.05) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #6b7280 !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: background .15s, color .15s !important;
  letter-spacing: 0 !important;
}
#fnrp-sidebar .fnrp-w2-more:hover,
#fnrp-sidebar #fs-pairs-body .fnrp-w2-col-more:hover {
  background: rgba(77, 212, 172, 0.06) !important;
  color: #2d8a6f !important;
}
html[data-fnrp-theme="dark"] #fnrp-sidebar .fnrp-w2-more,
html[data-fnrp-theme="dark"] #fnrp-sidebar #fs-pairs-body .fnrp-w2-col-more {
  border-top-color: rgba(255, 255, 255, 0.06) !important;
  color: #98a3b3 !important;
}


/* ─── 12. KILL THE OLD W2-ROW STYLING THAT MIGHT LEAK THROUGH ───────────── */
/* The legacy .fnrp-w2-row layout (different from .fnrp-tile) has its own
   styling. Override its internals so it matches the new tile design. */

#fnrp-sidebar .fnrp-w2-row-code {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #1a1f2e !important;
  letter-spacing: 0 !important;
}
html[data-fnrp-theme="dark"] #fnrp-sidebar .fnrp-w2-row-code {
  color: #e3e9f2 !important;
}

#fnrp-sidebar .fnrp-w2-row-label {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11px !important;
  color: #6b7280 !important;
  font-weight: 400 !important;
}
html[data-fnrp-theme="dark"] #fnrp-sidebar .fnrp-w2-row-label {
  color: #98a3b3 !important;
}

#fnrp-sidebar .fnrp-w2-row-price {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1a1f2e !important;
  font-variant-numeric: tabular-nums slashed-zero !important;
}
html[data-fnrp-theme="dark"] #fnrp-sidebar .fnrp-w2-row-price {
  color: #e3e9f2 !important;
}

#fnrp-sidebar .fnrp-w2-row-chg.is-up {
  color: #15803d !important;
  background: rgba(34, 197, 94, 0.10) !important;
  padding: 3px 7px !important;
  border-radius: 5px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
}
html[data-fnrp-theme="dark"] #fnrp-sidebar .fnrp-w2-row-chg.is-up {
  color: #4ade80 !important;
  background: rgba(74, 222, 128, 0.12) !important;
}

/* THIS IS THE CRITICAL ONE — the down state in the watchlist.
   Was alarming red (#f07070 / #f87171). Now quiet terracotta. */
#fnrp-sidebar .fnrp-w2-row-chg.is-down {
  color: #b8453a !important;
  background: rgba(184, 69, 58, 0.08) !important;
  padding: 3px 7px !important;
  border-radius: 5px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
}
html[data-fnrp-theme="dark"] #fnrp-sidebar .fnrp-w2-row-chg.is-down {
  color: #f87171 !important;
  background: rgba(248, 113, 113, 0.12) !important;
}


/* ─── 13. PIN/STAR (the existing .fnrp-w2-star functionality) ──────────── */
/* Repositioned to be discoverable on hover, not always present. */

#fnrp-sidebar .fnrp-w2-star {
  position: absolute !important;
  top: 50% !important;
  inset-inline-end: -2px !important;
  transform: translateY(-50%) !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
  opacity: 0 !important;
  transition: opacity .18s, background .18s !important;
  color: #b8a050 !important;
  z-index: 2 !important;
}
#fnrp-sidebar .fnrp-tile:hover .fnrp-w2-star,
#fnrp-sidebar .fnrp-w2-row:hover .fnrp-w2-star {
  opacity: 1 !important;
}
#fnrp-sidebar .fnrp-w2-star:hover {
  background: rgba(184, 160, 80, 0.12) !important;
}
#fnrp-sidebar .fnrp-w2-star.is-pinned {
  opacity: 1 !important;
  color: #d4a83a !important;
}


/* ─── 14. KILL THE BREATHING / BLINKING DOTS ON HEADER ──────────────────── */
/* The "LIVE" dot was pulsing rapidly. Calm it down. */

#fnrp-sidebar #fs-pairs .fs-card-tag {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  color: #2d8a6f !important;
  text-transform: uppercase !important;
  padding: 3px 8px !important;
  background: rgba(77, 212, 172, 0.10) !important;
  border-radius: 12px !important;
  border: 0 !important;
}
#fnrp-sidebar #fs-pairs .fs-card-tag::before {
  width: 5px !important;
  height: 5px !important;
  background: #4dd4ac !important;
  animation: fnrp-pulse 3.2s cubic-bezier(.4,0,.2,1) infinite !important;
}


/* ─── 15. BREAKING TICKER + PRICE STRIP ─────────────────────────────────  */
/* v11.22.26 (rebased on 11.22.25) — These rules use !important and previously
   hardcoded the duration (90s / 60s) in the `animation` SHORTHAND. An
   !important shorthand beats the inline animationDuration that
   applyTickerSpeed() sets, so the JS speed engine was silently ignored and
   the ticker stayed fast. Fix: drive duration through a CSS custom property
   the JS sets inline (an inline custom property feeds the var() and wins even
   against !important). Default is slow (news-channel pace) for the pre-JS
   moment. */

.fp-strip-track-inner,
#fnrp-price-strip {
  animation: fnrp-slide var(--fnrp-tk-dur, 90s) linear infinite !important;
}
.fb-items,
#fnrp-ribbon-items {
  animation: fnrp-slide var(--fnrp-tk-dur, 110s) linear infinite !important;
}

/* Pause on hover so user can read */
.fp-strip-track:hover .fp-strip-track-inner,
.fb-track:hover .fb-items {
  animation-play-state: paused !important;
}

/* RTL — reverse direction so motion flows in reading direction */
.fnrp-rtl .fp-strip-track-inner,
.fnrp-rtl #fnrp-price-strip,
.fnrp-rtl .fb-items,
.fnrp-rtl #fnrp-ribbon-items {
  animation-direction: reverse !important;
}

/* v11.22.28 — FIX: breaking ribbon EMPTY in Arabic (RTL) only.
   ───────────────────────────────────────────────────────────────────────────
   The marquee is a classic duplicated-copy track that slides translateX(0 →
   -50%). That seamless trick assumes the oversized track is LEFT-aligned (the
   LTR case — which is why English/Spanish/French/Italian all worked). Under
   `direction: rtl` the oversized .fb-items right-aligns instead, so the reverse
   animation's start position translateX(-50%) shifts the whole content LEFT by
   one full copy. Because the news headlines are very wide, that pushed ALL of
   it out of the visible window → only the "عاجل" label remained. The price
   strip escaped the bug merely because its content is narrow enough to stay in
   view, which made it look like "Arabic alone is broken".

   Fix: pin the ribbon's marquee internals to LTR so the left-aligned, seamless
   math holds in every language. Each item's Arabic text still renders RTL via
   the Unicode bidi algorithm (Arabic glyphs are inherently right-to-left), so
   headlines read correctly; only the invisible track geometry is normalised.
   Scoped to the ribbon — the price strip is left untouched since it already
   renders. */
.fnrp-rtl .fb-track,
.fnrp-rtl .fb-items,
.fnrp-rtl #fnrp-ribbon-items {
  direction: ltr !important;
}
.fnrp-rtl .fb-item {
  direction: rtl;          /* Arabic headline text reads right-to-left */
  text-align: start;
}

/* Ensure tracks have proper overflow (no scrollbars visible) */
.fp-strip-track, .fb-track {
  overflow: hidden !important;
  scrollbar-width: none !important;
}
.fp-strip-track::-webkit-scrollbar,
.fb-track::-webkit-scrollbar {
  display: none !important;
}

.fb-ribbon { border-inline-start: 2px solid #4dd4ac !important; }
.fb-label {
  color: #555f70 !important;
  background: transparent !important;
}
.fb-label::before { background: #4dd4ac !important; }
.fb-item-tag {
  color: #6b7280 !important;
  background: transparent !important;
  border: 1px solid rgba(20, 22, 28, 0.10) !important;
}
html[data-fnrp-theme="dark"] .fb-item-tag {
  color: #98a3b3 !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}

.fn-item.is-breaking::before { background: #fbbf24 !important; opacity: .9 !important; }
.fn-item.is-important::before { background: #4dd4ac !important; opacity: .65 !important; }
.fn-item.is-breaking.is-important::before { background: #fbbf24 !important; width: 3px !important; }

#fnrp-root:not(.fnrp-rtl) .fn-title {
  font-family: 'Source Serif 4', 'Newsreader', Georgia, serif !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
  letter-spacing: -.015em !important;
}

.fn-stat-score { display: none !important; }
.fn-econ-spine, #fnrp-econ-spine { display: none !important; }

.ff-chip.active {
  color: #4dd4ac !important;
  background: rgba(77, 212, 172, 0.10) !important;
  border-color: rgba(77, 212, 172, 0.32) !important;
}
.ff-chip.c-breaking::before { background: #fbbf24 !important; }

#fsv-btn-verified, #fsv-btn-academy, #fsv-btn-complaint {
  animation: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   END v11.22.0 — RADICAL WATCHLIST REDESIGN
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   v11.22.3 (BUG-19) — Respect prefers-reduced-motion
   ───────────────────────────────────────────────────────────────────────────
   The UI has 25 keyframe animations and 200+ transitions. Users who set
   "reduce motion" at the OS level (commonly people with vestibular disorders,
   migraine, or motion sensitivity) were previously shown the full animation
   set. This block neutralises animations and transitions for those users
   without changing anything for everyone else. It is intentionally the LAST
   rule in the file so it wins on the cascade; !important is justified here
   because it must override the many inline/animated rules above it.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* The marquee/ticker strips rely on a continuous animation to scroll; with
     motion reduced we simply stop them rather than freeze mid-scroll. */
  .fnrp-ticker-track,
  #fnrp-price-strip,
  #fnrp-ribbon-items {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v11.22.3 (BUG-20) — Restore keyboard focus visibility
   ───────────────────────────────────────────────────────────────────────────
   The stylesheet sets `outline: none` in 9 places without providing a
   replacement focus indicator, leaving keyboard users (and screen-reader
   users) unable to see what is focused — an accessibility (WCAG 2.4.7) and
   usability failure. :focus-visible only shows the ring for keyboard
   navigation, so mouse users never see an outline. This restores a clear,
   theme-consistent focus ring on every interactive element.
   ═══════════════════════════════════════════════════════════════════════════ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="menuitem"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent, #4493f8) !important;
  outline-offset: 2px !important;
  border-radius: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v11.22.4 — Empty-chart safeguard (stops the blank 240px panel from looking
   like it "covers" the watchlist).
   ───────────────────────────────────────────────────────────────────────────
   When the chart card is visible but has no rendered bars yet (fetch pending
   or failed), the 240px .fs-chart-wrap used to sit there as a large dark
   rectangle overlapping the eye-line of the columns behind/below it. We add a
   body-level state class `fnrp-chart-empty` (toggled from JS) that collapses
   the wrap to a slim band and lets the error/loading overlay define the height
   instead. The moment real bars render, JS removes the class and the full
   240px chart returns.
   ═══════════════════════════════════════════════════════════════════════════ */
.fnrp-chart-empty #fs-chart-wrap {
  height: auto;
  min-height: 96px;
}
.fnrp-chart-empty #fs-chart-svg { display: none; }
/* Make sure the error/empty overlay is readable and self-sized, not stretched
   over a phantom 240px box. */
.fnrp-chart-empty .fs-chart-error {
  position: relative;
  inset: auto;
  min-height: 96px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v11.22.6 — RADICAL STRUCTURAL FIX: no empty element may hold visible height
   in the sidebar.
   ───────────────────────────────────────────────────────────────────────────
   Different approach from chasing individual culprits: rather than fixing the
   one element that renders empty, we make it STRUCTURALLY IMPOSSIBLE for the
   sidebar to show a tall blank panel. Any chart card that is NOT in the
   `.visible` state, and any expanded-detail panel with no rendered content,
   collapses to zero. The chart wrap only reserves its 240px once it actually
   contains drawn SVG geometry (a <path>); until then it stays collapsed.
   These rules are intentionally last so they win the cascade.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1) The chart card never occupies space unless explicitly made visible. */
#fnrp-sidebar #fs-chart:not(.visible),
#fnrp-mobile-chart-slot #fs-chart:not(.visible) {
  display: none !important;
}

/* 2) The chart drawing area only claims its 240px AFTER real geometry exists.
      `:has(path)` is true only once renderFsChart() has injected the line/area
      paths. Before that (loading or failed fetch) the wrap stays compact so no
      big black rectangle can appear, but keeps enough height for the
      loading/error overlay to read clearly. */
#fs-chart-wrap:not(:has(path)) {
  height: auto !important;
  min-height: 110px !important;
}
#fs-chart-wrap:has(path) {
  height: 240px !important;
  min-height: 0 !important;
}

/* 3) [DISABLED v11.22.8 ROOT FIX] The old `:not(:has(svg))` guard collapsed the
      panel to height 0 on any browser/WebView that does not support the CSS
      `:has()` selector (older Android WebViews, Safari < 15.4, etc). On those
      engines the negation matched even when the <svg> WAS present, so the
      expanded detail (sparkline + OHLC) was forced to max-height:0 — producing
      the empty gap with stray vertical strokes the user reported. The reliable
      content-driven sizing now lives in the block below, which uses
      grid-template-rows (universally supported) instead of :has(). */


/* ═══════════════════════════════════════════════════════════════════════════
   v11.22.11 — SINGLE AUTHORITATIVE RULE for the watchlist expanded panel.
   ───────────────────────────────────────────────────────────────────────────
   This block supersedes and neutralises every earlier `.fnrp-mkt-row-detail`
   / `.fnrp-mkt-spark-*` rule in this file (there were 7 conflicting sets, all
   using !important, which is why the panel was unreliable). All the panel's
   inner styling now lives INLINE on the elements (see fnrpMktRenderDetail in
   frontend.js), so CSS only has to do ONE thing here: smoothly open/close the
   wrapper. The wrapper holds exactly one child (.fnrp-mkt-detail-inner), so
   the grid-template-rows 0fr→1fr animation is rock-solid and content-driven —
   no magic pixel cap, no clipping, no empty void, works in every engine
   (no :has(), no max-height guesswork).

   Because this is the LAST rule in the file and matches with high specificity,
   it wins the cascade over all the legacy blocks above.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The detail wrapper: a 1-row grid that animates between collapsed and open.
   It must span the full tile width (the tile is itself a CSS grid). */
.fnrp-tile .fnrp-mkt-row-detail,
#fnrp-sidebar .fnrp-tile .fnrp-mkt-row-detail {
  display: grid !important;
  grid-column: 1 / -1 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 0fr !important;
  width: 100% !important;
  min-width: 0 !important;
  max-height: none !important;
  height: auto !important;
  opacity: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border-top: 0 solid transparent !important;
  background: transparent !important;
  transition: grid-template-rows .34s cubic-bezier(.16,1,.3,1),
              opacity .22s ease,
              margin-top .22s ease !important;
}

/* The single inner child MUST have min-height:0 + overflow:hidden so the 0fr
   track can fully collapse it. */
.fnrp-tile .fnrp-mkt-row-detail > .fnrp-mkt-detail-inner,
#fnrp-sidebar .fnrp-tile .fnrp-mkt-row-detail > .fnrp-mkt-detail-inner {
  min-height: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Open state — let the single track grow to its natural content height. */
.fnrp-tile.is-expanded .fnrp-mkt-row-detail,
#fnrp-sidebar .fnrp-tile.is-expanded .fnrp-mkt-row-detail {
  grid-template-rows: 1fr !important;
  opacity: 1 !important;
  margin-top: 8px !important;
  border-top: 1px solid rgba(127,140,170,.12) !important;
}

/* When collapsed, the row must not be expandable-looking — kill any legacy
   max-height that some earlier block might still apply on .is-expanded. */
.fnrp-tile:not(.is-expanded) .fnrp-mkt-row-detail,
#fnrp-sidebar .fnrp-tile:not(.is-expanded) .fnrp-mkt-row-detail {
  grid-template-rows: 0fr !important;
  opacity: 0 !important;
  margin-top: 0 !important;
  border-top-color: transparent !important;
}

/* ════════════════════════════════════════════════════════════════════════
   v11.24.0 — MOVERS as a RANKED MAGNITUDE-BAR CHART (Gainers / Losers)
   A deliberately different metaphor from the watchlist row-list: each asset
   is one lane, the bar length encodes the size of the 24h move relative to
   the strongest mover in the card, and the % labels the lane. READ-ONLY —
   no click handlers anywhere, so it can never block or freeze the page.
   Self-contained namespace (.fnrp-mv2-*); shares nothing with .fnrp-w2-*.
   ════════════════════════════════════════════════════════════════════════ */
#fnrp-root .fnrp-mv2-body { padding: 0 14px 12px; }

#fnrp-root .fnrp-mv2-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 2px 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
#fnrp-root .fnrp-mv2-window {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.fnrp-rtl #fnrp-root .fnrp-mv2-window { font-family: var(--sans-ar); letter-spacing: 0; }
#fnrp-root .fnrp-mv2-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 8.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
}
.fnrp-rtl #fnrp-root .fnrp-mv2-live { font-family: var(--sans-ar); letter-spacing: 0; }
#fnrp-root .fnrp-mv2-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: fnrp-pulse 3s ease-in-out infinite;
}

#fnrp-root .fnrp-mv2-lanes { display: flex; flex-direction: column; gap: 7px; }

#fnrp-root .fnrp-mv2-lane {
  display: grid;
  grid-template-columns: 15px 42px 1fr 58px;
  align-items: center;
  column-gap: 10px;
  height: 30px;
  border-radius: 7px;
  padding: 0 6px;
  cursor: default;
  transition: background var(--fast);
}
#fnrp-root .fnrp-mv2-lane:hover { background: var(--surface-2); }

#fnrp-root .fnrp-mv2-rank {
  font-family: var(--mono);
  font-size: 10px; font-weight: 500;
  color: var(--muted-2);
  text-align: center;
}
#fnrp-root .fnrp-mv2-sym {
  font-family: var(--mono);
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .02em;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: clip;
}

/* the bar lane — the defining visual */
#fnrp-root .fnrp-mv2-track {
  position: relative;
  height: 9px;
  border-radius: 5px;
  background: var(--surface-2);
  overflow: hidden;
}
html[data-fnrp-theme="light"] #fnrp-root .fnrp-mv2-track { background: rgba(15,23,42,.06); }
#fnrp-root .fnrp-mv2-fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  border-radius: 5px;
  min-width: 6px;
  transition: width .45s cubic-bezier(.4,0,.2,1);
}
#fnrp-root .fnrp-mv2-lane.is-up   .fnrp-mv2-fill {
  background: linear-gradient(90deg, var(--up-glow), var(--up));
}
#fnrp-root .fnrp-mv2-lane.is-down .fnrp-mv2-fill {
  background: linear-gradient(90deg, var(--down-glow), var(--down));
}
.fnrp-rtl #fnrp-root .fnrp-mv2-lane.is-up   .fnrp-mv2-fill {
  background: linear-gradient(270deg, var(--up-glow), var(--up));
}
.fnrp-rtl #fnrp-root .fnrp-mv2-lane.is-down .fnrp-mv2-fill {
  background: linear-gradient(270deg, var(--down-glow), var(--down));
}

#fnrp-root .fnrp-mv2-pct {
  font-family: var(--mono);
  font-size: 11.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: end;
  white-space: nowrap;
}
#fnrp-root .fnrp-mv2-lane.is-up   .fnrp-mv2-pct { color: var(--up); }
#fnrp-root .fnrp-mv2-lane.is-down .fnrp-mv2-pct { color: var(--down); }

#fnrp-root .fnrp-mv2-empty {
  padding: 26px 16px;
  text-align: center;
  font-family: var(--sans);
  font-size: 12.5px; color: var(--muted);
  line-height: 1.5;
}
.fnrp-rtl #fnrp-root .fnrp-mv2-empty { font-family: var(--sans-ar); }

@media (max-width: 380px) {
  #fnrp-root .fnrp-mv2-lane {
    grid-template-columns: 14px 40px 1fr 56px;
    column-gap: 9px;
    height: 32px;
  }
  #fnrp-root .fnrp-mv2-sym { font-size: 13px; }
  #fnrp-root .fnrp-mv2-pct { font-size: 12px; }
}

/* v11.29.1 — "awaiting live data" placeholder pulse (watchlist detail panel
   when no real price is available yet; replaces the old fabricated 100-base
   OHLC chart). Tiny, self-contained, theme-agnostic. */
@keyframes fnrpAwaitPulse {
    0%, 100% { opacity: .25; transform: scale(.85); }
    50%      { opacity: .75; transform: scale(1);   }
}

/* ── v11.31.0 — Watchlist search box ─────────────────────────────────── */
.fnrp-w2-search {
  padding: 8px 10px 6px;
  background: var(--surface);
}
.fnrp-w2-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--text, #e3e9f2);
  background: var(--surface-2, #1a2030);
  border: 1px solid var(--border-2, rgba(255,255,255,.095));
  border-radius: 9px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fnrp-w2-search-input::placeholder { color: var(--muted, #8c98ad); opacity: .85; }
.fnrp-w2-search-input:focus {
  border-color: var(--accent, #4dd4ac);
  box-shadow: 0 0 0 3px var(--accent-bg, rgba(77,212,172,.10));
}
.fnrp-w2-search-input::-webkit-search-cancel-button {
  filter: invert(.6);
  cursor: pointer;
}
.fnrp-w2-results { display: block; }

/* v11.34.0 — TradingView live table columns (forex / metals / energy / indices / equities).
   The crypto tab keeps its native rows; these tabs render a TradingView Market Quotes
   widget. Keep the column padding-free so the widget fills the panel, and ensure the
   required "by TradingView" attribution stays visible. */
.fnrp-w2-col--tv{
  padding:0 !important;min-height:600px;width:100%;max-width:100%;overflow:hidden;
  border:1px solid var(--border-2);border-radius:14px;background:var(--bg-2);
  box-shadow:0 18px 42px -30px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.03);
}
.fnrp-w2-col--tv .tradingview-widget-container{width:100% !important;max-width:100% !important}
.fnrp-w2-col--tv .tradingview-widget-container__widget{width:100% !important;max-width:100% !important}
/* Force the embedded iframe to the panel width so the Change column is never
   clipped on the right in the narrow sidebar — the table compresses to fit. */
.fnrp-w2-col--tv iframe{width:100% !important;max-width:100% !important;min-width:0 !important}
/* v11.37.0 — attribution styled with the site accent + a quiet divider so the
   "by TradingView" credit reads as a deliberate part of the card. Required by
   TradingView's free-widget terms — keep it visible. */
.fnrp-w2-col--tv .tradingview-widget-copyright{
  font-size:12px;line-height:1.5;text-align:center;padding:9px 0 11px;opacity:.92;
  border-top:1px solid var(--border);background:var(--bg-2);
}
.fnrp-w2-col--tv .tradingview-widget-copyright a,
.fnrp-w2-col--tv .tradingview-widget-copyright .blue-text{color:var(--accent);text-decoration:none}
.fnrp-w2-col--tv .tradingview-widget-copyright a:hover{text-decoration:underline}

/* ── v11.51 — Header account gear + dropdown ──────────────────────────────── */
.fh-acct { position: relative; display: flex; align-items: center; }
.fh-acct-btn.is-authed { color: var(--accent); }
.fh-acct-menu {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0;
  min-width: 230px; padding: 8px; z-index: 1200;
  background: var(--bg, #0b0f17);
  border: 1px solid var(--border-2, rgba(255,255,255,.095));
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
}
html[data-fnrp-theme="light"] .fh-acct-menu { box-shadow: 0 18px 48px rgba(15,23,42,.16); }
.fh-acct-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 10px; margin-bottom: 6px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,.05));
}
.fh-acct-ava {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
  object-fit: cover; display: flex; align-items: center; justify-content: center;
  background: var(--accent-bg, rgba(77,212,172,.10)); color: var(--accent, #4dd4ac);
  font-weight: 700; font-size: 14px;
}
.fh-acct-id { min-width: 0; }
.fh-acct-name { color: var(--text); font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fh-acct-mail { color: var(--text-2); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fh-acct-item {
  display: block; padding: 8px 10px; border-radius: 8px;
  color: var(--text); font-size: 13px; text-decoration: none;
}
.fh-acct-item:hover { background: var(--accent-bg, rgba(77,212,172,.10)); color: var(--accent, #4dd4ac); }
.fh-acct-item.is-danger:hover { background: rgba(239,68,68,.12); color: #ef4444; }
.fh-acct-item.is-primary { background: var(--accent-bg, rgba(77,212,172,.10)); color: var(--accent, #4dd4ac); text-align: center; font-weight: 600; }
.fh-acct-guest { padding: 6px 10px 10px; color: var(--text-2); font-size: 12px; }