/* =====================================================================
   fnrp-femto-skin.css  —  "femto Markets" Material re-skin (v2)
   ---------------------------------------------------------------------
   PURELY PRESENTATIONAL OVERLAY. Loaded LAST (after every other plugin
   stylesheet) so it wins on equal specificity. It changes NO markup,
   NO JavaScript, NO PHP, NO translation, NO layout flow — only colour,
   shape, elevation, spacing, transform & transition. Every rule is
   scoped under `html.fnrp-active`, so it can never leak into the
   WordPress theme/admin.

   v2 goal — bring the plugin's surfaces fully in line with the
   "femto Markets — Newsroom" reference (Google Material 3): clean
   surfaces, generous rounding, soft elevation, a Google-blue primary,
   green / red / amber market signals, mono numerics, pill tabs, and
   sentiment-accented news cards that lift + colour their title on hover.

   Design tokens (palette, radius, elevation, easing) are taken 1:1 from
   the newsroom reference so the two read as the same product.

   ARABIC / RTL: typography tokens (incl. the Arabic font) are left
   untouched; every directional rule uses logical properties so the skin
   is correct in both LTR and RTL.

   TO ROLL BACK INSTANTLY: remove the two enqueue lines for
   'fnrp-femto-skin' in findex-news-runtime-pro.php (and restore the
   *.v1.bak files / delete these two skin files). Nothing else changes.
   ===================================================================== */

/* ─────────────────────────────────────────────────────────────────────
   1. TOKEN RE-COLOUR — DARK (default)
   html.fnrp-active (0,1,1) beats the plugin :root (0,1,0).
   ───────────────────────────────────────────────────────────────────── */
html.fnrp-active,
html.fnrp-active[data-fnrp-theme="dark"]{
  /* Material neutral surfaces (cool, calm) */
  --bg:        #0F1115;
  --bg-2:      #14171D;
  --surface:   #181B20;
  --surface-2: #1F232B;
  --surface-3: #272C35;
  --surface-glass: rgba(24,27,32,.74);

  --border:    rgba(255,255,255,.07);
  --border-2:  rgba(255,255,255,.13);
  --hair:      #23272F;

  --text:      #E6E8EC;
  --text-2:    #BCC1CB;
  --muted:     #8A929E;
  --muted-2:   #646B77;

  /* Google-blue signature accent */
  --accent:    #8AB4F8;
  --accent-2:  #AECBFA;
  --accent-bg: rgba(138,180,248,.14);
  --fz-primary-soft: rgba(138,180,248,.14);
  --fz-primary-c:    #0B3A86;
  --fz-on-primary-c: #D3E3FD;

  /* Material trader signals + their tonal "containers" */
  --up:        #81C995;
  --up-glow:   rgba(52,168,83,.18);
  --fz-bull-c: #0A4D27;  --fz-on-bull: #CEEAD6; --fz-bull-soft: rgba(129,201,149,.15);
  --down:      #F28B82;
  --down-glow: rgba(234,67,53,.16);
  --fz-bear-c: #5C1410;  --fz-on-bear: #FAD2CF; --fz-bear-soft: rgba(242,139,130,.15);
  --warn:      #FDD663;
  --warn-glow: rgba(249,171,0,.16);
  --fz-warn-c: #553300;  --fz-on-warn: #FEEFC3; --fz-warn-soft: rgba(253,214,99,.14);

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

  /* page atmosphere (faint radial glows behind everything) */
  --fz-grad-a: rgba(138,180,248,.10);
  --fz-grad-b: rgba(129,201,149,.07);

  /* Material shape scale */
  --radius:    12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --fz-r-full: 999px;

  /* Material elevation (dark) */
  --fz-e1: 0 1px 2px rgba(0,0,0,.42), 0 1px 3px 1px rgba(0,0,0,.30);
  --fz-e2: 0 1px 2px rgba(0,0,0,.42), 0 2px 6px 2px rgba(0,0,0,.34);
  --fz-e3: 0 1px 3px rgba(0,0,0,.46), 0 6px 14px 3px rgba(0,0,0,.40);
  --fz-e4: 0 2px 3px rgba(0,0,0,.50), 0 10px 22px 5px rgba(0,0,0,.46);
  --fz-e5: 0 4px 5px rgba(0,0,0,.54), 0 16px 40px 8px rgba(0,0,0,.55);
  --fz-state: #E6E8EC; /* hover state-layer tint */
}

/* ─────────────────────────────────────────────────────────────────────
   2. TOKEN RE-COLOUR — LIGHT
   ───────────────────────────────────────────────────────────────────── */
html.fnrp-active[data-fnrp-theme="light"]{
  --bg:        #F3F5F9;
  --bg-2:      #EAEEF4;
  --surface:   #FFFFFF;
  --surface-2: #EEF1F6;
  --surface-3: #E5E9F1;
  --surface-glass: rgba(255,255,255,.72);

  --border:    rgba(16,24,40,.08);
  --border-2:  rgba(16,24,40,.15);
  --hair:      #E9ECF2;

  --text:      #1B1C1F;
  --text-2:    #44474E;
  --muted:     #6B7280;
  --muted-2:   #9AA1AC;

  --accent:    #1A73E8;
  --accent-2:  #1763C9;
  --accent-bg: rgba(26,115,232,.10);
  --fz-primary-soft: rgba(26,115,232,.10);
  --fz-primary-c:    #D3E3FD;
  --fz-on-primary-c: #06245C;

  --up:        #1E8E3E;
  --up-glow:   rgba(30,142,62,.12);
  --fz-bull-c: #CEEAD6;  --fz-on-bull: #0B5325; --fz-bull-soft: rgba(30,142,62,.12);
  --down:      #D93025;
  --down-glow: rgba(217,48,37,.10);
  --fz-bear-c: #FAD2CF;  --fz-on-bear: #7E1610; --fz-bear-soft: rgba(217,48,37,.11);
  --warn:      #E37400;
  --warn-glow: rgba(227,116,0,.12);
  --fz-warn-c: #FEEFC3;  --fz-on-warn: #5E3200; --fz-warn-soft: rgba(227,116,0,.12);

  --grid:      rgba(16,24,40,.05);

  --fz-grad-a: rgba(26,115,232,.05);
  --fz-grad-b: rgba(30,142,62,.045);

  --radius:    12px;
  --radius-md: 16px;
  --radius-lg: 20px;

  --fz-e1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px 1px rgba(16,24,40,.05);
  --fz-e2: 0 1px 2px rgba(16,24,40,.07), 0 2px 6px 2px rgba(16,24,40,.06);
  --fz-e3: 0 1px 3px rgba(16,24,40,.09), 0 6px 14px 3px rgba(16,24,40,.08);
  --fz-e4: 0 2px 3px rgba(16,24,40,.10), 0 10px 22px 5px rgba(16,24,40,.10);
  --fz-e5: 0 6px 12px rgba(16,24,40,.12), 0 24px 56px 8px rgba(16,24,40,.18);
  --fz-state: #1B1C1F;
}

/* Stocks tag stays a Material violet (it doesn't derive from a token). */
html.fnrp-active{ --tag-stocks:#B39DFB; --tag-stocks-bg:rgba(179,157,251,.14); }
html.fnrp-active[data-fnrp-theme="light"]{ --tag-stocks:#7C3AED; --tag-stocks-bg:rgba(124,58,237,.09); }

/* =====================================================================
   3. PAGE ATMOSPHERE
   Two faint radial glows behind the content (exactly like the reference).
   Pure paint; no layout effect.
   ===================================================================== */
html.fnrp-active body{
  background-color: var(--bg);
  background-image:
    radial-gradient(760px 420px at 6% -8%,  var(--fz-grad-a), transparent 70%),
    radial-gradient(760px 420px at 97% -10%, var(--fz-grad-b), transparent 72%);
  background-attachment: fixed;
}

/* =====================================================================
   4. APP TOP-BAR (header)
   Floating, lightly elevated app bar with the femto wordmark.
   ===================================================================== */
html.fnrp-active .fh-bar{
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--hair);
  box-shadow: var(--fz-e1);
}
html.fnrp-active .fh-bar::after{ opacity:.5; }

/* search → Material rounded pill with a soft focus ring */
html.fnrp-active .fh-search-w{
  background: var(--surface-2);
  border: 1px solid var(--hair);
  border-radius: var(--fz-r-full);
  height: 36px;
  transition: border-color var(--med), background var(--med), box-shadow var(--med);
}
html.fnrp-active .fh-search-w:hover{ border-color: var(--border-2); }
html.fnrp-active .fh-search-w:focus-within{
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--fz-primary-soft);
}
html.fnrp-active .fh-kbd{
  border-radius: 6px;
  background: var(--surface);
  border-color: var(--hair);
}

/* theme / lang round icon buttons → Material elevated icon buttons */
html.fnrp-active .fh-theme-btn,
html.fnrp-active .fh-lang-btn{
  border-radius: var(--fz-r-full);
  background: var(--surface);
  border: 1px solid var(--hair);
  box-shadow: var(--fz-e1);
  transition: box-shadow var(--med), color var(--med), background var(--med);
}
html.fnrp-active .fh-theme-btn:hover,
html.fnrp-active .fh-lang-btn:hover{
  color: var(--text);
  box-shadow: var(--fz-e2);
  background: var(--surface-2);
}

/* LIVE badge → Material green pill with a pulsing dot (like the reference) */
html.fnrp-active .fh-live{
  border: 1px solid var(--fz-bull-c);
  background: var(--fz-bull-soft);
  color: var(--up);
  font-weight: 700;
  letter-spacing:.14em;
  padding: 7px 12px;
  border-radius: var(--fz-r-full);
  border-inline-end: 1px solid var(--fz-bull-c);
}
html.fnrp-active .fh-dot{
  width:7px; height:7px; border-radius:50%;
  background: var(--up);
  box-shadow: 0 0 8px var(--up-glow);
}
/* clock → quiet mono pill */
html.fnrp-active .fh-clock{
  background: var(--surface);
  border: 1px solid var(--hair);
  color: var(--muted);
  padding: 6px 11px;
  border-radius: var(--fz-r-full);
  box-shadow: var(--fz-e1);
  font-size: 11px;
}

/* =====================================================================
   5. femto BRAND LOCKUP  (rebuilt by the companion JS into .fh-logo)
   ===================================================================== */
html.fnrp-active .fh-logo{ display:inline-flex; align-items:center; gap:10px; }
html.fnrp-active .fh-logo[data-fz-logo]{ font-family:var(--sans); }
html.fnrp-active .fz-lock{ display:flex; flex-direction:column; line-height:.88; letter-spacing:-.02em; }
html.fnrp-active .fz-femto{ font-weight:800; font-size:24px; color:var(--text); }
html.fnrp-active .fz-mkt{ font-weight:300; font-size:15px; color:var(--text-2); margin-top:4px; }
html.fnrp-active .fz-mkt b{ color:var(--accent); font-weight:700; }
html.fnrp-active .fz-spk{ display:flex; flex-direction:column; justify-content:space-between; height:28px; margin-inline-start:1px; }
html.fnrp-active .fz-spk svg{ color:var(--accent); display:block; }
html.fnrp-active .fz-spk svg:nth-child(1){ animation:fzTwinkle 2.4s ease-in-out infinite; }
html.fnrp-active .fz-spk svg:nth-child(2){ opacity:.55; align-self:flex-end; }
@keyframes fzTwinkle{ 50%{ opacity:.4; } }
@media (prefers-reduced-motion: reduce){ html.fnrp-active .fz-spk svg:nth-child(1){ animation:none; } }

/* =====================================================================
   6. CATEGORY TABS  (.ff-chip — All / Crypto / Forex / …)
   Material pill tabs: rest = quiet, active = solid primary fill.
   ===================================================================== */
html.fnrp-active .ff-chip{
  height: 32px;
  padding: 0 16px;
  border: 1px solid var(--hair);
  border-radius: var(--fz-r-full);
  background: var(--surface);
  color: var(--text-2);
  font-weight: 600;
  font-size: 12.5px;
  box-shadow: var(--fz-e1);
  transition: color var(--med), background var(--med), box-shadow var(--med), border-color var(--med);
}
html.fnrp-active .ff-chip:hover{
  color: var(--text);
  border-color: var(--border-2);
  box-shadow: var(--fz-e2);
}
html.fnrp-active .ff-chip.active{
  background: var(--accent);
  border-color: transparent;
  color: #fff;
  font-weight: 700;
  box-shadow: var(--fz-e2);
}
html.fnrp-active[data-fnrp-theme="dark"] .ff-chip.active{ color:#0B1B36; }

/* "more" button + sort select follow the same pill shape */
html.fnrp-active .ff-more-btn,
html.fnrp-active .ff-sort{
  height: 32px;
  border-radius: var(--fz-r-full);
  border-color: var(--hair);
  background: var(--surface);
  box-shadow: var(--fz-e1);
}
html.fnrp-active .ff-more-btn:hover,
html.fnrp-active .ff-sort:hover{ border-color: var(--border-2); box-shadow: var(--fz-e2); }

/* =====================================================================
   7. FILTER SEGMENTS  (.ff-seg / .ff-seg-btn — Sentiment / Impact)
   Material segmented control on a recessed track; the active segment
   floats up and takes a signal colour.
   ===================================================================== */
html.fnrp-active .ff-seg{
  background: var(--surface-2);
  border: 1px solid var(--hair);
  border-radius: var(--fz-r-full);
  padding: 4px;
  gap: 2px;
}
html.fnrp-active .ff-seg-btn{
  height: 28px;
  padding: 0 13px;
  border-radius: var(--fz-r-full);
  font-weight: 600;
  transition: color var(--fast), background var(--fast), box-shadow var(--fast);
}
html.fnrp-active .ff-seg-btn.active{
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--fz-e1);
}
html.fnrp-active .ff-seg-btn[data-val="positive"].active{ background: var(--up);   color:#fff; }
html.fnrp-active .ff-seg-btn[data-val="negative"].active{ background: var(--down); color:#fff; }
html.fnrp-active .ff-seg-btn[data-val="critical"].active{ background: var(--down); color:#fff; }
html.fnrp-active .ff-seg-btn[data-val="high"].active    { background: var(--warn); color:#3a2600; }

html.fnrp-active .ff-group-label{ color: var(--muted); }

/* the BREAKING-only toggle reads as a clear pill */
html.fnrp-active .ff-chip.c-breaking.active{
  background: var(--down);
  border-color: transparent;
  color:#fff;
}
html.fnrp-active .ff-chip.c-breaking.active::before{ background:#fff; }

/* =====================================================================
   8. NEWS CARDS  (.fn-item) — the centrepiece
   Flat separated list → elevated Material cards that lift on hover,
   colour their title primary, and reveal a sentiment-tinted accent rail.
   ===================================================================== */
html.fnrp-active .fn-stream{ display:flex; flex-direction:column; gap:14px; }

html.fnrp-active .fn-item,
html.fnrp-active .fn-item.is-breaking,
html.fnrp-active .fn-item.is-important{
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  box-shadow: var(--fz-e1);
  padding: 22px 24px;
  transition: box-shadow var(--med), transform var(--med), border-color var(--med);
  animation: fzArrive .42s cubic-bezier(0,0,0,1);
}
html.fnrp-active .fn-item:first-child{ padding-top: 22px; }

html.fnrp-active .fn-item:hover{
  transform: translateY(-3px);
  box-shadow: var(--fz-e4);
  border-color: transparent;
}
html.fnrp-active .fn-item:active{ transform: translateY(-1px) scale(.997); }

/* universal sentiment accent rail (lives on ::before for ALL cards) */
html.fnrp-active .fn-item::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:16px; bottom:16px;
  width:4px;
  border-radius:0 4px 4px 0;
  background: var(--warn);               /* neutral default */
  transform: scaleY(0);
  transform-origin:center;
  opacity:0;
  transition: transform var(--med), opacity var(--fast);
}
html.fnrp-rtl.fnrp-active .fn-item::before{ border-radius:4px 0 0 4px; }
html.fnrp-active .fn-item:has(.fn-badge.b-pos)::before{ background: var(--up); }
html.fnrp-active .fn-item:has(.fn-badge.b-neg)::before{ background: var(--down); }
html.fnrp-active .fn-item.is-breaking::before,
html.fnrp-active .fn-item.is-important::before{ background: var(--down); }
/* reveal: on hover for calm items, always-on for breaking/important */
html.fnrp-active .fn-item:hover::before{ transform:scaleY(1); opacity:1; }
html.fnrp-active .fn-item.is-breaking::before{ transform:scaleY(1); opacity:1; }
html.fnrp-active .fn-item.is-important::before{ transform:scaleY(1); opacity:.85; }

/* title: heavier + colours primary on hover (Material affordance) */
html.fnrp-active .fn-title{
  font-weight: 800;
  letter-spacing:-.015em;
  transition: color var(--fast);
}
html.fnrp-active .fn-item:hover .fn-title{ color: var(--accent); }
/* keep Arabic title weight comfortable (no -letter-spacing on Arabic) */
html.fnrp-rtl.fnrp-active .fn-title{ letter-spacing:0; }

/* ── meta chips → Material tonal chips ────────────────────────────── */
html.fnrp-active .fn-tag{
  border-radius: var(--fz-r-full);
  padding: 3px 10px;
  font-weight: 800;
  letter-spacing:.04em;
}
/* category tag → primary container for the "info" markets */
html.fnrp-active .fn-tag.t-crypto,
html.fnrp-active .fn-tag.t-forex,
html.fnrp-active .fn-tag.t-macro{
  background: var(--fz-primary-c);
  color: var(--fz-on-primary-c);
}

html.fnrp-active .fn-badge{
  border-radius: var(--fz-r-full);
  padding: 3px 10px;
  font-weight: 800;
  letter-spacing:.05em;
}
html.fnrp-active .fn-badge.b-breaking,
html.fnrp-active .fn-badge.b-critical{
  background: var(--down);
  color:#fff;
  box-shadow: 0 2px 8px -2px var(--down-glow);
}
html.fnrp-active .fn-badge.b-high{ background: var(--fz-warn-c); color: var(--fz-on-warn); }
html.fnrp-active .fn-badge.b-pos { background: var(--fz-bull-c);  color: var(--fz-on-bull); }
html.fnrp-active .fn-badge.b-neg { background: var(--fz-bear-c);  color: var(--fz-on-bear); }

/* quiet stats footer gets a hairline like the reference */
html.fnrp-active .fn-foot{
  border-top: 1px solid var(--hair);
  padding-top: 14px;
  margin-top: 14px;
}

/* =====================================================================
   9. SIDEBAR PANELS  (.fs-card — watchlist, chart, pulse, brokers …)
   NOTE: no overflow:hidden here — these can hold tooltips / expanders.
   ===================================================================== */
html.fnrp-active .fs-card{
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  box-shadow: var(--fz-e2);
  transition: box-shadow var(--med);
}
html.fnrp-active .fs-card:hover{ box-shadow: var(--fz-e3); }
html.fnrp-active .fs-card-title{
  font-family: var(--mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--text-2);
}
html.fnrp-active .fs-card-tag{
  border-radius: var(--fz-r-full);
  font-family: var(--mono);
  letter-spacing:.06em;
}

/* =====================================================================
   10. MARKET TILES  (.fnrp-tile) → elevated chips with hover-lift
   ===================================================================== */
html.fnrp-active .fnrp-tile{
  border-radius: var(--radius-md);
  box-shadow: var(--fz-e1);
  transition: box-shadow var(--med), transform var(--med), background var(--med);
}
html.fnrp-active .fnrp-tile:hover{ box-shadow: var(--fz-e3); transform: translateY(-2px); }
html.fnrp-active .fnrp-tile-pill{ border-radius: var(--fz-r-full); }

/* =====================================================================
   11. EXPANDABLE MARKET ROWS  (.fnrp-mkt-row)
   ===================================================================== */
html.fnrp-active .fnrp-mkt-row{
  border-radius: var(--radius-md);
  transition: background var(--med), box-shadow var(--med);
}
html.fnrp-active .fnrp-mkt-row:hover{ background: var(--surface-2); }
html.fnrp-active .fnrp-mkt-row.is-expanded{ box-shadow: var(--fz-e2); background: var(--surface-2); }
html.fnrp-active .fnrp-mkt-pagebtn{ border-radius: var(--fz-r-full); }

/* =====================================================================
   12. WATCHLIST v2  (.fnrp-w2)
   Contained, sectioned cells; tabs as a pill row; rows lift when open.
   ===================================================================== */
html.fnrp-active .fnrp-w2-tab{
  border-radius: var(--fz-r-full);
  transition: color var(--fast), background var(--fast);
}
html.fnrp-active .fnrp-w2-tab.is-active{
  background: var(--accent-bg);
  color: var(--text);
}
html.fnrp-active .fnrp-w2-row{
  border-radius: var(--radius);
  transition: background var(--fast), box-shadow var(--med);
}
html.fnrp-active .fnrp-w2-row:hover{ background: var(--surface-2); }
html.fnrp-active .fnrp-w2-row.is-active{ background: var(--accent-bg); }
html.fnrp-active .fnrp-w2-row.is-expanded,
html.fnrp-active .fnrp-w2-row--v12.is-expanded{
  box-shadow: var(--fz-e2);
  background: var(--surface);
}
html.fnrp-active .fnrp-w2-spark-cta,
html.fnrp-active .fnrp-mkt-spark-cta{ border-radius: var(--radius); }

/* movers lanes */
html.fnrp-active .fnrp-mv2-lane{ border-radius: var(--radius); }

/* =====================================================================
   13. ECONOMIC CALENDAR  (.fn-econ-row)
   Clean rows + tonal impact chips, matching the reference calendar.
   ===================================================================== */
html.fnrp-active .fn-econ-row{ border-bottom: 1px solid var(--hair); }
html.fnrp-active .fn-econ-row:hover{ background: var(--accent-bg); }
html.fnrp-active .fn-econ-row-cur{
  border-radius: 6px;
  background: var(--surface-2);
}
html.fnrp-active .fn-econ-chip{ border-radius: var(--fz-r-full); }
html.fnrp-active .fn-econ-chip.fn-econ-chip--imp-high.is-active  { background: var(--fz-bear-c); color: var(--fz-on-bear); }
html.fnrp-active .fn-econ-chip.fn-econ-chip--imp-medium.is-active{ background: var(--fz-warn-c); color: var(--fz-on-warn); }

/* =====================================================================
   14. PAGER  (.fn-pager buttons)
   ===================================================================== */
html.fnrp-active .fn-pager button,
html.fnrp-active .fn-pager .fn-page-btn{
  border-radius: var(--fz-r-full);
  background: var(--surface);
  border: 1px solid var(--hair);
  box-shadow: var(--fz-e1);
  transition: box-shadow var(--med), color var(--med);
}
html.fnrp-active .fn-pager button:hover:not(:disabled){ box-shadow: var(--fz-e3); color: var(--accent); }

/* =====================================================================
   15. ARTICLE READER  →  Material "burst" sheet
   The plugin opens articles in #fnrp-art-overlay > .fnrp-art-sheet (an
   <iframe>, so every article feature keeps working). We only change how
   it LOOKS and ENTERS: a centred card that scales up ("bursts") instead
   of the side-slide. No JS / logic changed.
   ===================================================================== */
html.fnrp-active .fnrp-art-overlay{
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(10,12,18,.56);
  backdrop-filter:blur(7px) saturate(120%);
  -webkit-backdrop-filter:blur(7px) saturate(120%);
}
html[data-fnrp-theme="light"].fnrp-active .fnrp-art-overlay{ background:rgba(20,28,48,.42); }

html.fnrp-active .fnrp-art-sheet{
  position:relative; top:auto; inset-inline-end:auto;
  width:min(760px,96vw); height:min(88vh,920px);
  background:var(--surface);
  border:1px solid var(--hair); border-inline-start:1px solid var(--hair);
  border-radius:var(--radius-lg);
  box-shadow:var(--fz-e5);
  transform:scale(.9); opacity:0;
  transition:transform .42s cubic-bezier(.2,0,0,1), opacity .3s ease;
  transform-origin:center;
  will-change:transform,opacity;
}
[dir="rtl"] html.fnrp-active .fnrp-art-sheet{ transform:scale(.9); box-shadow:var(--fz-e5); }
html.fnrp-active .fnrp-art-overlay.is-open .fnrp-art-sheet{ transform:scale(1); opacity:1; }
html.fnrp-active .fnrp-art-iframe{ border-radius:inherit; }

html.fnrp-active .fnrp-art-close{
  inset-inline-start:auto; inset-inline-end:24px; top:20px;
  border-radius: var(--fz-r-full);
  background:var(--surface); color:var(--text); box-shadow:var(--fz-e2);
}
html.fnrp-active .fnrp-art-close:hover{ background:var(--surface-2); }

@media (max-width:760px){
  html.fnrp-active .fnrp-art-overlay{ padding:0; }
  html.fnrp-active .fnrp-art-sheet{ width:100vw; height:100vh; border-radius:0; }
  html.fnrp-active .fnrp-art-close{ inset-inline-end:12px; top:12px; }
}
@media (prefers-reduced-motion: reduce){
  html.fnrp-active .fnrp-art-sheet{ transition:opacity .2s ease; transform:none; }
}

/* =====================================================================
   15b. WATCHLIST TILES + MARKET TABLES  (full redesign)
   ---------------------------------------------------------------------
   The live watchlist renders as a 2-up grid of `.fnrp-tile` tiles, and
   the original tile CSS hard-codes the OLD palette with `!important`
   (e.g. #0b0e16 / #22c993). Those win over a plain token re-colour, so
   here we OVERRIDE them with equally-`!important` rules that carry the
   extra `html.fnrp-active` specificity — turning the terminal grid into
   clean, separated Material chips that match the newsroom watchlist.
   Still 100% presentational: no markup / JS / handlers touched.
   ===================================================================== */

/* ── tile grid container: hairline-separated terminal grid → real gaps ── */
html.fnrp-active .fnrp-w2-col-rows,
html.fnrp-active #fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col-rows,
html.fnrp-active #fs-pairs-body.fnrp-w2-grid .fnrp-w2-col-rows,
html.fnrp-active #fs-gainers-body.fnrp-w2-grid .fnrp-w2-col-rows,
html.fnrp-active #fs-losers-body.fnrp-w2-grid .fnrp-w2-col-rows{
  gap: 9px !important;
  padding: 10px !important;
  background: transparent !important;
}
/* the body shells that paint a slab background behind the grid */
html.fnrp-active #fs-pairs-body.fnrp-w2-tabs,
html.fnrp-active #fs-pairs-body.fnrp-w2-grid,
html.fnrp-active .fs-card-body.fnrp-w2-grid{
  background: transparent !important;
}

/* ── the tile itself → an elevated Material chip ───────────────────────── */
html.fnrp-active .fnrp-tile{
  background: var(--surface-2) !important;
  border: 1px solid var(--hair) !important;
  border-inline-start: 1px solid var(--hair) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--fz-e1) !important;
  padding: 12px 14px 11px !important;
  min-height: 90px !important;
  gap: 2px !important;
  transition: box-shadow var(--med), transform var(--med),
              background var(--med), border-color var(--med) !important;
}
html.fnrp-active .fnrp-tile.fnrp-tile-up,
html.fnrp-active .fnrp-tile.fnrp-tile-dn,
html.fnrp-active .fnrp-tile.fnrp-tile-flat{
  border-inline-start-color: var(--hair) !important;  /* drop the harsh accent edge */
}
html.fnrp-active .fnrp-tile:hover{
  background: var(--surface) !important;
  box-shadow: var(--fz-e3) !important;
  transform: translateY(-2px) !important;
  border-color: transparent !important;
}
html.fnrp-active .fnrp-tile.is-active,
html.fnrp-active .fnrp-tile.is-expanded{
  background: var(--surface) !important;
  border-color: var(--accent) !important;
  box-shadow: var(--fz-e3) !important;
}

/* sparkline background: keep, but calmer so text stays crisp */
html.fnrp-active .fnrp-tile-spark-bg svg{ opacity: .50 !important; }
html.fnrp-active .fnrp-tile:hover .fnrp-tile-spark-bg svg{ opacity: .72 !important; }

/* tile text → token colours */
html.fnrp-active .fnrp-tile-sym  { color: var(--text) !important; font-size: 13px !important; }
html.fnrp-active .fnrp-tile-name { color: var(--muted) !important; font-size: 10.5px !important; }
html.fnrp-active .fnrp-tile-price{ color: var(--text) !important; font-size: 14.5px !important; }

/* % pill → tonal Material chip (soft container) */
html.fnrp-active .fnrp-tile-pill{
  border-radius: var(--fz-r-full) !important;
  padding: 2px 9px !important;
  font-weight: 800 !important;
  font-size: 10px !important;
}
html.fnrp-active .fnrp-tile-pill.fnrp-tile-up  { color: var(--up)   !important; background: var(--fz-bull-soft) !important; }
html.fnrp-active .fnrp-tile-pill.fnrp-tile-dn  { color: var(--down) !important; background: var(--fz-bear-soft) !important; }
html.fnrp-active .fnrp-tile-pill.fnrp-tile-flat{ color: var(--muted)!important; background: var(--surface-3) !important; }

/* price flash keeps a token end-colour (was hard-coded #dce4f0) */
@keyframes fzTileFlashUp  { 0%{ color:var(--up);   } 100%{ color:var(--text); } }
@keyframes fzTileFlashDown{ 0%{ color:var(--down); } 100%{ color:var(--text); } }
html.fnrp-active .fnrp-tile.flash-up   .fnrp-tile-price{ animation: fzTileFlashUp   .55s ease-out !important; }
html.fnrp-active .fnrp-tile.flash-down .fnrp-tile-price{ animation: fzTileFlashDown .55s ease-out !important; }

/* expanded tile keeps spanning the full width of the grid */
html.fnrp-active .fnrp-tile.is-expanded{ grid-column: 1 / -1 !important; }

/* ── expanded detail = the mini "table": stat cells + CTA ──────────────── */
html.fnrp-active .fnrp-mkt-spark-cell{
  background: var(--surface-2) !important;
  border: 1px solid var(--hair) !important;
  border-radius: 10px !important;
}
html.fnrp-active .fnrp-mkt-spark-val{ color: var(--text) !important; }
html.fnrp-active .fnrp-mkt-spark-lbl{ color: var(--muted) !important; }
html.fnrp-active .fnrp-mkt-spark-cta{
  border-radius: var(--radius) !important;
  background: var(--fz-primary-soft) !important;
  border-color: transparent !important;
  font-weight: 700 !important;
}
html.fnrp-active .fnrp-mkt-spark-cta:hover{ background: var(--accent) !important; color:#fff !important; }

/* ── column header / search / "+ N more" ───────────────────────────────── */
html.fnrp-active .fnrp-w2-col-hd,
html.fnrp-active .fnrp-w2-col-label{
  font-family: var(--mono) !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}
html.fnrp-active .fnrp-w2-col-search-input,
html.fnrp-active .fnrp-w2-search-input{
  background: var(--surface-2) !important;
  border: 1px solid var(--hair) !important;
  border-radius: var(--fz-r-full) !important;
  color: var(--text) !important;
}
html.fnrp-active .fnrp-w2-col-search-input:focus,
html.fnrp-active .fnrp-w2-search-input:focus{
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--fz-primary-soft) !important;
}
html.fnrp-active .fnrp-w2-col-more{ color: var(--accent) !important; }
html.fnrp-active .fnrp-w2-col-more:hover{ background: var(--accent-bg) !important; }

/* ── standalone market-row tables (where used) → Material rows ─────────── */
html.fnrp-active .fnrp-mkt-row{ border-bottom: 1px solid var(--hair) !important; }
html.fnrp-active .fnrp-mkt-row-main:hover{ background: var(--surface-2) !important; }
html.fnrp-active .fnrp-mkt-row-code { color: var(--text) !important; }
html.fnrp-active .fnrp-mkt-row-name { color: var(--muted) !important; }
html.fnrp-active .fnrp-mkt-row-price{ color: var(--text) !important; }

/* ── mobile watchlist strip pairs (`.fs-pair`) → tonal chips ──────────── */
html.fnrp-active .fs-pairs--mobile .fs-pair{
  background: var(--surface-2) !important;
  border: 1px solid var(--hair) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--fz-e1) !important;
}
html.fnrp-active .fs-pairs--mobile .fs-pair:hover{ box-shadow: var(--fz-e2) !important; }
html.fnrp-active .fs-pairs--mobile .fs-pair.active{
  background: var(--surface) !important;
  border-color: var(--accent) !important;
  box-shadow: var(--fz-e2) !important;
}
html.fnrp-active .fs-pair-price{ color: var(--text) !important; }
html.fnrp-active .fs-pair-name { color: var(--muted) !important; }

/* =====================================================================
   R3 — FEEDBACK PASS  (corners · calendar light · live+crypto bars ·
   market-pulse gauge · gainers/losers · velocity streaks)
   All still purely presentational + scoped; where the base uses
   `#fnrp-root` or `!important`, we match/beat it with the extra
   `html.fnrp-active` specificity (and `!important` where needed).
   ===================================================================== */

/* ── R3.1  News-card corners: clip the accent rail to the rounded shape ── */
html.fnrp-active .fn-item{ overflow: hidden !important; }
html.fnrp-active .fn-item::before{ top:14px; bottom:14px; }

/* ── R3.2  ECONOMIC CALENDAR (v2 strip) — fix the broken light theme ───── */
/* root cause: the strip painted a hard-coded dark navy (#0e1320) gradient
   that never switched with the theme, and the accent was still teal. */
html.fnrp-active .fn-ec2-strip{
  background: var(--surface) !important;
  border: 1px solid var(--hair) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--fz-e1) !important;
}
html.fnrp-active .fn-ec2-id{ border-inline-end-color: var(--hair) !important; }
html.fnrp-active .fn-ec2-day{
  background: var(--surface-2) !important;
  border: 1px solid var(--hair) !important;
  border-radius: var(--radius) !important;
  transition: box-shadow var(--med), border-color var(--med), transform var(--fast) !important;
}
html.fnrp-active .fn-ec2-day:hover{
  border-color: var(--border-2) !important;
  box-shadow: var(--fz-e1) !important;
  transform: translateY(-1px) !important;
}
html.fnrp-active .fn-ec2-day.heavy{ background: var(--surface-2) !important; }
html.fnrp-active .fn-ec2-day.today{
  background: var(--accent-bg) !important;
  border-color: var(--accent) !important;
}
html.fnrp-active .fn-ec2-day.today .fn-ec2-day-num,
html.fnrp-active .fn-ec2-day.today .fn-ec2-day-dow{ color: var(--accent) !important; }
/* blue accent everywhere (was hard-coded teal #4dd4ac) */
html.fnrp-active .fn-ec2-glyph{
  background: var(--fz-primary-soft) !important;
  border-color: transparent !important;
  color: var(--accent) !important;
}
html.fnrp-active .fn-ec2-live{ background: var(--accent) !important; }
html.fnrp-active .fn-ec2-nx-badge,
html.fnrp-active .fn-ec2-nx-cd{ color: var(--accent) !important; }
html.fnrp-active .fn-ec2-nx-cd .d{ background: var(--accent) !important; }
html.fnrp-active .fn-ec2-nx-cur{
  background: var(--surface-2) !important;
  border-radius: var(--fz-r-full) !important;
}

/* ── R3.3  LIVE ribbon + CRYPTO strip → contained rounded ticker cards ─── */
/* match the femto home-page ticker: a rounded, bordered bar with a solid
   label pill on the leading edge and a clean masked scroll. */
html.fnrp-active .fb-ribbon,
html.fnrp-active .fp-strip{
  height: 46px !important;
  margin: 12px 16px !important;
  border: 1px solid var(--hair) !important;
  border-inline-start: 1px solid var(--hair) !important;
  border-radius: var(--fz-r-full) !important;
  background: var(--surface) !important;
  box-shadow: var(--fz-e1) !important;
  overflow: hidden !important;
}
/* LIVE label → solid contrast pill with a pulsing rose dot (home-page style) */
html.fnrp-active .fb-label{
  background: var(--text) !important;
  color: var(--surface) !important;
  border: 0 !important;
  border-inline-end: 0 !important;
  padding: 0 18px !important;
  font-weight: 800 !important;
  letter-spacing: .18em !important;
}
html.fnrp-active .fb-label::before{ background: var(--down) !important; box-shadow: 0 0 8px var(--down-glow) !important; }
/* crypto strip: surface the hidden MARKETS label as a matching pill, and
   move the edge-fade to the scrolling track so the pill stays crisp. */
html.fnrp-active .fp-strip{ -webkit-mask-image:none !important; mask-image:none !important; }
html.fnrp-active .fp-strip-label{
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 0 18px !important;
  background: var(--text) !important;
  color: var(--surface) !important;
  font-family: var(--mono) !important;
  font-weight: 800 !important;
  font-size: 9.5px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
html.fnrp-active .fp-strip-track{
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent) !important;
          mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent) !important;
}
html.fnrp-rtl.fnrp-active .fp-strip-track{
  -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 44px), transparent) !important;
          mask-image: linear-gradient(270deg, #000 calc(100% - 44px), transparent) !important;
}
/* crypto change cells → tonal pills */
html.fnrp-active .fp-chg{ border-radius: var(--fz-r-full) !important; padding: 2px 8px !important; font-weight: 700 !important; }
html.fnrp-active .fp-chg.up  { color: var(--up)   !important; background: var(--fz-bull-soft) !important; }
html.fnrp-active .fp-chg.down{ color: var(--down) !important; background: var(--fz-bear-soft) !important; }

/* ── R3.4  MARKET-PULSE gauge (Fear & Greed) — give it real presence ───── */
html.fnrp-active .fs-mp-tab{ border-radius: var(--fz-r-full) !important; }
html.fnrp-active .fs-mp-tab.is-active{
  background: var(--accent) !important;
  color: #fff !important;
  border-color: transparent !important;
}
html.fnrp-active[data-fnrp-theme="dark"] .fs-mp-tab.is-active{ color:#0B1B36 !important; }
html.fnrp-active .fs-mp-value{ font-size: 40px !important; letter-spacing: -.02em !important; }
html.fnrp-active .fs-mp-label{ font-size: 14px !important; font-weight: 800 !important; }
html.fnrp-active .fs-mp-needle{ stroke: var(--text) !important; stroke-width: 3.5 !important; }
html.fnrp-active .fs-mp-hub{ fill: var(--accent) !important; stroke: var(--surface) !important; }
html.fnrp-active .fs-mp-bar{ border-radius: var(--fz-r-full) !important; opacity: 1 !important; }
html.fnrp-active .fs-mp-coin{ border-radius: var(--radius) !important; }
html.fnrp-active .fs-mp-coin:hover{ background: var(--surface-2) !important; }

/* ── R3.5  TOP GAINERS / LOSERS lanes — rounder, livelier, on-brand ────── */
html.fnrp-active #fnrp-root .fnrp-mv2-lane{
  border-radius: var(--radius) !important;
  transition: background var(--fast), box-shadow var(--med) !important;
}
html.fnrp-active #fnrp-root .fnrp-mv2-lane:hover{
  background: var(--surface-2) !important;
  box-shadow: var(--fz-e1) !important;
}
html.fnrp-active #fnrp-root .fnrp-mv2-track{
  height: 10px !important;
  border-radius: var(--fz-r-full) !important;
  background: var(--surface-2) !important;
}
html.fnrp-active #fnrp-root .fnrp-mv2-fill{
  border-radius: var(--fz-r-full) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05) !important;
}
html.fnrp-active #fnrp-root .fnrp-mv2-lane.is-up   .fnrp-mv2-fill{ background: linear-gradient(90deg, var(--fz-bull-soft), var(--up)) !important; }
html.fnrp-active #fnrp-root .fnrp-mv2-lane.is-down .fnrp-mv2-fill{ background: linear-gradient(90deg, var(--fz-bear-soft), var(--down)) !important; }
html.fnrp-rtl.fnrp-active #fnrp-root .fnrp-mv2-lane.is-up   .fnrp-mv2-fill{ background: linear-gradient(270deg, var(--fz-bull-soft), var(--up)) !important; }
html.fnrp-rtl.fnrp-active #fnrp-root .fnrp-mv2-lane.is-down .fnrp-mv2-fill{ background: linear-gradient(270deg, var(--fz-bear-soft), var(--down)) !important; }
html.fnrp-active #fnrp-root .fnrp-mv2-rank{
  display: grid !important;
  place-items: center !important;
  width: 16px !important; height: 16px !important;
  border-radius: 50% !important;
  background: var(--surface-2) !important;
  color: var(--muted) !important;
  font-size: 9px !important;
}
/* live "sheen" sweep across the bar on hover → reads as real-time */
html.fnrp-active #fnrp-root .fnrp-mv2-fill::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: translateX(-120%);
}
html.fnrp-active #fnrp-root .fnrp-mv2-lane:hover .fnrp-mv2-fill::after{ animation: fzSheen 1.0s ease-out; }
@keyframes fzSheen{ to{ transform: translateX(160%); } }
@media (prefers-reduced-motion: reduce){
  html.fnrp-active #fnrp-root .fnrp-mv2-lane:hover .fnrp-mv2-fill::after{ animation: none; }
}

/* ── R3.6  VELOCITY STREAKS — ambient comet trails (the "speed" motif) ──── */
/* Injected by the companion JS into a single #fz-velocity layer behind the
   plugin content. Calm by design: faint, slow, paused for reduced-motion. */
html.fnrp-active{ --fz-vc-tail: rgba(138,180,248,.28); --fz-vc-body: rgba(138,180,248,.80); --fz-vc-head: rgba(191,219,254,1); }
html.fnrp-active[data-fnrp-theme="light"]{ --fz-vc-tail: rgba(26,115,232,.12); --fz-vc-body: rgba(26,115,232,.45); --fz-vc-head: rgba(23,99,201,.85); }
html.fnrp-active #fz-velocity{
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  contain: strict;
}
html.fnrp-active #fnrp-root{ position: relative; z-index: 1; }
html.fnrp-active .fz-streak{
  position: absolute; height: 2px; border-radius: 999px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--fz-vc-tail) 30%, var(--fz-vc-body) 78%, var(--fz-vc-head) 96%, transparent 100%);
}
html.fnrp-active .fz-streak::after{
  content:""; position:absolute; top:50%; inset-inline-end:2%;
  width:5px; height:5px; border-radius:999px; transform:translateY(-50%);
  background: var(--fz-vc-head); box-shadow: 0 0 12px 2px var(--fz-vc-body);
}
html.fnrp-active .fz-streak--still{ transform: rotate(var(--tilt,-14deg)); opacity: var(--op,.22); }
html.fnrp-active .fz-streak--move{ animation: fzStreakFly var(--dur,16s) linear var(--delay,0s) infinite; opacity:0; }
@keyframes fzStreakFly{
  0%   { transform: translateX(-35vw) rotate(var(--tilt,-14deg)); opacity:0; }
  8%   { opacity:1; }
  85%  { opacity:1; }
  100% { transform: translateX(135vw) rotate(var(--tilt,-14deg)); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  html.fnrp-active .fz-streak--move{ display:none !important; }
}

/* =====================================================================
   16. MATERIAL RIPPLE (curated small controls only)
   The companion JS only APPENDS a visual span on pointerdown — it never
   preventDefaults / stopsPropagation, so it can't touch any behaviour.
   ===================================================================== */
html.fnrp-active .ff-seg-btn,
html.fnrp-active .ff-chip,
html.fnrp-active .fnrp-w2-tab,
html.fnrp-active .fh-theme-btn,
html.fnrp-active .fh-lang-btn,
html.fnrp-active .fnrp-mkt-pagebtn,
html.fnrp-active .fz-ripple{
  position: relative;
  overflow: hidden;
}
html.fnrp-active .fz-rp{
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  pointer-events: none;
  background: currentColor;
  opacity: .18;
  animation: fzrp .55s cubic-bezier(0,0,0,1) forwards;
}
@keyframes fzrp{ to{ transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce){ html.fnrp-active .fz-rp{ display:none; } }

/* =====================================================================
   17. MOTION
   ===================================================================== */
@keyframes fzArrive{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  html.fnrp-active .fn-item{ animation:none; transform:none; }
  html.fnrp-active .fn-item:hover,
  html.fnrp-active .fnrp-tile:hover{ transform:none; }
}