/* ==========================================================================
   FinView Pro shell — v2.0.0
   --------------------------------------------------------------------------
   Loaded LAST, after unify.css. Turns the scrolling document into a fixed
   viewport terminal: the page never scrolls, every panel scrolls internally.

   Register: pro analytics. Dense but breathing — 13px base, clear panel
   cards, deliberate whitespace between groups. Light-first; the dark theme
   inherits through the same tokens.

   Nothing here depends on markup being rewritten. It styles the class names
   the pages already ship (.app-shell, .panel, .data-table, .market-kpi…) so
   the JS modules that fill elements by id keep working untouched.
   ========================================================================== */

:root {
  --fvp-bg:            #F4F6FA;
  --fvp-panel:         #FFFFFF;
  --fvp-panel-head:    #F7F9FC;
  --fvp-line:          #DDE3EC;
  --fvp-line-soft:     #EFF3F8;
  --fvp-line-hair:     #F2F5F9;
  --fvp-ink:           #0B1524;
  --fvp-ink-2:         #33455F;
  --fvp-muted:         #5A6B84;
  /* 4.85:1 on --fvp-panel and 4.60:1 on --fvp-panel-head. This token labels
     every small caption in the system (KPI cells, decision cards, vitals,
     panel notes), so it is load-bearing for accessibility: the previous
     #8492A8 was 3.15:1 and failed on 99 nodes of the home page alone. Stays
     visibly lighter than --fvp-muted (5.42:1), preserving the
     faint / muted / ink hierarchy. Do not lighten without re-measuring
     against BOTH panel backgrounds. */
  --fvp-faint:         #65728A;
  --fvp-accent:        #0E7490;
  --fvp-accent-soft:   #E1F5FA;
  --fvp-accent-line:   #9CDDEC;
  --fvp-up:            #067647;
  --fvp-up-soft:       #E4F4EE;
  --fvp-down:          #C0334A;
  --fvp-down-soft:     #FBEBED;
  --fvp-warn:          #B45309;
  --fvp-warn-soft:     #FEF4E6;

  --fvp-chrome:        #0B1524;
  --fvp-chrome-2:      #0F1D33;
  --fvp-chrome-3:      #152744;
  --fvp-chrome-line:   #1C2C46;
  --fvp-chrome-ink:    #E2E9F4;
  /* 4.86:1 on the worst chrome background (--fvp-chrome-3). The old #7788A8
     cleared the header at 5.12:1 but fell to 4.18:1 inside the raised chrome
     chips, where the connection badge label lives. Measure against chrome-3,
     not chrome. */
  --fvp-chrome-muted:  #8394B1;
  /* 4.83:1 on --fvp-chrome. Dimmest chrome ink that still clears small-text
     contrast — the old #45587A was 2.55:1. Used for the rail wordmark and the
     status-bar brand. */
  --fvp-chrome-faint:  #7284A3;
  --fvp-cyan:          #06B6D4;

  --fvp-gap:           9px;
  --fvp-radius:        8px;
  --fvp-rail:          56px;
  --fvp-header-h:      46px;
  --fvp-ticker-h:      28px;
  --fvp-tabs-h:        34px;
  --fvp-status-h:      23px;
}

html[data-theme="dark"], html.dark, body.dark {
  --fvp-bg:          #0A1220;
  --fvp-panel:       #101B2D;
  --fvp-panel-head:  #14203A;
  --fvp-line:        #22314C;
  --fvp-line-soft:   #1B2740;
  --fvp-line-hair:   #172236;
  --fvp-ink:         #E7EDF7;
  --fvp-ink-2:       #C3D0E3;
  --fvp-muted:       #9AACC6;
  /* 5.57:1 on --fvp-panel, 5.23:1 on --fvp-panel-head. The old #74869F cleared
     the panel at 4.65:1 but fell to 4.36:1 on the panel header — which is
     where most faint labels actually sit. Measure against the header, not the
     panel. */
  --fvp-faint:       #8194AE;
  --fvp-accent:      #22B8CF;
  --fvp-accent-soft: #10303C;
  --fvp-accent-line: #1E5567;
  --fvp-up:          #34D399;
  --fvp-up-soft:     #0C2C22;
  --fvp-down:        #F87171;
  --fvp-down-soft:   #351A1E;
  --fvp-warn:        #FBBF24;
  --fvp-warn-soft:   #33260C;
}

/* ── 1. Fixed viewport shell ─────────────────────────────────────────────── */

/* Seven legacy sheets already answer these questions. This layer is the last
   word on geometry, so the geometry declarations carry !important — colour and
   type do not, and stay overridable per page. */

html, body { height: 100%; }
body.hub-root,
body.fv-pro-body {
  margin: 0 !important;
  overflow: hidden !important;
  background: var(--fvp-bg);
  color: var(--fvp-ink);
  font-size: 13px;
}

.fv-pro {
  height: 100dvh !important;
  max-height: 100dvh !important;
  display: grid !important;
  grid-template-columns: var(--fvp-rail) minmax(0, 1fr) !important;
  grid-template-rows: 100% !important;
  overflow: hidden !important;
  gap: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.fv-pro .main-content {
  display: grid !important;
  grid-template-rows:
    var(--fvp-header-h)
    var(--fvp-ticker-h)
    auto
    minmax(0, 1fr)
    var(--fvp-status-h) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: 100% !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}

/* The scroll owner is each panel, never the page. */
.fv-pro .section-stack {
  min-height: 0 !important;
  overflow: hidden !important;
  padding: var(--fvp-gap) !important;
  display: grid !important;
  gap: var(--fvp-gap) !important;
  align-content: stretch !important;
  margin: 0 !important;
}
.fv-pro .section-stack.hidden { display: none !important; }

/* ── 2. Icon rail ────────────────────────────────────────────────────────── */

.fv-pro .sidebar {
  background: var(--fvp-chrome);
  border-inline-end: 1px solid var(--fvp-chrome-line);
  position: static !important;
  inset: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 9px 0 !important;
  gap: 2px !important;
  overflow: hidden !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  transform: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.fv-pro .sidebar .fv-brand__text { display: none; }
.fv-pro .sidebar .brand-mark {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  color: var(--fvp-chrome-ink);
  margin-bottom: 9px;
  padding: 0;
  border: 0;
  background: none;
}
.fv-pro .sidebar .brand-mark svg { width: 24px; height: 24px; }
.fv-pro .side-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
}
.fv-pro .side-nav .nav-item {
  width: 40px; height: 36px;
  display: grid; place-items: center;
  border-radius: 6px;
  color: var(--fvp-chrome-muted);
  padding: 0;
  border: 0;
  font-size: 14px;
  text-decoration: none;
}
.fv-pro .side-nav .nav-item > span:not(.nav-icon) {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.fv-pro .side-nav .nav-item:hover { background: var(--fvp-chrome-3); color: var(--fvp-chrome-ink); }
.fv-pro .side-nav .nav-item.active {
  background: var(--fvp-chrome-3);
  color: var(--fvp-cyan);
}
.fv-pro .sidebar::after {
  content: "FV PRO";
  margin-top: auto;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--fvp-chrome-faint);
  writing-mode: vertical-rl;
}

/* ── 3. Header ───────────────────────────────────────────────────────────── */

.fv-pro .topbar {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 0 13px !important;
  background: var(--fvp-chrome);
  border-bottom: 1px solid var(--fvp-chrome-line);
  border-radius: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  height: var(--fvp-header-h) !important;
  position: static !important;
  /* Deliberately NOT `overflow: hidden`. The header hosts absolutely
     positioned dropdowns (#alertDropdown is 380×225 and hangs 219px below the
     band) whose containing block lives inside it, so any clip here hides them
     entirely. Width is handled by the actions group shrinking plus the
     drop-out thresholds below — the clip is not needed for that. */
}
.fv-pro .topbar .title-wrap {
  flex: none !important;
  min-width: 0;
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 0 !important;
  margin: 0 !important;
}
.fv-pro .topbar .title-wrap h1 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  /* unify.css leaves this at 1.2, which clips Persian ink against the
     header's own overflow:hidden. Vazirmatn needs ~1.6em to clear. */
  line-height: 1.62 !important;
  color: #fff;
  white-space: nowrap;
}
.fv-pro .topbar .title-wrap p { display: none; }
.fv-pro .topbar .title-wrap > div::after {
  content: "TERMINAL";
  display: block;
  font-size: 9px;
  letter-spacing: 0.15em;
  font-weight: 500;
  color: var(--fvp-chrome-muted);
  margin-top: -3px;
}
.fv-pro .connection-badge {
  height: 23px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  gap: 5px;
  background: var(--fvp-chrome-3);
  border: 1px solid var(--fvp-chrome-line);
  color: var(--fvp-chrome-muted);
  flex: none;
}
.fv-pro .connection-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fv-pro .connection-badge.live,
.fv-pro .connection-badge.ok { background: #0B2C22; border-color: #14563F; color: #34D399; }
.fv-pro .connection-badge.stale { background: #33260C; border-color: #6B4A0A; color: #FBBF24; }
.fv-pro .connection-badge.offline { background: #351A1E; border-color: #6E2028; color: #F87171; }

.fv-pro .global-search {
  flex: 1 1 auto !important;
  min-width: 110px !important;
  max-width: 380px !important;
  position: relative !important;
  height: 29px !important;
}
.fv-pro .global-search input {
  height: 29px !important;
  min-height: 0 !important;
  width: 100% !important;
  background: var(--fvp-chrome-2);
  border: 1px solid #21375A;
  border-radius: 6px;
  color: var(--fvp-chrome-ink);
  font-size: 12px !important;
  padding-inline: 30px 58px !important;
}
.fv-pro .global-search input::placeholder { color: var(--fvp-chrome-muted); }
.fv-pro .global-search input:focus { border-color: #2E4C78; outline: none; }
.fv-pro .global-search-icon { color: var(--fvp-chrome-muted); inset-inline-start: 10px; }
.fv-pro .global-search::after {
  content: "Ctrl K";
  position: absolute;
  inset-inline-end: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  background: #1A2B48;
  border: 1px solid #2A426C;
  border-radius: 3px;
  padding: 2px 5px;
  color: #A8BAD4;
  pointer-events: none;
}

/* The actions group must be allowed to shrink. Left at `flex: none` it grows
   past the header's width, crushes the search field to zero and pushes itself
   off the edge — so it shrinks, and the least load-bearing items drop out
   first (see the priority rules below). */
.fv-pro .topbar-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.fv-pro .topbar-actions > * { flex: none; }

/* Header priority as width runs out: the clock goes first (the status bar
   carries it), then the user's name, then the search field — Ctrl+K still
   opens the palette, and below 1100px the mobile nav takes over anyway. */
@media (max-width: 1480px) {
  .fv-pro .clock-box { display: none !important; }
}
@media (max-width: 1320px) {
  .fv-pro .account-chip .who { display: none !important; }
}
@media (max-width: 1180px) {
  .fv-pro .global-search { display: none !important; }
}
.fv-pro .alert-menu { display: flex; align-items: center; }
.fv-pro .clock-box {
  text-align: center;
  line-height: 1.15;
  padding-inline: 8px;
  border-inline: 1px solid var(--fvp-chrome-line);
  background: none;
  border-radius: 0;
}
.fv-pro .clock-box strong { display: block; color: var(--fvp-chrome-ink); font-size: 11.5px; font-weight: 600; }
.fv-pro .clock-box span { display: block; color: var(--fvp-chrome-muted); font-size: 10px; }
.fv-pro .account-chip {
  height: 27px !important;
  min-height: 0 !important;
  /* Legacy pins this to a 190px block; once the name is hidden that is an
     empty box, so it shrinks to whatever it is actually showing. */
  width: auto !important;
  min-width: 0 !important;
  max-width: 190px !important;
  padding: 0 8px !important;
  border-radius: 5px !important;
  background: var(--fvp-chrome-3);
  border: 1px solid var(--fvp-chrome-line);
  gap: 6px !important;
  overflow: hidden;
}
.fv-pro .account-chip .who { min-width: 0; overflow: hidden; }
.fv-pro .account-chip .who strong { color: var(--fvp-chrome-ink); font-size: 11px; }
.fv-pro .account-chip .who span { display: none; }
.fv-pro .account-chip .role-pill {
  font-size: 10px;
  font-weight: 600;
  color: #04121A;
  background: var(--fvp-cyan);
  border: 0;
  border-radius: 3px;
  padding: 1px 5px;
}
.fv-pro .account-chevron { display: none; }
/* Legacy sheets size every header control as a 44px touch target. In a
   46px terminal header that overflows the band, so the whole group is
   pinned to 27px. */
.fv-pro .topbar .icon-button,
.fv-pro .topbar .alert-button {
  width: 27px !important;
  height: 27px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--fvp-chrome-line);
  background: var(--fvp-chrome-3);
  border-radius: 5px;
  color: #A8BAD4;
}
.fv-pro .topbar .icon-button svg,
.fv-pro .topbar .alert-button svg { width: 14px; height: 14px; }
.fv-pro .topbar .icon-button:hover,
.fv-pro .topbar .alert-button:hover { background: #1D3355; color: #fff; }
.fv-pro .topbar .primary-button,
.fv-pro .topbar .secondary-button,
.fv-pro .topbar .primary-button.compact,
.fv-pro .topbar-actions > button:not(.icon-button):not(.account-chip) {
  height: 27px !important;
  min-height: 0 !important;
  padding: 0 10px !important;
  font-size: 11px !important;
  border-radius: 5px !important;
  line-height: 1 !important;
}
.fv-pro .topbar .alert-menu { height: 27px !important; min-height: 0 !important; }
.fv-pro .announcement-banner { display: none !important; }
.fv-pro .page-footer { display: none; }

/* ── 4. LIVE ticker strip ────────────────────────────────────────────────── */

.fvp-ticker {
  display: flex;
  align-items: stretch;
  background: var(--fvp-chrome-2);
  border-bottom: 1px solid var(--fvp-chrome-line);
  overflow-x: auto;
  overflow-y: hidden;
  min-width: 0;
  scrollbar-width: none;
}
.fvp-ticker::-webkit-scrollbar { display: none; }
.fvp-ticker__label {
  flex: none;
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  color: var(--fvp-cyan);
  border-inline-end: 1px solid var(--fvp-chrome-line);
}
.fvp-ticker__item {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  border-inline-end: 1px solid rgba(22, 39, 67, 0.44);
  white-space: nowrap;
}
.fvp-ticker__name { color: #9AACC6; font-size: 10.5px; }
.fvp-ticker__value { color: #EAF0F8; font-size: 11px; font-weight: 600; }
.fvp-ticker__chg { font-size: 10.5px; font-weight: 600; }
/* Scoped with .fv-pro on purpose. The generic `.fv-pro .up/.down` tone helpers
   in section 16 match these same elements at equal specificity and sit later
   in the file, so an unscoped rule here TIES and loses — painting the
   light-theme ink (#067647) on dark navy at 2.97:1. Anything light-on-dark in
   the chrome needs the same treatment. */
.fv-pro .fvp-ticker__chg.up { color: #34D399; }
.fv-pro .fvp-ticker__chg.down { color: #F87171; }
.fv-pro .fvp-ticker__chg.flat { color: #9AACC6; }

/* ── 5. Tab bar + layout presets ─────────────────────────────────────────── */

.fvp-tabbar {
  display: flex;
  align-items: stretch;
  background: var(--fvp-panel);
  border-bottom: 1px solid var(--fvp-line);
  padding-inline: 10px;
  overflow-x: auto;
  min-width: 0;
  height: var(--fvp-tabs-h);
  scrollbar-width: none;
}
.fvp-tabbar::-webkit-scrollbar { display: none; }
.fvp-tab {
  flex: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--fvp-muted);
  padding: 0 13px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.fvp-tab:hover { color: var(--fvp-ink-2); }
.fvp-tab[aria-selected="true"] {
  font-weight: 600;
  color: var(--fvp-accent);
  border-bottom-color: var(--fvp-accent);
}
.fvp-tabbar__spacer { flex: 1; min-width: 10px; }
.fvp-presets { flex: none; display: flex; align-items: center; gap: 5px; }
.fvp-presets__label { font-size: 10px; color: var(--fvp-faint); }
.fvp-preset {
  border: 1px solid var(--fvp-line);
  background: var(--fvp-panel);
  color: var(--fvp-muted);
  cursor: pointer;
  font: inherit;
  font-size: 10.5px;
  font-weight: 500;
  height: 23px;
  padding: 0 9px;
  border-radius: 4px;
  white-space: nowrap;
}
.fvp-preset:hover { border-color: var(--fvp-accent-line); }
.fvp-preset[aria-pressed="true"] {
  background: var(--fvp-accent-soft);
  border-color: var(--fvp-accent-line);
  color: var(--fvp-accent);
}

/* ── 6. Panels ───────────────────────────────────────────────────────────── */

.fv-pro .panel,
.fv-pro .home-section,
.fv-pro article.panel {
  background: var(--fvp-panel);
  border: 1px solid var(--fvp-line);
  border-radius: var(--fvp-radius) !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
  gap: 0 !important;
}
.fv-pro .panel-header,
.fv-pro .home-section-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  flex: none !important;
  padding: 6px 11px !important;
  background: var(--fvp-panel-head);
  border-bottom: 1px solid var(--fvp-line);
  margin: 0 !important;
  min-height: 0 !important;
  border-radius: 0 !important;
}
.fv-pro .panel-header h2,
.fv-pro .home-section-head h2 {
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--fvp-ink);
  line-height: 1.3;
  letter-spacing: 0;
}
.fv-pro .panel-header p,
.fv-pro .home-section-head p {
  margin: 1px 0 0;
  font-size: 10.5px;
  color: var(--fvp-muted);
  line-height: 1.35;
}
.fv-pro .home-eyebrow { display: none; }
.fv-pro .panel-header .home-asof,
.fv-pro .panel-header .muted { font-size: 10px; color: var(--fvp-faint); white-space: nowrap; }

/* The scrolling body of a panel: everything that is not its header. */
.fv-pro .panel > :not(.panel-header):not(.home-section-head) {
  min-height: 0 !important;
  overflow: auto;
  flex: 1 1 auto;
  margin: 0 !important;
}
.fv-pro .panel > .table-scroll { flex: 1 1 auto; }

.fv-pro .panel-actions { display: flex; align-items: center; gap: 6px; flex: none; flex-wrap: nowrap; }
/* Legacy sheets size these for touch; in a terminal header they must be 24px. */
.fv-pro .panel-header .mini-button,
.fv-pro .panel-header .text-button,
.fv-pro .panel-header .icon-button,
.fv-pro .panel-header button,
.fv-pro .panel-header select,
.fv-pro .panel-header input,
.fv-pro .panel-header label,
.fv-pro .panel-actions > * {
  min-height: 0 !important;
  height: 24px !important;
  font-size: 10.5px !important;
  line-height: 1 !important;
}
.fv-pro .panel-header .icon-button {
  width: 24px !important;
  max-width: 24px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  /* Same reason as the symbol hero: these glyphs are stroke:currentColor, so
     without an explicit colour on a light panel they vanish. */
  border: 1px solid var(--fvp-line) !important;
  background: var(--fvp-panel) !important;
  color: var(--fvp-ink-2) !important;
  border-radius: 4px !important;
}
.fv-pro .panel-header .icon-button:hover {
  border-color: var(--fvp-accent-line) !important;
  background: var(--fvp-panel-head) !important;
  color: var(--fvp-accent) !important;
}
.fv-pro .panel-header .icon-button svg { width: 13px !important; height: 13px !important; }
.fv-pro .panel-header .segmented { padding: 2px !important; height: 24px !important; }
.fv-pro .panel-header .segmented button { height: 18px !important; padding: 0 8px !important; }
.fv-pro .panel-header .inline-field,
.fv-pro .panel-header .filter-toggle-control { display: flex; align-items: center; gap: 5px; }
.fv-pro .panel-header .toggle-track { height: 14px !important; }
.fv-pro .mini-button,
.fv-pro .text-button {
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--fvp-line);
  background: var(--fvp-panel);
  border-radius: 4px;
  font: inherit;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--fvp-ink-2);
  cursor: pointer;
}
.fv-pro .mini-button:hover { border-color: var(--fvp-accent-line); background: var(--fvp-panel-head); }
.fv-pro .mini-button.danger { color: var(--fvp-down); }
.fv-pro .primary-button {
  height: 25px;
  padding: 0 12px;
  border: 1px solid var(--fvp-accent);
  background: var(--fvp-accent);
  color: #fff;
  border-radius: 5px;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
}
.fv-pro .primary-button:hover { background: #0B5B70; }
.fv-pro .small-select,
.fv-pro .inline-search,
.fv-pro select,
.fv-pro input[type="search"],
.fv-pro input[type="text"],
.fv-pro input[type="number"] {
  height: 24px;
  border: 1px solid var(--fvp-line);
  border-radius: 4px;
  background: var(--fvp-panel);
  color: var(--fvp-ink);
  font: inherit;
  font-size: 11px;
  padding-inline: 7px;
}

/* ── 7. Dense data tables ────────────────────────────────────────────────── */

.fv-pro .table-scroll { min-height: 0; overflow: auto; }
.fv-pro .data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px !important;
}
.fv-pro .data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--fvp-line-soft);
  text-align: start;
  font-size: 10px !important;
  font-weight: 600;
  color: var(--fvp-muted);
  padding: 6px 10px !important;
  border-bottom: 1px solid #C6D0DE;
  white-space: nowrap;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.35 !important;
}
.fv-pro .data-table tbody td {
  padding: 4px 10px !important;
  border-bottom: 1px solid var(--fvp-line-hair);
  color: var(--fvp-ink-2);
  white-space: nowrap;
  font-size: 11px !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.45 !important;
}
.fv-pro .data-table tbody tr { height: auto !important; min-height: 0 !important; }
.fv-pro .data-table thead tr { height: auto !important; min-height: 0 !important; }
.fv-pro .data-table thead th > * { min-height: 0 !important; height: auto !important; }
.fv-pro .data-table thead th button,
.fv-pro .data-table thead th .sort-button {
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  border: 0 !important;
  background: none !important;
  color: inherit !important;
}
/* Legacy sheets size table controls for touch; a board row is not a tap target. */
.fv-pro .data-table tbody td > a,
.fv-pro .data-table tbody td > b,
.fv-pro .data-table tbody td > span,
.fv-pro .data-table tbody td > small {
  min-height: 0 !important;
  height: auto !important;
  line-height: inherit !important;
}
.fv-pro .data-table tbody tr:hover td { background: var(--fvp-panel-head); }
.fv-pro .data-table .numeric,
.fv-pro .data-table td.numeric,
.fv-pro .data-table th.numeric { text-align: end; }
.fv-pro .data-table td.numeric,
.fv-pro .data-table .num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.fv-pro .data-table tbody tr[data-fvp-self] td { background: #F0FAFC; }
.fv-pro .loading-cell,
.fv-pro .empty-cell {
  text-align: center;
  color: var(--fvp-faint);
  font-size: 11px;
  padding: 14px 10px;
}
.fv-pro .empty-state {
  display: grid;
  place-items: center;
  min-height: 60px;
  color: var(--fvp-faint);
  font-size: 11px;
  padding: 12px;
}

/* Frozen first column on wide tables. */
.fv-pro .data-table.fvp-freeze thead th:first-child,
.fv-pro .data-table.fvp-freeze tbody td:first-child {
  position: sticky;
  inset-inline-start: 0;
  z-index: 3;
  background: var(--fvp-panel);
}
.fv-pro .data-table.fvp-freeze thead th:first-child { z-index: 4; background: var(--fvp-line-soft); }

/* ── 8. KPI strips ───────────────────────────────────────────────────────── */

.fv-pro .market-overview-kpis,
.fv-pro .kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 0 !important;
  background: var(--fvp-panel);
  border: 1px solid var(--fvp-line);
  border-radius: var(--fvp-radius) !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}
.fv-pro .market-kpi,
.fv-pro .kpi-card {
  padding: var(--fvp-kpi-card-padding, 6px 10px) !important;
  border-inline-start: 1px solid var(--fvp-line-soft) !important;
  border-bottom: 1px solid var(--fvp-line-soft) !important;
  border-block-start: 0 !important;
  border-inline-end: 0 !important;
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-width: 0 !important;
  min-height: var(--fvp-kpi-card-min-height, 0) !important;
  height: auto !important;
  display: block !important;
  gap: 0 !important;
}
.fv-pro .market-kpi > span,
.fv-pro .kpi-card span {
  display: block;
  font-size: 10px;
  color: var(--fvp-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fv-pro .market-kpi > strong,
.fv-pro .kpi-card strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--fvp-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.fv-pro .market-kpi > small,
.fv-pro .kpi-card small {
  font-size: 10px;
  color: var(--fvp-faint);
  font-weight: 500;
  margin-inline-start: 5px;
  font-variant-numeric: tabular-nums;
}
.fv-pro .market-kpi > small.up, .fv-pro .kpi-card small.up { color: var(--fvp-up); }
.fv-pro .market-kpi > small.down, .fv-pro .kpi-card small.down { color: var(--fvp-down); }
.fv-pro .kpi-icon { display: none; }

/* ── 9. Decision strip ──────────────────────────────────────────────────── */

.fv-pro .market-decision-strip {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}
.fv-pro .market-decision-card {
  background: var(--fvp-panel);
  border: 1px solid var(--fvp-line);
  border-inline-start: 3px solid var(--fvp-faint);
  border-radius: 7px !important;
  padding: 7px 11px !important;
  margin: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: block !important;
  box-shadow: none !important;
}
.fv-pro .market-decision-card > span {
  display: block;
  font-size: 10px;
  color: var(--fvp-faint);
}
.fv-pro .market-decision-card > strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--fvp-ink);
}
.fv-pro .market-decision-card > small {
  display: block;
  font-size: 10.5px;
  color: var(--fvp-muted);
  line-height: 1.35;
}
.fv-pro .market-decision-card.up { border-inline-start-color: var(--fvp-up); }
.fv-pro .market-decision-card.up > strong { color: var(--fvp-up); }
.fv-pro .market-decision-card.down { border-inline-start-color: var(--fvp-down); }
.fv-pro .market-decision-card.down > strong { color: var(--fvp-down); }
.fv-pro .market-decision-card.warn { border-inline-start-color: var(--fvp-warn); }
.fv-pro .market-decision-card.warn > strong { color: var(--fvp-warn); }

/* The model read, promoted to a dark card at the end of the strip. */
.fv-pro .market-decision-summary {
  margin: 0;
  background: var(--fvp-chrome);
  border-radius: 7px;
  padding: 7px 11px;
  font-size: 10.5px;
  line-height: 1.5;
  color: #C2CFE3;
  min-width: 0;
  overflow: auto;
}
.fv-pro .market-decision-summary::before {
  content: "خوانش مدل";
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--fvp-cyan);
  margin-bottom: 2px;
}

/* ── 10. Rank lists with conditional data bars ──────────────────────────── */

.fv-pro .market-rank-list { display: block !important; min-height: 0 !important; overflow: auto; padding: 0 !important; }
.fv-pro .market-rank-row,
.fv-pro .market-rank-list > * {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 11px !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--fvp-line-hair) !important;
  border-radius: 0 !important;
  background: none;
  box-shadow: none !important;
  font-size: 11px;
  position: relative;
  min-height: 0 !important;
}
.fv-pro .market-rank-list > *:hover { background: var(--fvp-panel-head); }
.fv-pro .market-rank-list .fvp-bar {
  position: absolute;
  inset-inline-start: 11px;
  inset-block: 2px;
  border-radius: 3px;
  pointer-events: none;
}
.fv-pro .market-rank-list .fvp-bar.up { background: var(--fvp-up-soft); }
.fv-pro .market-rank-list .fvp-bar.down { background: var(--fvp-down-soft); }
.fv-pro .market-rank-list b,
.fv-pro .market-rank-list strong {
  position: relative;
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: end;
}

/* Reusable cell bar: a standalone bar element for rank lists and cards. */
.fvp-cellbar {
  position: relative;
  display: block;
  height: 12px;
  background: var(--fvp-line-soft);
  border-radius: 2px;
  overflow: hidden;
  min-width: 36px;
}
.fvp-cellbar > i {
  position: absolute;
  inset-block: 1px;
  inset-inline-start: 0;
  border-radius: 2px;
  display: block;
  background: var(--fvp-accent);
}
.fvp-cellbar.diverging > i.up { background: var(--fvp-up); }
.fvp-cellbar.diverging > i.down { background: var(--fvp-down); }
.fvp-cellbar.diverging::before {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block: 0;
  width: 1px;
  background: #C6D0DE;
}

/* In-table data bars: a tinted layer BEHIND the number, so a bar never costs
   a row any height. The cell isolates its own stacking context so the bar can
   sit at z-index -1 and stay behind bare text nodes, which cannot be raised. */
.fv-pro td.fvp-barcell { position: relative; isolation: isolate; }
.fv-pro td.fvp-barcell > .fvp-rowbar {
  position: absolute;
  inset-block: 2px;
  inset-inline-start: 0;
  display: block;
  border-radius: 2px;
  pointer-events: none;
  z-index: -1;
}
.fv-pro td.fvp-barcell > .fvp-rowbar.up { background: var(--fvp-up-soft); }
.fv-pro td.fvp-barcell > .fvp-rowbar.down { background: var(--fvp-down-soft); }
.fv-pro td.fvp-barcell > .fvp-rowbar.flat { background: var(--fvp-line-soft); }
.fv-pro td.fvp-barcell--diverging::before {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block: 3px;
  width: 1px;
  background: #C6D0DE;
  z-index: -1;
}

/* ── 11. Industry heatmap ────────────────────────────────────────────────── */

.fvp-heat {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fvp-heat__row { display: flex; gap: 4px; flex: 1; min-height: 48px; }
.fvp-heat__cell {
  min-width: 0;
  /* Proportional flex bases mean the smallest industries land at ~14px in a
     600px panel, which cannot show a number at any font size. A floor keeps
     every cell readable; the area ordering still reads correctly. */
  min-width: 62px;
  container-type: inline-size;
  border-radius: 4px;
  padding: 5px 7px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: context-menu;
  overflow: hidden;
  border: 0;
  font: inherit;
  text-align: start;
}
/* Both children are fixed-size: without this the smallest cells in a row
   squeeze the name to zero height and the label disappears entirely. */
.fvp-heat__name, .fvp-heat__foot { flex: none; }
.fvp-heat__name {
  font-size: 10.5px;
  font-weight: 600;
  /* Vazirmatn's Persian ink box is ~1.6em: a short line box shaves ink top and
     bottom, eating the dots that separate ب/پ/ت/ث and the ی/ز descenders.
     Note `overflow-x: hidden` forces overflow-y to compute as `auto`, so the
     line box — not the overflow value — is what has to clear the ink. */
  line-height: 1.68;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fvp-heat__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
}
.fvp-heat__ret {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  /* Without this a narrow cell wraps the number to one glyph per line and the
     foot grows past the cell, where the cell's own overflow cuts it. */
  white-space: nowrap;
}
.fvp-heat__val {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* In a tight cell the return is what matters; the trade value is already
   encoded in the cell's area. */
@container (max-width: 104px) {
  .fvp-heat__val { display: none; }
}
.fvp-heat__scale { display: flex; align-items: center; gap: 3px; flex: none; }
.fvp-heat__scale i { width: 12px; height: 9px; display: block; }
.fvp-heat__scale span { font-size: 10px; color: var(--fvp-faint); font-variant-numeric: tabular-nums; }

/* ── 12. Sparklines ─────────────────────────────────────────────────────── */

.fvp-spark { display: block; overflow: visible; }
.fvp-spark path { fill: none; stroke-width: 1.4; stroke-linejoin: round; }
.fvp-spark path.up { stroke: var(--fvp-up); }
.fvp-spark path.down { stroke: var(--fvp-down); }
.fvp-spark path.flat { stroke: var(--fvp-faint); }
.fvp-spark path.area { stroke: none; }
.fvp-spark path.area.up { fill: rgba(6, 118, 71, 0.10); }
.fvp-spark path.area.down { fill: rgba(192, 51, 74, 0.10); }

/* ── 13. Status bar ─────────────────────────────────────────────────────── */

.fvp-status {
  display: flex;
  align-items: center;
  background: var(--fvp-chrome);
  border-top: 1px solid var(--fvp-chrome-line);
  padding-inline: 12px;
  overflow: hidden;
  height: var(--fvp-status-h);
}
.fvp-status__item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-inline-end: 13px;
  margin-inline-end: 13px;
  border-inline-end: 1px solid var(--fvp-chrome-line);
  font-size: 10px;
  color: var(--fvp-chrome-muted);
  white-space: nowrap;
}
.fvp-status__dot { width: 5px; height: 5px; border-radius: 50%; display: block; background: var(--fvp-chrome-muted); }
.fvp-status__dot.up { background: #34D399; }
.fvp-status__dot.warn { background: #FBBF24; }
.fvp-status__dot.down { background: #F87171; }
.fvp-status__value { color: #C2CFE3; font-weight: 600; font-variant-numeric: tabular-nums; }
.fvp-status__spacer { flex: 1; }
.fvp-status__brand { font-size: 9.5px; color: var(--fvp-chrome-faint); white-space: nowrap; }

/* ── 14. Command palette ────────────────────────────────────────────────── */

.fvp-palette-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 21, 36, 0.45);
  z-index: 90;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 11vh;
}
.fvp-palette-backdrop[hidden] { display: none; }
.fvp-palette {
  width: min(620px, 92vw);
  background: var(--fvp-panel);
  border: 1px solid #C6D0DE;
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(11, 21, 36, 0.28);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}
.fvp-palette__head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--fvp-line);
}
.fvp-palette__head > span { font-size: 15px; color: var(--fvp-faint); }
.fvp-palette__head input {
  flex: 1;
  border: 0;
  outline: none;
  font: inherit;
  font-size: 14px;
  color: var(--fvp-ink);
  background: transparent;
  height: auto;
  padding: 0;
}
.fvp-palette kbd {
  font: inherit;
  font-size: 10px;
  background: var(--fvp-line-soft);
  border: 1px solid var(--fvp-line);
  border-radius: 3px;
  padding: 2px 6px;
  color: var(--fvp-muted);
}
.fvp-palette__list { flex: 1; min-height: 0; overflow: auto; padding: 6px; }
.fvp-palette__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: start;
  color: inherit;
  text-decoration: none;
}
.fvp-palette__item:hover,
.fvp-palette__item[aria-selected="true"] { background: var(--fvp-panel-head); }
.fvp-palette__icon {
  flex: none;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 5px;
  background: var(--fvp-accent-soft);
  color: var(--fvp-accent);
  font-size: 11px;
}
.fvp-palette__label { display: block; font-size: 12px; font-weight: 600; color: var(--fvp-ink); }
.fvp-palette__note { display: block; font-size: 10px; color: var(--fvp-faint); }
.fvp-palette__kind {
  font-size: 10px;
  color: var(--fvp-faint);
  background: var(--fvp-line-soft);
  border-radius: 3px;
  padding: 2px 6px;
  white-space: nowrap;
}
.fvp-palette__foot {
  padding: 6px 14px;
  border-top: 1px solid var(--fvp-line);
  background: var(--fvp-panel-head);
  font-size: 10px;
  color: var(--fvp-faint);
}

/* ── 15. Row context menu ───────────────────────────────────────────────── */

.fvp-ctx {
  position: fixed;
  z-index: 95;
  min-width: 196px;
  background: var(--fvp-panel);
  border: 1px solid #C6D0DE;
  border-radius: 7px;
  box-shadow: 0 12px 28px rgba(11, 21, 36, 0.2);
  padding: 4px;
}
.fvp-ctx[hidden] { display: none; }
.fvp-ctx__title {
  padding: 5px 10px 6px;
  font-size: 10px;
  color: var(--fvp-faint);
  border-bottom: 1px solid var(--fvp-line-soft);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fvp-ctx__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 11.5px;
  color: var(--fvp-ink-2);
  text-align: start;
  text-decoration: none;
}
.fvp-ctx__item:hover { background: var(--fvp-panel-head); color: var(--fvp-accent); }
.fvp-ctx__item > span:first-child { width: 14px; text-align: center; color: var(--fvp-faint); }

/* ── 16. Value tone helpers ─────────────────────────────────────────────── */

/* Light-panel ink. Every dark-chrome surface that carries .up/.down values
   must override these under a MORE specific selector, not an equally specific
   one — see the ticker in section 4. */
.fv-pro .up, .fv-pro .pos, .fv-pro .positive { color: var(--fvp-up); }
.fv-pro .down, .fv-pro .neg, .fv-pro .negative { color: var(--fvp-down); }
.fv-pro .flat, .fv-pro .muted { color: var(--fvp-muted); }

/* The dark chrome surfaces, all raised above the helpers above. */
.fv-pro .fvp-status .up, .fv-pro .market-decision-summary .up { color: #34D399; }
.fv-pro .fvp-status .down, .fv-pro .market-decision-summary .down { color: #F87171; }
.fv-pro .fvp-status .flat, .fv-pro .fvp-status .muted,
.fv-pro .market-decision-summary .flat, .fv-pro .market-decision-summary .muted { color: #9AACC6; }
.fv-pro .badge, .fv-pro .pill, .fv-pro .tag {
  font-size: 10px;
  font-weight: 600;
  border-radius: 3px;
  padding: 2px 6px;
  white-space: nowrap;
  border: 0;
}
.fv-pro .badge.up { background: var(--fvp-up-soft); color: var(--fvp-up); }
.fv-pro .badge.down { background: var(--fvp-down-soft); color: var(--fvp-down); }
.fv-pro .badge.warn { background: var(--fvp-warn-soft); color: var(--fvp-warn); }
.fv-pro .badge.neutral { background: var(--fvp-line-soft); color: var(--fvp-muted); }

/* ── 17. Scrollbars, links, selection ───────────────────────────────────── */

.fv-pro * { scrollbar-width: thin; scrollbar-color: #C6D0DE transparent; }
.fv-pro *::-webkit-scrollbar { width: 9px; height: 9px; }
.fv-pro *::-webkit-scrollbar-track { background: transparent; }
.fv-pro *::-webkit-scrollbar-thumb {
  background: #C6D0DE;
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
.fv-pro a { color: var(--fvp-accent); text-decoration: none; }
.fv-pro a:hover { color: #0B5B70; }
.fv-pro ::selection { background: var(--fvp-cyan); color: #04121A; }
.fv-pro :focus-visible { outline: 2px solid var(--fvp-cyan); outline-offset: 2px; border-radius: 4px; }

/* Hide the marketing hero — the terminal opens on data, not a pitch. */
.fv-pro .home-hero { display: none; }

/* ── 18. Tab panel layouts ──────────────────────────────────────────────── */

.fvp-panelgrid { display: grid; gap: var(--fvp-gap); min-height: 0; overflow: hidden; }
.fvp-rows-auto-1 { grid-template-rows: auto minmax(0, 1fr); }
.fvp-rows-auto-auto-1 { grid-template-rows: auto auto minmax(0, 1fr); }
.fvp-cols-1-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fvp-cols-1-1-1 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fvp-cols-main { grid-template-columns: 1.35fr 1fr 0.85fr; }
.fvp-cols-flow { grid-template-columns: 1fr 1.3fr 0.9fr; }
.fvp-cols-wide { grid-template-columns: 1.5fr 1fr; }

/* Preset overrides, driven by the preset chips in the tab bar. */
.fv-pro[data-fvp-preset="flow"] .fvp-cols-main { grid-template-columns: 1fr 1.3fr 0.9fr; }
.fv-pro[data-fvp-preset="wide"] .fvp-cols-main { grid-template-columns: 1.5fr 1fr; }
.fv-pro[data-fvp-preset="wide"] .fvp-cols-main > *:nth-child(3) { display: none; }

/* ── 19. Composed rows used by the patched pages ────────────────────────── */

/* Decision cards + the model read, one row. */
.fvp-decision-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.3fr);
  gap: 8px;
  min-width: 0;
}

.fvp-stack { display: grid; gap: var(--fvp-gap); min-height: 0; overflow: hidden; }
.fvp-rows-1-1 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.fvp-rows-1-1-1 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.fvp-rows-auto-1-auto { grid-template-rows: auto minmax(0, 1fr) auto; }
.fvp-cols-radar { grid-template-columns: 1.6fr 1fr; }
.fvp-cols-desk { grid-template-columns: 1.25fr 1fr; }

/* Reference-rate panel: the six-card KPI grid becomes a one-per-row list. */
.fv-pro .kpi-grid.fvp-rates {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  overflow: auto;
}
.fv-pro .kpi-grid.fvp-rates .kpi-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  border-inline-start: 0;
  border-bottom: 1px solid var(--fvp-line-hair);
}
.fv-pro .kpi-grid.fvp-rates .kpi-card > div { display: contents; }
.fv-pro .kpi-grid.fvp-rates .kpi-value { display: flex; align-items: baseline; gap: 4px; justify-content: flex-end; }
.fv-pro .kpi-grid.fvp-rates .kpi-card strong { font-size: 11.5px; }
.fv-pro .kpi-grid.fvp-rates .kpi-card span { font-size: 11px; color: var(--fvp-ink-2); }
.fv-pro .kpi-grid.fvp-rates .kpi-card small { font-size: 10px; }

/* Personal stat strip — same visual weight as the decision cards. */
.fv-pro .personal-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
}
.fv-pro .personal-stat {
  background: var(--fvp-panel);
  border: 1px solid var(--fvp-line);
  border-radius: 7px;
  padding: 7px 11px;
  min-width: 0;
}
.fv-pro .personal-stat span { display: block; font-size: 10px; color: var(--fvp-faint); }
.fv-pro .personal-stat strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--fvp-ink);
  font-variant-numeric: tabular-nums;
}

/* Analysis-path cards inside a scrolling panel. */
.fv-pro .section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 8px;
  align-content: start;
  min-height: 0;
  overflow: auto;
}
.fv-pro .section-grid > * {
  border: 1px solid var(--fvp-line);
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--fvp-panel);
  box-shadow: none;
  margin: 0;
  min-width: 0;
}
.fv-pro .section-grid > *:hover { border-color: var(--fvp-accent-line); background: var(--fvp-panel-head); }
.fv-pro .section-grid h3,
.fv-pro .section-grid strong { font-size: 11.5px; font-weight: 600; color: var(--fvp-ink); margin: 0; }
.fv-pro .section-grid p,
.fv-pro .section-grid small { font-size: 10px; color: var(--fvp-muted); line-height: 1.4; margin: 1px 0 0; }

/* Market-summary tiles at the foot of the overview column. */
.fv-pro .market-assets-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
}
.fv-pro .market-assets-strip > * {
  background: var(--fvp-panel);
  border: 1px solid var(--fvp-line);
  border-radius: 6px;
  padding: 5px 8px;
  min-width: 0;
  box-shadow: none;
  margin: 0;
}
.fv-pro .market-assets-strip span,
.fv-pro .market-assets-strip small:first-child {
  display: block;
  font-size: 10px;
  color: var(--fvp-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fv-pro .market-assets-strip strong {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fvp-ink);
  font-variant-numeric: tabular-nums;
}

/* Watchlist preview rows: name · sparkline · price stack. */
.fv-pro .watchlist-preview { min-height: 0; overflow: auto; padding: 0; display: block; }
.fv-pro .watchlist-preview > * {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-bottom: 1px solid var(--fvp-line-hair);
  border-radius: 0;
  background: none;
  box-shadow: none;
  margin: 0;
  font-size: 11px;
}
.fv-pro .watchlist-preview > *:hover { background: var(--fvp-panel-head); }
/* Safety net: the row markup comes from hub.js, which predates this layer and
   sets its own small-label colour. Route it through the token so a caption in
   here cannot fall below contrast. */
.fv-pro .watchlist-preview small,
.fv-pro .watchlist-preview .muted { color: var(--fvp-faint); }

/* Radar result cards. */
.fv-pro .market-radar-grid {
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 7px;
  padding: 8px;
  align-content: start;
}
.fv-pro .market-radar-grid > * {
  border: 1px solid var(--fvp-line);
  border-radius: 6px;
  padding: 7px 9px;
  background: var(--fvp-panel);
  box-shadow: none;
  margin: 0;
  min-width: 0;
}
.fv-pro .market-radar-filters { display: flex; gap: 3px; flex-wrap: wrap; }
.fv-pro .market-radar-filters button {
  border: 1px solid var(--fvp-line);
  background: var(--fvp-panel);
  color: var(--fvp-muted);
  cursor: pointer;
  font: inherit;
  font-size: 10.5px;
  font-weight: 500;
  height: 24px;
  padding: 0 10px;
  border-radius: 4px;
}
.fv-pro .market-radar-filters button.active {
  background: var(--fvp-accent-soft);
  border-color: var(--fvp-accent-line);
  color: var(--fvp-accent);
}
.fv-pro .market-radar-meta {
  flex: none;
  padding: 5px 11px;
  border-bottom: 1px solid var(--fvp-line-hair);
  font-size: 10.5px;
  color: var(--fvp-muted);
  background: var(--fvp-panel);
}

/* Sub-column headings inside flow / industry panels. */
.fv-pro .market-flow-columns,
.fv-pro .market-industry-columns {
  display: grid;
  gap: 0;
  min-height: 0;
  overflow: auto;
  padding: 0;
}
.fv-pro .market-flow-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fv-pro .market-industry-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fv-pro .market-flow-columns > *,
.fv-pro .market-industry-columns > * { min-width: 0; border-inline-start: 1px solid var(--fvp-line-soft); }
.fv-pro .market-flow-columns h3,
.fv-pro .market-industry-columns h3 {
  margin: 0;
  padding: 5px 11px;
  font-size: 10px;
  font-weight: 600;
  color: var(--fvp-faint);
  background: var(--fvp-panel-head);
  border-bottom: 1px solid var(--fvp-line-soft);
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Coverage bars, rings, bubbles, freshness. */
.fv-pro .coverage-visual { padding: 9px 12px; display: flex; flex-direction: column; gap: 9px; min-height: 0; overflow: auto; }
.fv-pro .ring-visual-body { padding: 10px 12px; display: flex; align-items: center; gap: 14px; min-height: 0; overflow: auto; }
.fv-pro .visual-legend { display: flex; flex-direction: column; gap: 5px; font-size: 10.5px; color: var(--fvp-ink-2); min-width: 0; flex: 1; }
.fv-pro .strategy-visual,
.fv-pro .bubble-market,
.fv-pro .insight-list,
.fv-pro .freshness-list,
.fv-pro .personal-link-list { min-height: 0; overflow: auto; padding: 0; }
.fv-pro .bubble-market > *,
.fv-pro .freshness-list > *,
.fv-pro .insight-list > *,
.fv-pro .personal-link-list > * {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 12px;
  border-bottom: 1px solid var(--fvp-line-hair);
  font-size: 11px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  margin: 0;
}
.fv-pro .insight-list > * { display: block; line-height: 1.45; color: var(--fvp-ink-2); }
.fv-pro .bubble-market > *:hover,
.fv-pro .freshness-list > *:hover,
.fv-pro .personal-link-list > *:hover { background: var(--fvp-panel-head); }

.fvp-rows-1 { grid-template-rows: minmax(0, 1fr); }
.fvp-rows-auto-1 { grid-template-rows: auto minmax(0, 1fr); }

/* ── 20. Market board ───────────────────────────────────────────────────── */

/* Filters, data-status and KPIs stay put across tabs; the visible tab panel
   takes the rest of the height. */
body.v2-market-page .fv-pro #marketStack {
  grid-template-rows: auto auto auto minmax(0, 1fr) !important;
}

body.v2-market-page .fv-pro .filter-panel {
  background: var(--fvp-panel);
  border: 1px solid var(--fvp-line);
  border-radius: var(--fvp-radius) !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: block !important;
}
body.v2-market-page .fv-pro .v2-filter-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 5px 11px !important;
  margin: 0 !important;
  background: var(--fvp-panel-head);
  border-bottom: 1px solid var(--fvp-line);
  min-height: 0 !important;
}
body.v2-market-page .fv-pro .v2-filter-head strong { font-size: 11.5px; font-weight: 600; }
body.v2-market-page .fv-pro .v2-filter-head span { font-size: 10.5px; color: var(--fvp-muted); }
body.v2-market-page .fv-pro .v2-filter-body {
  padding: 8px 11px !important;
  margin: 0 !important;
  max-height: 30vh;
  overflow: auto;
}
body.v2-market-page .fv-pro .filter-toggle {
  height: 23px;
  padding: 0 9px;
  border: 1px solid var(--fvp-line);
  background: var(--fvp-panel);
  border-radius: 4px;
  font: inherit;
  font-size: 10.5px;
  color: var(--fvp-ink-2);
  cursor: pointer;
}

body.v2-market-page .fv-pro .module-status-banner {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 4px 11px !important;
  margin: 0 !important;
  background: var(--fvp-panel);
  border: 1px solid var(--fvp-line);
  border-radius: 6px !important;
  font-size: 10.5px;
  color: var(--fvp-muted);
  min-height: 0 !important;
}
body.v2-market-page .fv-pro .module-status-banner strong { font-size: 10.5px; color: var(--fvp-ink-2); }

/* The insight row: three equal panels, each scrolling on its own. */
body.v2-market-page .fv-pro .v2-insight-grid {
  display: grid !important;
  gap: var(--fvp-gap) !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}
.fv-pro .module-breakdown,
.fv-pro .breadth-visual,
.fv-pro .special-insight,
.fv-pro .option-intelligence-body {
  padding: 8px 11px !important;
  margin: 0 !important;
  min-height: 0 !important;
  overflow: auto;
}

/* Panels that stack several children scroll as a whole rather than giving
   each child its own scrollbar. */
.fv-pro .history-panel,
.fv-pro .bonds-bubble-panel { overflow: hidden !important; }
.fv-pro .history-panel > :not(.panel-header),
.fv-pro .bonds-bubble-panel > :not(.panel-header) { flex: none !important; overflow: visible !important; }
.fv-pro .history-panel::after { content: none; }
.fv-pro .history-panel > .history-chart,
.fv-pro .bonds-bubble-panel > .bonds-bubble {
  flex: 1 1 auto !important;
  min-height: 120px !important;
  overflow: hidden !important;
}
.fv-pro .history-status {
  padding: 4px 11px !important;
  margin: 0 !important;
  font-size: 10.5px;
  color: var(--fvp-muted);
  border-bottom: 1px solid var(--fvp-line-hair);
}
.fv-pro .history-metrics {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px;
  padding: 5px 11px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--fvp-line-hair);
  font-size: 10.5px;
}
.fv-pro .history-chart, .fv-pro .bonds-bubble { padding: 6px 8px !important; }
.fv-pro .index-context { padding: 6px 8px !important; margin: 0 !important; border-top: 1px solid var(--fvp-line-hair); }
.fv-pro .history-controls { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

/* The table panel is the board's main surface: header, scrolling body, footer. */
.fv-pro .table-panel { overflow: hidden !important; }
.fv-pro .table-panel > .table-scroll { flex: 1 1 auto !important; min-height: 0 !important; overflow: auto !important; }
.fv-pro .panel-footer {
  flex: none !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 11px !important;
  margin: 0 !important;
  border-top: 1px solid var(--fvp-line);
  background: var(--fvp-panel-head);
  font-size: 10.5px;
  color: var(--fvp-muted);
  overflow: visible !important;
  min-height: 0 !important;
  flex-wrap: nowrap !important;
}
.fv-pro .panel-footer > *,
.fv-pro .panel-footer select,
.fv-pro .panel-footer label { min-height: 0 !important; }
.fv-pro .panel-footer select { height: 21px !important; font-size: 10.5px !important; }
.fv-pro .pagination { display: flex; align-items: center; gap: 6px; }
.fv-pro .pagination button {
  width: 22px; height: 22px;
  border: 1px solid var(--fvp-line);
  background: var(--fvp-panel);
  border-radius: 4px;
  color: var(--fvp-ink-2);
  cursor: pointer;
  font: inherit;
}
.fv-pro .page-size-field { display: flex; align-items: center; gap: 5px; }
.fv-pro .shareholders-panel > .table-scroll { flex: 1 1 auto !important; }
.fv-pro .segmented { display: flex; background: var(--fvp-line-soft); border-radius: 5px; padding: 2px; gap: 2px; }
.fv-pro .segmented button {
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 10.5px;
  font-weight: 500;
  height: 21px;
  padding: 0 9px;
  border-radius: 3px;
  color: var(--fvp-muted);
}
.fv-pro .segmented button.active { background: var(--fvp-panel); color: var(--fvp-accent); }
.fv-pro .mobile-bottom-nav { display: none !important; }
.fv-pro .market-ticker,
body.fv-pro-body > #marketTicker { display: none !important; }

/* ── 21. Symbol pages ───────────────────────────────────────────────────── */

/* Five rows: identity, tabs, vitals, the visible tab, status.
   The old page footer folds into the status bar, which mirrors it. */
body.sym-page .fv-pro .main-content {
  grid-template-rows: auto var(--fvp-tabs-h) auto minmax(0, 1fr) var(--fvp-status-h) !important;
}
body.sym-page .fv-pro .sym-foot { display: none !important; }

body.sym-page .fv-pro .sym-hero {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 7px 13px !important;
  margin: 0 !important;
  background: var(--fvp-panel);
  border: 0 !important;
  border-bottom: 1px solid var(--fvp-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-width: 0;
  /* Same reason as .topbar: the hero hosts the symbol search, whose results
     panel is absolutely positioned and hangs below the band. Clipping here
     would swallow it. */
  min-height: 0 !important;
}
body.sym-page .fv-pro .sym-crumbs { display: none !important; }
body.sym-page .fv-pro .sym-hero-id { flex: none; min-width: 0; max-width: 340px; }
body.sym-page .fv-pro .sym-name-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin: 0 !important;
}
body.sym-page .fv-pro .sym-name-row h1 {
  margin: 0 !important;
  font-size: 21px !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2 !important;
  white-space: nowrap;
}
body.sym-page .fv-pro .sym-name-row p {
  margin: 0 !important;
  font-size: 12px !important;
  color: var(--fvp-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.sym-page .fv-pro .sym-tags {
  display: flex !important;
  gap: 4px !important;
  margin: 3px 0 0 !important;
  overflow: hidden;
}
body.sym-page .fv-pro .sym-tags > * {
  flex: none;
  font-size: 10px !important;
  font-weight: 500;
  color: var(--fvp-ink-2);
  background: var(--fvp-line-soft);
  border: 1px solid var(--fvp-line);
  border-radius: 3px;
  padding: 2px 7px !important;
  white-space: nowrap;
}

/* The live price, given the weight it earns. Laid out as a fixed three-row
   grid so a narrow viewport squeezes the columns around it rather than
   wrapping the price itself onto four lines. */
body.sym-page .fv-pro .sym-headline {
  flex: none !important;
  display: grid !important;
  grid-template-columns: auto auto;
  align-items: baseline !important;
  column-gap: 8px;
  row-gap: 0;
  padding: 0 15px !important;
  margin: 0 !important;
  border-inline: 1px solid var(--fvp-line-soft) !important;
  border-radius: 0 !important;
  background: none !important;
  min-height: 0 !important;
  min-width: max-content;
  white-space: nowrap;
}
body.sym-page .fv-pro #symHeadlineLabel {
  grid-column: 1 / -1;
  grid-row: 1;
  font-size: 10px !important;
  color: var(--fvp-faint);
  line-height: 1.4 !important;
}
body.sym-page .fv-pro #symHeadlineValue {
  grid-column: 1;
  grid-row: 2;
  font-size: 26px !important;
  font-weight: 700;
  line-height: 1.05 !important;
  font-variant-numeric: tabular-nums;
}
body.sym-page .fv-pro .sym-headline-change {
  grid-column: 2;
  grid-row: 2;
  font-size: 12px !important;
  font-weight: 600;
  border-radius: 4px;
  padding: 1px 7px !important;
  font-variant-numeric: tabular-nums;
  justify-self: start;
}
body.sym-page .fv-pro .sym-headline-change.up { background: var(--fvp-up-soft); color: var(--fvp-up); }
body.sym-page .fv-pro .sym-headline-change.down { background: var(--fvp-down-soft); color: var(--fvp-down); }
body.sym-page .fv-pro .sym-headline-sub {
  grid-column: 1 / -1;
  grid-row: 3;
  font-size: 10px !important;
  color: var(--fvp-muted);
  line-height: 1.4 !important;
}

body.sym-page .fv-pro .sym-hero-actions {
  flex: 1;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  margin: 0 !important;
  min-width: 0;
}
body.sym-page .fv-pro .sym-search { flex: 0 1 240px; min-width: 120px; position: relative; }
body.sym-page .fv-pro .sym-search-input {
  height: 27px !important;
  min-height: 0 !important;
  font-size: 11.5px !important;
  /* The search glyph is absolutely positioned 9px from the start edge, so the
     field has to reserve room for it or the placeholder runs underneath. */
  padding-inline-start: 26px !important;
  padding-inline-end: 8px !important;
}
body.sym-page .fv-pro .sym-search-icon { pointer-events: none; color: var(--fvp-faint); }
body.sym-page .fv-pro .sym-hero-actions .icon-button,
body.sym-page .fv-pro .sym-hero-actions button.icon-button {
  width: 27px !important;
  /* symbol-pro.css pins these to 42px with its own !important, so the box is
     clamped rather than merely re-declared. */
  max-width: 27px !important;
  height: 27px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--fvp-line) !important;
  background: var(--fvp-panel) !important;
  border-radius: 5px !important;
  /* The glyphs are stroke:currentColor — without a colour here they are white
     on white and the button reads as an empty box. */
  color: var(--fvp-ink-2) !important;
}
body.sym-page .fv-pro .sym-hero-actions .icon-button:hover {
  border-color: var(--fvp-accent-line) !important;
  background: var(--fvp-panel-head) !important;
  color: var(--fvp-accent) !important;
}
/* The theme toggle ships two glyphs and swaps them; unsized they overflow the
   27px box. */
body.sym-page .fv-pro .sym-hero-actions .icon-button svg,
body.sym-page .fv-pro .sym-hero-actions .icon-button :where(.theme-icon, .theme-sun, .theme-moon) {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
}
body.sym-page .fv-pro .sym-hero-actions .secondary-button,
body.sym-page .fv-pro .sym-hero-actions button:not(.icon-button) {
  height: 27px !important;
  min-height: 0 !important;
  padding: 0 11px !important;
  font-size: 11px !important;
}
body.sym-page .fv-pro .sym-hero-actions .connection-badge {
  height: 23px !important;
  min-height: 0 !important;
  padding: 0 8px !important;
  font-size: 10.5px !important;
}

/* Vitals: one dense strip, not a wrapping card grid. */
body.sym-page .fv-pro .sym-vitals {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin: var(--fvp-gap) var(--fvp-gap) 0 !important;
  padding: 0 !important;
  background: var(--fvp-panel);
  border: 1px solid var(--fvp-line);
  border-radius: var(--fvp-radius) !important;
  overflow: hidden !important;
  min-height: 0 !important;
}
body.sym-page .fv-pro .sym-vitals > * {
  padding: 6px 10px !important;
  margin: 0 !important;
  border: 0 !important;
  border-inline-start: 1px solid var(--fvp-line-soft) !important;
  border-bottom: 1px solid var(--fvp-line-soft) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  min-width: 0;
  min-height: 0 !important;
  display: block !important;
}
body.sym-page .fv-pro .sym-vitals > * > span,
body.sym-page .fv-pro .sym-vitals > * > small:first-child {
  display: block;
  font-size: 10px !important;
  color: var(--fvp-faint);
  line-height: 1.4 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.sym-page .fv-pro .sym-vitals > * > strong,
body.sym-page .fv-pro .sym-vitals > * > b {
  font-size: 13px !important;
  font-weight: 600;
  color: var(--fvp-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.4 !important;
}
body.sym-page .fv-pro .sym-vitals > * > small:last-child {
  font-size: 10px !important;
  color: var(--fvp-faint);
  margin-inline-start: 4px;
  font-variant-numeric: tabular-nums;
}

/* The tab body: rows become the panel grid. */
body.sym-page .fv-pro .sym-body {
  min-height: 0 !important;
  overflow: hidden !important;
  padding: var(--fvp-gap) !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: var(--fvp-gap) !important;
}
body.sym-page .fv-pro .sym-row {
  display: grid !important;
  gap: var(--fvp-gap) !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
/* Two rows share the fundamentals tab; each takes half the height. */
body.sym-page .fv-pro .sym-body:has(> .sym-row[data-fvp-tab="fundamentals"]:not([hidden]) ~ .sym-row[data-fvp-tab="fundamentals"]:not([hidden])) {
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
}
body.sym-page .fv-pro .sym-row-main { grid-template-columns: 1.9fr 1fr !important; }
body.sym-page .fv-pro .sym-row-flow { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
body.sym-page .fv-pro .sym-row-half { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
body.sym-page .fv-pro .sym-row-full { grid-template-columns: minmax(0, 1fr) !important; }
body.sym-page .fv-pro[data-fvp-preset="chart"] .sym-row-main { grid-template-columns: 2.8fr 1fr !important; }
body.sym-page .fv-pro[data-fvp-preset="wide"] .sym-row-main { grid-template-columns: 1.15fr 1fr !important; }
body.sym-page .fv-pro .sym-stack {
  display: grid !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--fvp-gap) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.sym-page .fv-pro .sym-panel {
  background: var(--fvp-panel);
  border: 1px solid var(--fvp-line);
  border-radius: var(--fvp-radius) !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
  gap: 0 !important;
}
body.sym-page .fv-pro .sym-panel-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  flex: none !important;
  padding: 6px 11px !important;
  margin: 0 !important;
  background: var(--fvp-panel-head);
  border-bottom: 1px solid var(--fvp-line) !important;
  border-radius: 0 !important;
  min-height: 0 !important;
}
body.sym-page .fv-pro .sym-panel-head h2 {
  margin: 0 !important;
  font-size: 11.5px !important;
  font-weight: 600;
  line-height: 1.3 !important;
  letter-spacing: 0;
}
body.sym-page .fv-pro .sym-panel-head p {
  margin: 1px 0 0 !important;
  font-size: 10.5px !important;
  color: var(--fvp-muted);
  line-height: 1.35 !important;
}
body.sym-page .fv-pro .sym-panel-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 8px 11px !important;
  margin: 0 !important;
}
body.sym-page .fv-pro .sym-panel-body > #symChart,
body.sym-page .fv-pro .sym-chart {
  min-height: 140px !important;
  height: 100% !important;
}
body.sym-page .fv-pro #secChart .sym-panel-body { padding: 6px 8px !important; overflow: hidden !important; }
body.sym-page .fv-pro .sym-panel-tools { display: flex; align-items: center; gap: 6px; flex: none; flex-wrap: nowrap; }
body.sym-page .fv-pro .sym-panel-tools > *,
body.sym-page .fv-pro .sym-panel-tools select,
body.sym-page .fv-pro .sym-panel-tools button {
  min-height: 0 !important;
  height: 23px !important;
  font-size: 10.5px !important;
}
body.sym-page .fv-pro .sym-metric-tabs { display: flex; background: var(--fvp-line-soft); border-radius: 5px; padding: 2px; gap: 2px; height: 23px !important; }
body.sym-page .fv-pro .sym-metric-tabs button {
  height: 19px !important;
  padding: 0 9px !important;
  border: 0;
  background: transparent;
  border-radius: 3px;
  color: var(--fvp-muted);
  font: inherit;
  font-size: 10.5px !important;
  cursor: pointer;
}
body.sym-page .fv-pro .sym-metric-tabs button.active,
body.sym-page .fv-pro .sym-metric-tabs button[aria-selected="true"] {
  background: var(--fvp-panel);
  color: var(--fvp-accent);
}

/* ── 22. Workspace, compare, alerts ─────────────────────────────────────── */

.fv-pro #viewWatchlist { grid-template-rows: auto auto auto !important; }
.fv-pro #viewCompare { grid-template-rows: auto auto !important; }
.fv-pro #viewAlerts { grid-template-rows: auto auto !important; }
.fv-pro .section-stack.hidden { display: none !important; }

.fv-pro .workspace-terminal-panel { overflow: visible !important; }
.fv-pro .workspace-terminal-panel > :not(.panel-header) { flex: none !important; overflow: visible !important; }
.fv-pro .workspace-terminal-controls {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 5px 11px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--fvp-line-hair);
}
.fv-pro .watchlist-mode-group,
.fv-pro .workspace-widget-toggles { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fv-pro .watchlist-mode-group { background: var(--fvp-line-soft); border-radius: 5px; padding: 2px; gap: 2px; }
.fv-pro .segment-button {
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 10.5px;
  font-weight: 500;
  height: 19px;
  padding: 0 9px;
  border-radius: 3px;
  color: var(--fvp-muted);
  min-height: 0 !important;
}
.fv-pro .segment-button.active { background: var(--fvp-panel); color: var(--fvp-accent); }
.fv-pro .workspace-widget-toggles label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: var(--fvp-ink-2);
  min-height: 0 !important;
}
.fv-pro .workspace-layout-actions { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; }
.fv-pro .workspace-quick-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 7px;
  padding: 8px 11px !important;
  margin: 0 !important;
}
.fv-pro .workspace-quick-card {
  display: flex !important;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--fvp-line);
  border-radius: 6px;
  padding: 7px 10px !important;
  margin: 0 !important;
  background: var(--fvp-panel);
  box-shadow: none !important;
}
.fv-pro .workspace-quick-card:hover { border-color: var(--fvp-accent-line); background: var(--fvp-panel-head); }
.fv-pro .workspace-quick-card > span:first-child {
  flex: none;
  width: 25px; height: 25px;
  display: grid; place-items: center;
  border-radius: 5px;
  background: var(--fvp-accent-soft);
  color: var(--fvp-accent);
  font-size: 12px;
}
.fv-pro .workspace-quick-card strong { display: block; font-size: 11.5px; font-weight: 600; color: var(--fvp-ink); }
.fv-pro .workspace-quick-card small { display: block; font-size: 10px; color: var(--fvp-muted); }

.fv-pro .watchlist-hero-panel { overflow: hidden !important; }
.fv-pro .watchlist-summary {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  overflow: auto;
}
.fv-pro .watchlist-summary > * {
  padding: 6px 10px !important;
  margin: 0 !important;
  border: 0 !important;
  border-inline-start: 1px solid var(--fvp-line-soft) !important;
  border-bottom: 1px solid var(--fvp-line-soft) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  min-width: 0;
  min-height: 0 !important;
}
.fv-pro .watchlist-summary span { display: block; font-size: 10px; color: var(--fvp-faint); }
.fv-pro .watchlist-summary strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--fvp-ink);
  font-variant-numeric: tabular-nums;
}

.fv-pro .comparison-editor,
.fv-pro .alert-editor,
.fv-pro .alert-form-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px !important;
  padding: 8px 11px !important;
  margin: 0 !important;
  align-items: end;
}
.fv-pro .field,
.fv-pro .check-label {
  display: flex !important;
  flex-direction: column;
  gap: 3px;
  font-size: 10.5px;
  color: var(--fvp-muted);
  min-height: 0 !important;
  margin: 0 !important;
}
.fv-pro .check-label { flex-direction: row; align-items: center; gap: 5px; }
.fv-pro .alert-channel-field {
  border: 1px solid var(--fvp-line);
  border-radius: 6px;
  padding: 6px 9px !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.fv-pro .alert-channel-field legend { font-size: 10px; color: var(--fvp-faint); padding: 0 4px; }
.fv-pro .alert-channel-field small { font-size: 10px; color: var(--fvp-faint); }
.fv-pro .upper-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--fvp-gap) !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.fv-pro .select-cell { width: 28px; }
.fv-pro .data-table td .mini-button { height: 19px !important; padding: 0 7px !important; font-size: 10px !important; }

/* ── 23. Specialized boards (gold, commodity) ───────────────────────────── */

body.specialized-page .fv-pro .main-content {
  grid-template-rows: var(--fvp-header-h) minmax(0, 1fr) !important;
}
body.specialized-page .fv-pro .specialized-board {
  min-height: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto auto auto var(--fvp-tabs-h) minmax(0, 1fr) var(--fvp-status-h) !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
}
body.specialized-page .fv-pro .special-hero {
  padding: 6px 12px !important;
  margin: 0 !important;
  background: var(--fvp-panel);
  border-bottom: 1px solid var(--fvp-line) !important;
  border-radius: 0 !important;
  min-height: 0 !important;
  overflow: hidden;
}
body.specialized-page .fv-pro .special-hero-head { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; }
body.specialized-page .fv-pro .special-hero h2 { margin: 0 !important; font-size: 13px !important; font-weight: 600; line-height: 1.3 !important; }
body.specialized-page .fv-pro .special-hero p { margin: 1px 0 0 !important; font-size: 10.5px !important; color: var(--fvp-muted); line-height: 1.4 !important; }
body.specialized-page .fv-pro .special-filter-rail {
  display: flex !important;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px !important;
  padding: 6px 12px !important;
  margin: 0 !important;
  background: var(--fvp-panel);
  border-bottom: 1px solid var(--fvp-line) !important;
  border-radius: 0 !important;
  min-height: 0 !important;
}
body.specialized-page .fv-pro .special-field {
  display: flex !important;
  flex-direction: column;
  gap: 3px;
  font-size: 10px;
  color: var(--fvp-faint);
  min-height: 0 !important;
  margin: 0 !important;
}
body.specialized-page .fv-pro .special-field.wide { flex: 1 1 200px; }
body.specialized-page .fv-pro .special-field input,
body.specialized-page .fv-pro .special-field select {
  height: 24px !important;
  min-height: 0 !important;
  font-size: 11px !important;
}
body.specialized-page .fv-pro .special-kpis {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--fvp-panel);
  border-bottom: 1px solid var(--fvp-line) !important;
  min-height: 0 !important;
  overflow: auto;
}
body.specialized-page .fv-pro .special-kpis > * {
  padding: 6px 10px !important;
  margin: 0 !important;
  border: 0 !important;
  border-inline-start: 1px solid var(--fvp-line-soft) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  min-width: 0;
  min-height: 0 !important;
}
body.specialized-page .fv-pro .special-kpis span,
body.specialized-page .fv-pro .special-kpis small:first-child {
  display: block;
  font-size: 10px !important;
  color: var(--fvp-faint);
  line-height: 1.4 !important;
}
body.specialized-page .fv-pro .special-kpis strong,
body.specialized-page .fv-pro .special-kpis b {
  font-size: 14px !important;
  font-weight: 600;
  color: var(--fvp-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.4 !important;
}
body.specialized-page .fv-pro .special-grid,
body.specialized-page .fv-pro .special-chart-grid,
body.specialized-page .fv-pro .fvp-summary-wrap {
  display: grid !important;
  gap: var(--fvp-gap) !important;
  padding: var(--fvp-gap) !important;
  margin: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
body.specialized-page .fv-pro .special-grid { grid-template-columns: 1.7fr 1fr !important; }
body.specialized-page .fv-pro .special-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
body.specialized-page .fv-pro .fvp-summary-wrap { grid-template-rows: auto minmax(0, 1fr) !important; }
body.specialized-page .fv-pro #funds { margin: var(--fvp-gap) !important; }
body.specialized-page .fv-pro .special-chart-stack {
  display: grid !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--fvp-gap) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
body.specialized-page .fv-pro .special-card {
  background: var(--fvp-panel);
  border: 1px solid var(--fvp-line);
  border-radius: var(--fvp-radius) !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
  gap: 0 !important;
}
body.specialized-page .fv-pro .special-card > header {
  flex: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 6px 11px !important;
  margin: 0 !important;
  background: var(--fvp-panel-head);
  border-bottom: 1px solid var(--fvp-line) !important;
  min-height: 0 !important;
}
body.specialized-page .fv-pro .special-card > header h3 { margin: 0 !important; font-size: 11.5px !important; font-weight: 600; line-height: 1.3 !important; }
body.specialized-page .fv-pro .special-card > header p { margin: 1px 0 0 !important; font-size: 10.5px !important; color: var(--fvp-muted); line-height: 1.35 !important; }
body.specialized-page .fv-pro .special-card > :not(header) { flex: 1 1 auto !important; min-height: 0 !important; overflow: auto !important; margin: 0 !important; }
body.specialized-page .fv-pro .special-card-body,
body.specialized-page .fv-pro .special-chart { padding: 8px 11px !important; min-height: 110px !important; }
body.specialized-page .fv-pro .special-table-scroll { min-height: 0 !important; overflow: auto !important; padding: 0 !important; }
body.specialized-page .fv-pro .special-table { width: 100%; border-collapse: collapse; font-size: 11px !important; }
body.specialized-page .fv-pro .special-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--fvp-line-soft);
  text-align: start;
  font-size: 10px !important;
  font-weight: 600;
  color: var(--fvp-muted);
  padding: 6px 10px !important;
  border-bottom: 1px solid #C6D0DE;
  white-space: nowrap;
  height: auto !important;
  min-height: 0 !important;
}
body.specialized-page .fv-pro .special-table tbody td {
  padding: 4px 10px !important;
  border-bottom: 1px solid var(--fvp-line-hair);
  color: var(--fvp-ink-2);
  white-space: nowrap;
  font-size: 11px !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.45 !important;
}
body.specialized-page .fv-pro .special-table tbody tr:hover td { background: var(--fvp-panel-head); }
body.specialized-page .fv-pro .special-table.fvp-freeze thead th:first-child,
body.specialized-page .fv-pro .special-table.fvp-freeze tbody td:first-child {
  position: sticky;
  inset-inline-start: 0;
  z-index: 3;
  background: var(--fvp-panel);
}
body.specialized-page .fv-pro .special-table.fvp-freeze thead th:first-child { z-index: 4; background: var(--fvp-line-soft); }
body.specialized-page .fv-pro .special-tabs {
  display: flex !important;
  gap: 2px;
  background: var(--fvp-line-soft);
  border-radius: 5px;
  padding: 2px !important;
  margin: 0 !important;
  align-self: start;
  width: max-content;
}
body.specialized-page .fv-pro .special-tab {
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 10.5px !important;
  font-weight: 500;
  height: 20px !important;
  min-height: 0 !important;
  padding: 0 9px !important;
  border-radius: 3px;
  color: var(--fvp-muted);
}
body.specialized-page .fv-pro .special-tab.active,
body.specialized-page .fv-pro .special-tab[aria-selected="true"] { background: var(--fvp-panel); color: var(--fvp-accent); }
body.specialized-page .fv-pro .special-board-footer { display: none !important; }
body.specialized-page .fv-pro .special-ticker { display: flex; gap: 8px; flex-wrap: wrap; font-size: 10.5px; color: var(--fvp-muted); }
body.specialized-page .fv-pro .special-badge {
  font-size: 10px;
  font-weight: 600;
  background: var(--fvp-line-soft);
  color: var(--fvp-muted);
  border-radius: 3px;
  padding: 2px 6px;
}
body.specialized-page .fv-pro .special-table-tools { display: flex; align-items: center; gap: 6px; flex: none; }
body.specialized-page .fv-pro .special-bar-list { display: flex; flex-direction: column; gap: 6px; }

/* ── 24. Auth screen ────────────────────────────────────────────────────── */

/* Login has no app shell, so the fixed-viewport rules never reach it. It gets
   the terminal's palette and type instead of its geometry. */
body:has(> .auth-screen) { overflow: auto; background: var(--fvp-bg); }
.auth-screen { min-height: 100dvh; }
.auth-screen .panel,
.auth-screen .auth-card {
  background: var(--fvp-panel);
  border: 1px solid var(--fvp-line);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(11, 21, 36, 0.08);
}
.auth-aside { background: var(--fvp-chrome); color: var(--fvp-chrome-ink); }

/* ── 25. Narrow screens: give the page its scroll back ──────────────────── */

@media (max-width: 1100px) {
  /* The viewport must be the scroller here. Leaving the 100% height in place
     while flipping BODY to overflow:auto makes BODY its own scroll container,
     which silently breaks window.scrollTo / window.scrollY and any
     scroll-restore — on the very path where the mobile nav is in play. Don't
     hand HTML an overflow value either: that just moves the problem up a box. */
  html, body { height: auto !important; min-height: 100%; overflow: visible !important; }
  /* Needed as well as the line above: the base rule targets these by class and
     so outranks a bare `body` selector. */
  body.hub-root, body.fv-pro-body { overflow: visible !important; }
  .fv-pro {
    height: auto !important;
    max-height: none !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
  }
  .fv-pro .sidebar { display: none !important; }
  .fv-pro .main-content {
    grid-template-rows: none !important;
    height: auto !important;
    max-height: none !important;
  }
  .fv-pro .section-stack { overflow: visible !important; grid-template-rows: none !important; }
  .fv-pro .fvp-panelgrid {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    overflow: visible !important;
  }
  .fv-pro .panel { max-height: 70vh; }
  .fv-pro .market-overview-kpis,
  .fv-pro .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .fv-pro .market-decision-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .fvp-decision-row { grid-template-columns: 1fr; }
  .fv-pro .market-flow-columns,
  .fv-pro .market-industry-columns { grid-template-columns: 1fr !important; }
  .fv-pro .section-grid { grid-template-columns: 1fr !important; }
  .fvp-status { display: none !important; }
  .fv-pro .mobile-bottom-nav { display: flex !important; }
  body.sym-page .fv-pro .main-content { grid-template-rows: none !important; }
  body.sym-page .fv-pro .sym-hero { flex-wrap: wrap !important; }
  body.sym-page .fv-pro .sym-hero-id { max-width: none; flex: 1 1 100%; }
  body.sym-page .fv-pro .sym-headline { border-inline: 0 !important; padding: 0 !important; }
  body.sym-page .fv-pro .sym-vitals { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.sym-page .fv-pro .sym-body { grid-template-rows: none !important; overflow: visible !important; }
  body.sym-page .fv-pro .sym-row,
  body.sym-page .fv-pro .sym-stack {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    overflow: visible !important;
  }
  body.sym-page .fv-pro .sym-panel { max-height: 70vh; }
  body.specialized-page .fv-pro .main-content { grid-template-rows: none !important; }
  body.specialized-page .fv-pro .specialized-board {
    grid-template-rows: none !important;
    overflow: visible !important;
  }
  body.specialized-page .fv-pro .special-grid,
  body.specialized-page .fv-pro .special-chart-grid,
  body.specialized-page .fv-pro .special-chart-stack,
  body.specialized-page .fv-pro .fvp-summary-wrap {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    overflow: visible !important;
  }
  body.specialized-page .fv-pro .special-card { max-height: 70vh; }
  .fv-pro #viewWatchlist,
  .fv-pro #viewCompare,
  .fv-pro #viewAlerts { grid-template-rows: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LAST RULE IN THE FILE: [hidden] must win
   ══════════════════════════════════════════════════════════════════════════
   This layer sets `display: grid !important` / `flex !important` on the very
   elements the tab controller hides, and an !important display beats the UA
   stylesheet's `[hidden] { display: none }`. Left unguarded, every tab panel
   renders stacked while `el.hidden` reads true — the attribute looks correct
   from script and the page is wrong on screen, which is exactly the kind of
   bug a DOM-only check waves through.

   Each selector is deliberately ONE step more specific than the rule it has to
   beat (a tie goes to whichever comes later, which is too fragile to rely on),
   and this block stays last in the file.
   ══════════════════════════════════════════════════════════════════════════ */

body.sym-page .fv-pro .sym-row[hidden],
body.sym-page .fv-pro .sym-stack[hidden],
body.specialized-page .fv-pro .special-grid[hidden],
body.specialized-page .fv-pro .special-chart-grid[hidden],
body.specialized-page .fv-pro .special-chart-stack[hidden],
body.specialized-page .fv-pro .special-card[hidden],
body.specialized-page .fv-pro .fvp-summary-wrap[hidden],
body.v2-market-page .fv-pro .fvp-panelgrid[hidden],
.fv-pro .fvp-panelgrid[hidden],
.fv-pro .section-stack[hidden],
.fv-pro .panel[hidden],
.fv-pro .fvp-stack[hidden],
.fv-pro [data-fvp-tab][hidden],
.fv-pro [hidden] { display: none !important; }

/* The base specialized.css styles unit suffixes with its own --fv-faint, which
   is 2.9:1 on white. That token is owned by the base design system and used in
   places this layer cannot see, so it is not redefined here — the shell only
   re-points the places it renders. */
body.specialized-page .fv-pro .special-field .input-with-unit small,
body.specialized-page .fv-pro .special-field small {
  color: var(--fvp-faint) !important;
}

/* Badges sit on a tinted chip (--fvp-line-soft), where --fvp-faint drops to
   4.36:1. They take --fvp-muted instead — the token above is calibrated for
   the panel backgrounds, not for chips drawn on top of them. */
body.specialized-page .fv-pro .special-hero .special-badge,
body.specialized-page .fv-pro .special-meta .special-badge {
  color: var(--fvp-muted) !important;
}