@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("fonts/PlusJakartaSans-Medium.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}


/* Dashboard and login risk disclaimers. */
.app-footer-title {
  color:#9ca3af;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.app-footer-disclaimer {
  max-width:1120px;
  margin:8px auto 0;
  color:#737b88;
  font-size:8.5px;
  font-weight:400;
  letter-spacing:.01em;
  line-height:1.55;
  text-transform:none;
}
.app-footer-disclaimer strong {
  color:#9ca3af;
  font-weight:700;
}
.login-panel {
  flex:0 0 auto;
  max-width:calc(100vw - 32px);
  box-sizing:border-box;
}
.login-risk-disclaimer {
  width:min(760px,calc(100vw - 32px));
  margin-top:18px;
  padding:18px 20px;
  box-sizing:border-box;
  border:1px solid rgba(148,163,184,.18);
  border-radius:16px;
  background:rgba(15,23,42,.72);
  color:#8f9aaa;
  font-size:10px;
  line-height:1.6;
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}
.login-risk-disclaimer h3 {
  margin:0 0 10px;
  color:#dce3ec;
  font-size:13px;
  font-weight:700;
  letter-spacing:.015em;
}
.login-risk-disclaimer p { margin:0 0 9px; }
.login-risk-disclaimer p:last-child { margin-bottom:0; }

@media (max-width:640px) {
  .app-footer-disclaimer {
    font-size:8px;
    line-height:1.5;
  }
  .login-risk-disclaimer {
    margin-top:14px;
    padding:15px;
    font-size:9.5px;
  }
}


/* ========================================================================== 
   FUSION MARKETS THEME INTEGRATION V1
   Shared visual contract for Dashboard 1 and Dashboard 2.
   Dark: approved Violet Charcoal. Light: approved grey canvas / white cards.
   Directional, forecast, gauge, performance and heatmap colours are preserved.
   ========================================================================== */

:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --fm-page-bg: #0D090F;
  --fm-sidebar-bg: #0B080D;
  --fm-surface-1: #111013;
  --fm-surface-2: #171519;
  --fm-surface-3: #201C22;
  --fm-surface-raised: #29232C;
  --fm-text-primary: #FFFAFD;
  --fm-text-secondary: #B9ADBC;
  --fm-text-tertiary: #7E6E82;
  --fm-border-subtle: #3C2A48;
  --fm-border-strong: #604070;
  --fm-overlay: rgba(5, 2, 7, 0.78);
  --fm-shadow: rgba(0, 0, 0, 0.46);
  --fm-action: #720FEB;
  --fm-action-hover: #8734F2;
  --fm-action-pressed: #5D0BC1;
  --fm-action-text: #FFFFFF;
  --fm-selection-bg: rgba(114, 15, 235, 0.24);
  --fm-selection-text: #FFFFFF;
  --fm-hover-bg: #242027;
  --fm-focus-ring: #DAC3FF;
  --fm-disabled-bg: #1C1422;
  --fm-disabled-text: #7E6E82;
  --fm-positive: #54E6A0;
  --fm-negative: #FF6B7D;
  --fm-warning: #FFD166;
  --fm-information: #6EA8FF;
  --fm-chart-grid: #3C2A48;
  --fm-chart-reference: #604070;
  --fm-chart-paper: #111013;
  --fm-chart-plot: #111013;
  --fm-control-bg: #171519;
  --fm-control-hover: #242027;
  --fm-positive-pill-text: #54E6A0;
  --fm-positive-pill-bg: rgba(35, 135, 46, 0.22);
  --fm-positive-pill-border: rgba(64, 190, 76, 0.70);
  --fm-negative-pill-text: #FF6B7D;
  --fm-negative-pill-bg: rgba(166, 42, 42, 0.22);
  --fm-negative-pill-border: rgba(220, 68, 68, 0.70);
  --fm-neutral-pill-text: #D7CEDA;
  --fm-neutral-pill-bg: rgba(126, 110, 130, 0.24);
  --fm-neutral-pill-border: rgba(185, 173, 188, 0.58);
  --fm-calendar-range: #FFD166;
  --fm-brand-gradient: linear-gradient(135deg, #1300C2 0%, #653BF0 70%, #D930FF 100%);
}

:root[data-theme="light"] {
  color-scheme: light;
  --fm-page-bg: #E4E7F0;
  --fm-sidebar-bg: #FFFFFF;
  --fm-surface-1: #FFFFFF;
  --fm-surface-2: #E9EBF3;
  --fm-surface-3: #DFE2ED;
  --fm-surface-raised: #F7F8FC;
  --fm-text-primary: #0D1350;
  --fm-text-secondary: #596184;
  --fm-text-tertiary: #7A829F;
  --fm-border-subtle: #CDD2E2;
  --fm-border-strong: #AEB6CC;
  --fm-overlay: rgba(13, 19, 80, 0.34);
  --fm-shadow: rgba(13, 19, 80, 0.12);
  --fm-action: #720FEB;
  --fm-action-hover: #5F0CC7;
  --fm-action-pressed: #4E0AA5;
  --fm-action-text: #FFFFFF;
  --fm-selection-bg: #EEE4FF;
  --fm-selection-text: #0D1350;
  --fm-hover-bg: #E4DFF2;
  --fm-focus-ring: #720FEB;
  --fm-disabled-bg: #E1E4EE;
  --fm-disabled-text: #7A829F;
  --fm-positive: #087A49;
  --fm-negative: #C8324E;
  --fm-warning: #8A5A00;
  --fm-information: #1457C9;
  --fm-chart-grid: #CBD0DE;
  --fm-chart-reference: #9DA6BD;
  --fm-chart-paper: #F3F4F8;
  --fm-chart-plot: #E7E9F1;
  --fm-control-bg: #E3E6EF;
  --fm-control-hover: #D9DDE9;
  --fm-positive-pill-text: #075C38;
  --fm-positive-pill-bg: #CDEEDC;
  --fm-positive-pill-border: #39A66F;
  --fm-negative-pill-text: #A61F3A;
  --fm-negative-pill-bg: #F8D8E0;
  --fm-negative-pill-border: #D85B72;
  --fm-neutral-pill-text: #39415F;
  --fm-neutral-pill-bg: #DDE1EA;
  --fm-neutral-pill-border: #8D96AE;
  --fm-calendar-range: #A800C4;
}

html,
body,
#react-entry-point,
#_dash-app-content,
.app-bg,
.dashboard-page-shell {
  background: var(--fm-page-bg) !important;
  color: var(--fm-text-primary);
}

body {
  font-family: "Plus Jakarta Sans", sans-serif !important;
}

body,
button,
input,
select,
textarea {
  color: var(--fm-text-primary);
}

a {
  color: var(--fm-information);
}

/* Sidebar and the persistent theme control. */
.sidebar.sidebar-shell {
  background: var(--fm-sidebar-bg) !important;
  border-right-color: var(--fm-border-subtle) !important;
}

.sidebar .nav-item.nav-item-row,
.sidebar .nav-item.nav-item-row .nav-item-label,
.sidebar .nav-item.nav-item-row .nav-item-icon i,
.sidebar-theme-btn,
.sidebar-theme-btn .nav-item-label,
.sidebar-theme-btn .nav-item-icon i,
.sidebar-logout-btn,
.sidebar-logout-btn .nav-item-label,
.sidebar-logout-btn .nav-item-icon i {
  color: var(--fm-text-primary) !important;
}

.sidebar .nav-item.nav-item-row:hover,
.sidebar-theme-btn:hover,
.sidebar-logout-btn:hover {
  background: var(--fm-hover-bg) !important;
}

.sidebar .nav-item.nav-item-row.active {
  background: var(--fm-selection-bg) !important;
  color: var(--fm-selection-text) !important;
}

.sidebar .nav-item.nav-item-row.active .nav-item-label,
.sidebar .nav-item.nav-item-row.active .nav-item-icon i {
  color: var(--fm-selection-text) !important;
}

.sidebar-theme-btn {
  margin-top: auto;
  width: calc(100% + 22px);
  min-height: 30px;
  margin-left: -12px;
  margin-right: -10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 6px 12px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  box-sizing: border-box;
  text-align: left;
}

.sidebar-theme-btn:hover {
  border-radius: 8px !important;
}

.sidebar-theme-btn .nav-item-icon {
  width: 16px;
  min-width: 16px;
  flex: 0 0 16px;
  margin: 0 10px 0 0;
}

.sidebar-theme-btn .nav-item-label {
  font-size: 11px;
  line-height: 1.15;
}

.sidebar-logout-btn {
  margin-top: 3px !important;
}

.theme-icon-dark,
.theme-label-dark {
  display: none !important;
}

:root[data-theme="light"] .theme-icon-light,
:root[data-theme="light"] .theme-label-light {
  display: none !important;
}

:root[data-theme="light"] .theme-icon-dark,
:root[data-theme="light"] .theme-label-dark {
  display: inline-flex !important;
}

body.sidebar-is-collapsed .sidebar-theme-btn {
  justify-content: center !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

body.sidebar-is-collapsed .sidebar-theme-btn .nav-item-label {
  display: none !important;
}

.sidebar-collapse-toggle {
  background: var(--fm-surface-raised) !important;
  border-color: var(--fm-border-strong) !important;
  color: var(--fm-focus-ring) !important;
  box-shadow: 0 6px 18px var(--fm-shadow) !important;
}

/* Structural surfaces. */
.home-tile,
.tile,
.glass,
.cb-tile,
.country-page-tile,
.crossassetvol-page-tile,
.sentiment-tile,
.currency-grid > div,
.positioning-context-card,
.correlation-summary-card,
.risk-pro-card,
.risk-pro-driver-card,
.risk-preview-section,
.risk-preview-tab-summary,
.cal2-risk-preview-panel,
.cal2-event-tab-content,
.currency-profile-hero,
.currency-profile-driver-card,
.currency-profile-knowledge-card,
.currency-profile-relationship-card,
.currency-model-alert-card,
.fxi-tile,
.fxi-panel,
.fxi-call-card,
.fxi-composite-card,
.fxi-evidence-card,
.fxi-detail-card,
.fxi-scope-card,
.fundamental-report-content,
.fundamental-report-cover,
.modal-shell,
.modal-content,
.offcanvas,
.currency-info-modal-shell,
.fxi-modal-shell {
  background-color: var(--fm-surface-1) !important;
  border-color: var(--fm-border-subtle) !important;
  color: var(--fm-text-primary);
}

.home-tile,
.cb-tile,
.country-page-tile,
.crossassetvol-page-tile {
  border: 1px solid transparent !important;
  background:
    linear-gradient(var(--fm-surface-1), var(--fm-surface-1)) padding-box,
    var(--fm-brand-gradient) border-box !important;
}

.modal-overlay,
.modal-backdrop,
.offcanvas-backdrop,
.currency-info-modal-overlay {
  background-color: var(--fm-overlay) !important;
}

.modal-shell,
.modal-content,
.offcanvas,
.currency-info-modal-shell,
.fxi-modal-shell {
  box-shadow: 0 20px 56px var(--fm-shadow) !important;
}

/* Headers, nested panels, controls and table structure. */
.calendar-filters,
.country-tile-header,
.crossassetvol-tile-header,
.currency-page-header,
.currency-model-alert-head,
.fxi-modal-header,
.currency-info-modal-header,
.risk-preview-section-heading,
.ag-header,
.dash-table-container .dash-header,
thead,
th {
  background-color: var(--fm-surface-2) !important;
  border-color: var(--fm-border-subtle) !important;
  color: var(--fm-text-secondary) !important;
}

table,
tbody,
tr,
td {
  border-color: var(--fm-border-subtle) !important;
}

tbody tr:hover td,
.ag-row-hover,
.dash-table-container tr:hover td {
  background-color: var(--fm-hover-bg) !important;
}

.ag-row-selected,
.dash-table-container .cell--selected,
.dash-table-container .focused {
  background-color: var(--fm-selection-bg) !important;
}

hr,
.divider,
.cb-news-divider,
.risk-pro-divider {
  border-color: var(--fm-border-subtle) !important;
  background-color: var(--fm-border-subtle) !important;
}

/* Opaque dropdowns and form controls. */
.Select-control,
.Select-menu-outer,
.Select-menu,
.Select-option,
.VirtualizedSelectOption,
.DateInput,
.DateInput_input,
.DateRangePickerInput,
.DateRangePicker_picker,
.CalendarMonth,
.CalendarMonthGrid,
.DayPicker,
.DayPickerNavigation,
.form-control,
.form-select,
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  background: var(--fm-surface-2) !important;
  border-color: var(--fm-border-subtle) !important;
  color: var(--fm-text-primary) !important;
}

.Select-menu-outer,
.DateRangePicker_picker {
  z-index: 10050 !important;
  box-shadow: 0 14px 34px var(--fm-shadow) !important;
}

.Select-placeholder,
.Select--single > .Select-control .Select-value,
.Select-value-label,
.Select-input > input,
.DateInput_input::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--fm-text-secondary) !important;
}

.Select-option:hover,
.Select-option.is-focused,
.VirtualizedSelectFocusedOption {
  background: var(--fm-hover-bg) !important;
  color: var(--fm-text-primary) !important;
}

.Select-option.is-selected,
.VirtualizedSelectSelectedOption,
.CalendarDay__selected,
.CalendarDay__selected:hover {
  background: var(--fm-selection-bg) !important;
  color: var(--fm-selection-text) !important;
}

.CalendarDay,
.CalendarDay__default {
  background: var(--fm-surface-1) !important;
  border-color: var(--fm-border-subtle) !important;
  color: var(--fm-text-primary) !important;
}

.CalendarDay__hovered_span,
.CalendarDay__selected_span {
  background: var(--fm-surface-3) !important;
  border-color: var(--fm-border-strong) !important;
  color: var(--fm-text-primary) !important;
}

/* Buttons, tabs and pills. */
.btn,
.btn-secondary,
.btn-ghost,
.calendar-preset,
.curve-pill,
.cb-tab,
.cal2-mobile-nav-btn,
.risk-preview-chart-selector label,
.cal2-event-panel-tabs button,
.nav-tabs .nav-link {
  background: var(--fm-surface-2) !important;
  border-color: var(--fm-border-subtle) !important;
  color: var(--fm-text-secondary) !important;
}

.btn:hover,
.btn-secondary:hover,
.btn-ghost:hover,
.calendar-preset:hover,
.curve-pill:hover,
.cb-tab:hover,
.cal2-mobile-nav-btn:hover,
.nav-tabs .nav-link:hover {
  background: var(--fm-hover-bg) !important;
  border-color: var(--fm-border-strong) !important;
  color: var(--fm-text-primary) !important;
}

.active-pill,
.active-filter,
.curve-badge-selected,
.cb-tab--selected,
.nav-tabs .nav-link.active,
.cal2-event-panel-tabs button.active,
.cal2-risk-action-btn,
.cal2-analysis-open {
  background: var(--fm-action) !important;
  border-color: var(--fm-action-hover) !important;
  color: var(--fm-action-text) !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--fm-focus-ring) !important;
  outline-offset: 2px;
}

button:disabled,
input:disabled,
select:disabled,
.disabled {
  background: var(--fm-disabled-bg) !important;
  color: var(--fm-disabled-text) !important;
}

/* AG Grid uses tokens so its internal canvas changes without touching data rules. */
.ag-theme-alpine,
.ag-theme-alpine-dark,
.ag-theme-quartz,
.ag-theme-quartz-dark {
  --ag-background-color: var(--fm-surface-1);
  --ag-foreground-color: var(--fm-text-primary);
  --ag-secondary-foreground-color: var(--fm-text-secondary);
  --ag-header-background-color: var(--fm-surface-2);
  --ag-header-foreground-color: var(--fm-text-secondary);
  --ag-odd-row-background-color: var(--fm-surface-1);
  --ag-row-hover-color: var(--fm-hover-bg);
  --ag-selected-row-background-color: var(--fm-selection-bg);
  --ag-border-color: var(--fm-border-subtle);
  --ag-row-border-color: var(--fm-border-subtle);
  --ag-input-border-color: var(--fm-border-subtle);
  --ag-input-focus-border-color: var(--fm-focus-ring);
  --ag-control-panel-background-color: var(--fm-surface-2);
  --ag-menu-background-color: var(--fm-surface-raised);
  --ag-modal-overlay-background-color: var(--fm-overlay);
  --ag-tooltip-background-color: var(--fm-surface-raised);
}

.ag-root-wrapper,
.ag-root,
.ag-body-viewport,
.ag-center-cols-viewport,
.ag-center-cols-container,
.ag-row,
.ag-cell {
  background-color: var(--fm-surface-1) !important;
  border-color: var(--fm-border-subtle) !important;
  color: var(--fm-text-primary);
}

.ag-header,
.ag-header-viewport,
.ag-header-container,
.ag-header-cell {
  background-color: var(--fm-surface-2) !important;
  border-color: var(--fm-border-subtle) !important;
  color: var(--fm-text-secondary) !important;
}

.ag-tooltip {
  background: var(--fm-surface-raised) !important;
  border-color: var(--fm-border-strong) !important;
  color: var(--fm-text-primary) !important;
}

/* Plotly chrome only. Trace, marker, gauge and heatmap colours remain intact. */
.js-plotly-plot,
.plot-container,
.svg-container,
.js-plotly-plot .main-svg {
  background: transparent !important;
}

.js-plotly-plot .bg {
  fill: var(--fm-surface-1) !important;
}

.js-plotly-plot .gridlayer path {
  stroke: var(--fm-chart-grid) !important;
}

.js-plotly-plot .zerolinelayer path {
  stroke: var(--fm-chart-reference) !important;
}

.js-plotly-plot .xtick text,
.js-plotly-plot .ytick text,
.js-plotly-plot .legendtext,
.js-plotly-plot .gtitle,
.js-plotly-plot .xtitle,
.js-plotly-plot .ytitle {
  fill: var(--fm-text-secondary) !important;
}

.js-plotly-plot .hoverlayer .hovertext path {
  fill: var(--fm-surface-raised) !important;
  stroke: var(--fm-border-strong) !important;
}

.js-plotly-plot .hoverlayer .hovertext text {
  fill: var(--fm-text-primary) !important;
}

/* Map common hard-coded neutral inline surfaces into theme surfaces. */
:root[data-theme] body [style*="background-color: rgb(0, 0, 0)"],
:root[data-theme] body [style*="background-color: #000000"],
:root[data-theme] body [style*="background: rgb(0, 0, 0)"],
:root[data-theme] body [style*="background: #000000"] {
  background-color: var(--fm-surface-1) !important;
}

:root[data-theme] body [style*="background-color: rgb(17, 17, 17)"],
:root[data-theme] body [style*="background-color: rgb(18, 18, 18)"],
:root[data-theme] body [style*="background-color: rgb(20, 20, 20)"],
:root[data-theme] body [style*="background-color: rgb(24, 24, 24)"],
:root[data-theme] body [style*="background-color: rgb(30, 30, 30)"],
:root[data-theme] body [style*="background-color: rgb(31, 31, 31)"],
:root[data-theme] body [style*="background-color: rgb(34, 34, 34)"] {
  background-color: var(--fm-surface-2) !important;
}

:root[data-theme="light"] body [style^="color: rgb(255, 255, 255)"],
:root[data-theme="light"] body [style*="; color: rgb(255, 255, 255)"],
:root[data-theme="light"] body [style^="color: white"],
:root[data-theme="light"] body [style*="; color: white"] {
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] h4,
:root[data-theme="light"] h5,
:root[data-theme="light"] h6,
:root[data-theme="light"] label,
:root[data-theme="light"] .tile-title,
:root[data-theme="light"] .country-tile-title,
:root[data-theme="light"] .currency-profile-section-title,
:root[data-theme="light"] .fxi-detail-name,
:root[data-theme="light"] .fxi-detail-card-title {
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .text-muted,
:root[data-theme="light"] small,
:root[data-theme="light"] .currency-alert-section-subtitle,
:root[data-theme="light"] .currency-profile-section-subtitle,
:root[data-theme="light"] .risk-preview-section-note,
:root[data-theme="light"] .fxi-eyebrow,
:root[data-theme="light"] .fundamental-report-meta {
  color: var(--fm-text-secondary) !important;
}

/* Preserve analytical semantics in both themes. */
.is-positive,
.is-bullish,
.cal2-actual-green,
.cal2-rev-green,
.risk-pro-value-up,
.fxi-tone--bullish,
.fxi-call-pill--bullish,
.fxi-bias-pill--bullish {
  color: var(--fm-positive) !important;
}

.is-negative,
.is-bearish,
.cal2-actual-red,
.cal2-rev-red,
.risk-pro-value-down,
.fxi-tone--bearish,
.fxi-call-pill--bearish,
.fxi-bias-pill--bearish {
  color: var(--fm-negative) !important;
}

.is-warning,
.cal2-yellow,
.cal2-impact-m,
.risk-pro-value-flat {
  color: var(--fm-warning) !important;
}

.cal2-forecast-blue,
.cal2-link-forecast,
.cal2-clickable-forecast,
.has-value.cal2-forecast-panel-cell {
  color: var(--fm-information) !important;
}

.cal2-impact-h {
  color: var(--fm-negative) !important;
}

.cal2-impact-l,
.is-neutral,
.fxi-tone--neutral,
.fxi-call-pill--neutral,
.fxi-bias-pill--neutral {
  color: var(--fm-text-secondary) !important;
}

/* Scrollbars follow the active theme without touching chart series. */
* {
  scrollbar-color: var(--fm-border-strong) var(--fm-surface-2);
}

*::-webkit-scrollbar-track {
  background: var(--fm-surface-2);
}

*::-webkit-scrollbar-thumb {
  background: var(--fm-border-strong);
  border: 2px solid var(--fm-surface-2);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--fm-action-hover);
}

@media (max-width: 720px) {
  .sidebar-theme-btn {
    min-height: 42px;
  }
}

/* Quarterly company fundamental tear sheet */
#earnings-fundamental-report-modal-shell {
    width: min(1320px, 96vw) !important;
}

.quarterly-report-content {
    display: grid;
    gap: 14px;
}

.quarterly-report-cover {
    margin-bottom: 0;
}

.report-overview-panel {
    border-color: rgba(200,182,255,0.22);
    background: linear-gradient(135deg, rgba(200,182,255,0.075), rgba(255,255,255,0.025));
}

.report-narrative-blocks {
    display: grid;
    gap: 9px;
}

.report-narrative-blocks p {
    margin: 0;
}

.quarterly-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 9px;
}

.quarterly-kpi-card {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 11px;
    background: rgba(255,255,255,0.035);
}

.quarterly-kpi-label {
    color: #94a3b8;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.quarterly-kpi-value {
    margin-top: 5px;
    color: #f8fafc;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;
}

.quarterly-kpi-caption {
    min-height: 14px;
    margin-top: 5px;
    color: #94a3b8;
    font-size: 10px;
    line-height: 1.35;
    text-transform: capitalize;
}

.quarterly-trend-section {
    padding: 17px;
    border: 1px solid rgba(200,182,255,0.2);
    border-radius: 14px;
    background: rgba(2,6,23,0.46);
}

.quarterly-section-heading {
    margin-bottom: 10px;
    color: #f8fafc;
    font-size: 18px;
    font-weight: 800;
}

.quarterly-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
    margin-top: 15px;
}

.quarterly-chart-panel {
    min-width: 0;
    overflow: hidden;
    padding: 12px 12px 4px;
    border: 1px solid rgba(255,255,255,0.085);
    border-radius: 12px;
    background: rgba(255,255,255,0.025);
}

.quarterly-chart-title {
    color: #f8fafc;
    font-size: 13px;
    font-weight: 800;
}

.quarterly-chart-subtitle {
    min-height: 30px;
    margin-top: 3px;
    color: #94a3b8;
    font-size: 10px;
    line-height: 1.4;
}

.quarterly-chart {
    min-height: 310px;
}

.quarterly-history-details {
    margin-top: 13px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.085);
    border-radius: 10px;
    background: rgba(0,0,0,0.16);
}

.quarterly-history-details > summary {
    padding: 10px 12px;
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
}

.quarterly-history-scroll {
    overflow-x: auto;
    border-top: 1px solid rgba(255,255,255,0.07);
}

.quarterly-history-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.quarterly-history-table th,
.quarterly-history-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.055);
    color: #dbe4ef;
    font-size: 10.5px;
    text-align: right;
    white-space: nowrap;
}

.quarterly-history-table th {
    position: sticky;
    top: 0;
    background: #11151d;
    color: #94a3b8;
    font-size: 9.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.quarterly-history-table th:first-child,
.quarterly-history-table td:first-child {
    text-align: left;
}

.quarterly-history-empty {
    margin-top: 12px;
    padding: 12px;
    border-radius: 9px;
    background: rgba(255,255,255,0.03);
    color: #94a3b8;
    font-size: 11px;
}

.report-evidence-divider {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid rgba(200,182,255,0.22);
    color: #ddd6fe;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.report-forward-divider {
    border-top-color: rgba(56,189,248,0.24);
    color: #7dd3fc;
}

.report-news-panel {
    margin-top: 0;
}

.report-strengths-panel {
    border-color: rgba(94,234,212,0.18);
}

.report-risks-panel {
    border-color: rgba(251,113,133,0.2);
}

.report-bottom-line-panel {
    border-color: rgba(245,209,15,0.22);
    background: linear-gradient(135deg, rgba(245,209,15,0.065), rgba(255,255,255,0.02));
}

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

@media (max-width: 760px) {
    .quarterly-report-content {
        gap: 10px;
    }

    .quarterly-trend-section {
        padding: 12px;
    }

    .quarterly-kpi-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quarterly-chart-grid {
        display: block;
    }

    .quarterly-chart-panel + .quarterly-chart-panel {
        margin-top: 10px;
    }

    .quarterly-chart-panel {
        padding: 10px 8px 2px;
    }

    .quarterly-chart {
        min-height: 300px;
    }

    .fundamental-report-company {
        font-size: 22px;
    }
}
/* Earnings light-mode surfaces and semantic table colours. */
:root[data-theme="light"] #earnings-tile-1 .tile-inner-strong {
  background: var(--fm-surface-2) !important;
  background-color: var(--fm-surface-2) !important;
  background-image: none !important;
  border-color: var(--fm-border-subtle) !important;
  box-shadow: none !important;
}
:root[data-theme="light"] #earnings-tile-1 .tile-inner-strong [style*="text-transform"] {
  color: var(--fm-text-primary) !important;
  -webkit-text-fill-color: var(--fm-text-primary) !important;
  opacity: 1 !important;
}
:root[data-theme="light"] #earnings-grid .ag-cell.earnings-company-cell,
:root[data-theme="light"] #earnings-grid .ag-cell.earnings-company-cell .ag-cell-value,
:root[data-theme="light"] .stocks-desktop-grid .ag-cell.stocks-company-cell,
:root[data-theme="light"] .stocks-desktop-grid .ag-cell.stocks-company-cell .ag-cell-value {
  color: #2446B8 !important;
  -webkit-text-fill-color: #2446B8 !important;
  font-weight: 700 !important;
}
:root[data-theme="dark"] #earnings-grid .ag-cell.earnings-company-cell,
:root[data-theme="dark"] #earnings-grid .ag-cell.earnings-company-cell .ag-cell-value,
:root[data-theme="dark"] .stocks-desktop-grid .ag-cell.stocks-company-cell,
:root[data-theme="dark"] .stocks-desktop-grid .ag-cell.stocks-company-cell .ag-cell-value {
  color: #C8B6FF !important;
  -webkit-text-fill-color: #C8B6FF !important;
  font-weight: 700 !important;
}
:root[data-theme="light"] .stocks-desktop-grid .ag-cell.stocks-positive-cell,
:root[data-theme="light"] .stocks-desktop-grid .ag-cell.stocks-positive-cell .ag-cell-value {
  color: #137333 !important;
  -webkit-text-fill-color: #137333 !important;
  font-weight: 700 !important;
}
:root[data-theme="light"] .stocks-desktop-grid .ag-cell.stocks-negative-cell,
:root[data-theme="light"] .stocks-desktop-grid .ag-cell.stocks-negative-cell .ag-cell-value {
  color: #B42336 !important;
  -webkit-text-fill-color: #B42336 !important;
  font-weight: 700 !important;
}
:root[data-theme="dark"] .stocks-desktop-grid .ag-cell.stocks-positive-cell,
:root[data-theme="dark"] .stocks-desktop-grid .ag-cell.stocks-positive-cell .ag-cell-value {
  color: #57D690 !important;
  -webkit-text-fill-color: #57D690 !important;
  font-weight: 700 !important;
}
:root[data-theme="dark"] .stocks-desktop-grid .ag-cell.stocks-negative-cell,
:root[data-theme="dark"] .stocks-desktop-grid .ag-cell.stocks-negative-cell .ag-cell-value {
  color: #FF718A !important;
  -webkit-text-fill-color: #FF718A !important;
  font-weight: 700 !important;
}


/* ========================================================================== 
   MOBILE CONTROL SPACING — News, Positioning and Implied Volatility
   ========================================================================== */
#news-feed-wrapper .news-cluster-badge::after,
#news-feed-wrapper .news-cluster.expanded .news-cluster-badge::after {
    content:none !important; display:none !important;
}
#news-feed-wrapper .news-cluster-badge,
#news-feed-wrapper .news-analysis-badge {
    width:72px !important; min-width:72px !important; max-width:72px !important;
    height:22px !important; min-height:22px !important; box-sizing:border-box !important;
    padding:3px 4px !important; font-size:8px !important;
}

.positioning-page-content { min-width:0; box-sizing:border-box; }

@media (max-width:720px) {
    .news-page-controls,
    .news-home-controls {
        display:grid !important; grid-template-columns:minmax(0,1fr) !important;
        align-items:stretch !important; gap:7px !important; width:100% !important;
    }
    .news-page-controls .news-tag-filter-dropdown,
    .news-page-controls .news-page-search,
    .news-home-controls .news-tag-filter-dropdown,
    .news-home-controls .pill-search-input,
    .news-page-controls .news-timezone-control,
    .news-home-controls .news-timezone-control {
        grid-column:1 !important; width:100% !important; min-width:0 !important;
        max-width:none !important; margin:0 !important; box-sizing:border-box !important;
    }
    .news-page-controls .news-tag-filter-dropdown .Select,
    .news-page-controls .news-tag-filter-dropdown .Select-control,
    .news-home-controls .news-tag-filter-dropdown .Select,
    .news-home-controls .news-tag-filter-dropdown .Select-control {
        width:100% !important; min-width:0 !important; max-width:none !important;
        box-sizing:border-box !important;
    }
    .news-page-controls .news-timezone-control,
    .news-home-controls .news-timezone-control {
        display:grid !important; grid-template-columns:20px minmax(0,1fr); gap:5px;
    }
    .news-timezone-dropdown,
    .news-timezone-dropdown .Select,
    .news-timezone-dropdown .Select-control {
        width:100% !important; min-width:0 !important; max-width:none !important;
        box-sizing:border-box !important;
    }

    .positioning-page-content {
        padding:10px 4px 10px 10px !important; overflow-x:hidden !important;
    }
    .positioning-main-grid {
        width:100% !important; min-width:0 !important; padding-right:0 !important;
        column-gap:0 !important;
    }
    #positioning-tile-1 {
        width:100% !important; min-width:0 !important; max-width:none !important;
    }
    #positioning-tile-1 .positioning-tile-header {
        display:grid !important; grid-template-columns:minmax(0,1fr) max-content !important;
        align-items:start !important; gap:8px !important; padding-right:0 !important;
    }
    #positioning-tile-1 .positioning-tile-header > .tile-title-with-help {
        grid-column:1; grid-row:1; width:100%; min-width:0; max-width:100%;
    }
    #positioning-tile-1 .positioning-tile-header > .positioning-tile-collapse-btn {
        position:static !important; grid-column:2; grid-row:1; justify-self:end;
    }
    #positioning-tile-1 .positioning-header-controls {
        grid-column:1 / -1; grid-row:2; display:flex !important; width:100%; min-width:0;
        align-items:center !important; justify-content:flex-start !important;
        flex-wrap:wrap !important; gap:6px !important;
    }
    #positioning-tile-1 .positioning-header-controls .btn-group {
        display:flex !important; flex-wrap:wrap !important; gap:4px !important;
        width:100%; min-width:0;
    }
    #positioning-tile-1 .positioning-header-controls .btn-group > * {
        margin:0 !important; border-radius:999px !important;
    }

    .ivol-tile-header {
        display:grid !important; grid-template-columns:minmax(0,1fr) max-content !important;
        align-items:start !important; gap:8px !important; padding-right:0 !important;
    }
    .ivol-tile-header > .tile-title-with-help {
        grid-column:1; grid-row:1; display:flex !important; width:100%; min-width:0;
        max-width:100%; align-items:center; gap:6px; overflow:visible;
    }
    .ivol-tile-header > .tile-title-with-help h3 {
        flex:0 1 auto; min-width:0; overflow-wrap:anywhere;
    }
    .ivol-tile-header > .tile-title-with-help .tile-help-control { flex:0 0 auto; }
    .ivol-tile-header > .ivol-tile-collapse-btn {
        position:static !important; grid-column:2; grid-row:1; justify-self:end;
    }
    .ivol-tile-header > .ivol-header-controls {
        grid-column:1 / -1; grid-row:2; width:100%; min-width:0;
        align-items:flex-start !important; justify-content:flex-start !important;
    }
    .ivol-header-controls .pill-group {
        display:flex !important; flex-wrap:wrap !important; gap:6px !important;
    }
    .ivol-header-controls .pill-group label { margin:0 !important; }

    #ivol-tile-2 .ivol-header-controls {
        display:grid !important; grid-template-columns:minmax(0,1fr) !important;
        justify-items:start !important; gap:8px !important;
    }
    #ivol-tile-2 .ivol-header-controls .pill-dropdown,
    #ivol-tile-2 .ivol-header-controls .Select,
    #ivol-tile-2 .ivol-header-controls .Select-control {
        margin-left:0 !important; margin-right:0 !important;
    }
    #ivol-tile-2 .ivol-tile-header > .ivol-collapsible-body:not(.ivol-header-controls) {
        grid-column:1 / -1; grid-row:3; justify-self:start !important;
    }
    #ivol-tile2-expand-btn { margin-left:0 !important; }

    #ivol-tile-3 .ivol-tile-header {
        grid-template-columns:minmax(0,1fr) max-content !important;
    }
    #ivol-tile-3 .ivol-history-lookback-wrap {
        grid-column:1; grid-row:2; justify-self:start !important;
    }
    #ivol-tile-3 .ivol-tile-header > .ivol-collapsible-body:not(.ivol-history-lookback-wrap) {
        grid-column:2; grid-row:2; justify-self:end !important;
    }
    #ivol-tile3-expand-btn { margin-left:0 !important; }
}

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("fonts/PlusJakartaSans-SemiBold.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

:root {
    --dashboard-font-family: "Plus Jakarta Sans", sans-serif;
    --dashboard-font-medium: 500;
    --dashboard-font-semibold: 600;
}

/****************************************************************************** 
======================= GLOBAL & SHARED STYLES ================================
******************************************************************************/

html,
body,
button,
input,
select,
textarea {
    font-family: var(--dashboard-font-family);
    font-weight: var(--dashboard-font-medium);
    letter-spacing: 0.01em;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
b,
th,
legend {
    font-weight: var(--dashboard-font-semibold);
}

code,
pre,
kbd,
samp {
    font-family: inherit;
}





/******************************************************************************
============================= HOME PAGE NEWS ==================================
******************************************************************************/

/* Style for each news item */
.news-item {
    padding: 6px 8px;
    margin-bottom: 2px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    min-height: 30px;
}

/* Hover effect */
.news-item:hover {
    background-color: #242424;
    cursor: pointer;
    transform: none;
}

/* Timestamp block */
.news-timestamp {
    width: 82px;
    min-width: 82px;
    flex-shrink: 0;
    margin-right: 8px;
    border-right: 1px solid #3a3a3a;
    padding-right: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

/* Date line */
.date {
    font-size: 10px;
    color: #c9c9c9;
    line-height: 1.1;
    margin-bottom: 1px;
}

.news-timestamp .date {
    white-space: nowrap;
    word-break: keep-all;
}

/* Time line */
.time {
    font-size: 10px;
    color: #8f8f8f;
    line-height: 1.1;
}

/* Headline content */
.news-headline {
    color: #ffffff;
    font-size: 11.5px;
    line-height: 1.3;
    white-space: normal;
    word-break: break-word;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
}

/* Cluster headline wrapper on anchor rows */
#news-feed-wrapper .news-headline-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
}

#news-feed-wrapper .news-headline-wrap .news-headline {
    display: inline;
    flex: 0 1 auto;
}

/* Cluster badge on the anchor row */
#news-feed-wrapper .news-cluster-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 0;
    padding: 2px 8px;
    font-family: inherit;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    color: #ffe9a6;
    background: rgba(255, 216, 77, 0.16);
    border: 1px solid rgba(255, 216, 77, 0.36);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(255, 216, 77, 0.13), inset 0 0 0 1px rgba(255, 216, 77, 0.08);
    cursor: pointer;
    transition: background 120ms ease, box-shadow 120ms ease;
    user-select: none;
    appearance: none;
}

#news-feed-wrapper .news-analysis-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    font-family: inherit;
    font-size: 0.72em;
    font-weight: 700;
    line-height: 1.15;
    color: #ffd6d6;
    background: rgba(255, 86, 86, 0.16);
    border: 1px solid rgba(255, 86, 86, 0.34);
    border-radius: 10px;
    cursor: pointer;
    transition: background 120ms ease;
    user-select: none;
    appearance: none;
}

#news-feed-wrapper .news-analysis-badge:hover {
    background: rgba(255, 86, 86, 0.26);
}

#news-feed-wrapper .news-cluster-badge:hover {
    background: rgba(255, 216, 77, 0.25);
    box-shadow: 0 0 13px rgba(255, 216, 77, 0.20), inset 0 0 0 1px rgba(255, 216, 77, 0.12);
}

#news-feed-wrapper .news-cluster-badge::before {
    content: "▸";
    font-size: 0.85em;
    transition: transform 150ms ease;
}

#news-feed-wrapper .news-cluster.expanded .news-cluster-badge::before {
    transform: rotate(90deg);
}

#news-feed-wrapper .news-cluster-badge::before {
    content: none;
    display: none;
}

/* Indented cluster member list */
#news-feed-wrapper .news-cluster-members {
    display: none;
    margin: 3px 0 7px 24px;
    border-left: 2px solid rgba(120, 160, 220, 0.25);
    padding-left: 10px;
}

#news-feed-wrapper .news-cluster.expanded .news-cluster-members {
    display: block;
}

#news-feed-wrapper .news-cluster-members .news-item {
    opacity: 0.85;
    font-size: 0.95em;
    background: rgba(120, 160, 220, 0.035);
    border-radius: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
}

#news-feed-wrapper .news-cluster-members .news-item:hover {
    background: rgba(120, 160, 220, 0.075);
}

#news-feed-wrapper .news-cluster-members .news-item .news-timestamp {
    font-size: 0.85em;
    width: 58px;
    min-width: 58px;
    border-right: 0;
    opacity: 0.78;
}

#news-feed-wrapper .news-cluster-members .news-item .date,
#news-feed-wrapper .news-cluster-members .news-item .time {
    font-size: 9px;
}

/* === Home feed content wrapper === */
#news-feed-wrapper .home-news-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

/* === Home feed metadata/actions row === */
#news-feed-wrapper .home-news-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 18px;
    width: 100%;
}

/* === Home feed tags row === */
#news-feed-wrapper .home-news-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    min-height: 18px;
    flex: 1 1 auto;
    min-width: 0;
}

#news-feed-wrapper .home-news-tags--empty {
    min-height: 18px;
}

#news-feed-wrapper .home-news-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex: 0 0 auto;
    margin-left: auto;
    margin-right: 6px;
    min-height: 18px;
}

#news-feed-wrapper .home-news-actions--empty {
    min-width: 0;
}

/* === Home feed tag pill === */
#news-feed-wrapper .home-news-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 8px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,0.10);
    text-transform: uppercase;
}

#news-feed-wrapper .home-news-importance-tag--3 {
    background: rgba(255, 80, 80, 0.18) !important;
    color: #ffc1c1 !important;
    border-color: rgba(255, 80, 80, 0.42) !important;
}

#news-feed-wrapper .news-item.news-importance-level-3 {
    background: linear-gradient(90deg, rgba(255, 70, 70, 0.13), rgba(255, 70, 70, 0.035));
    box-shadow: 0 0 14px rgba(255, 70, 70, 0.20), inset 0 0 0 1px rgba(255, 70, 70, 0.16);
}

#news-feed-wrapper .news-item.news-importance-level-3:hover {
    background: linear-gradient(90deg, rgba(255, 70, 70, 0.18), rgba(255, 70, 70, 0.055));
}

#news-feed-wrapper .news-item.news-importance-level-2 {
    background: linear-gradient(90deg, rgba(255, 210, 80, 0.075), rgba(255, 210, 80, 0.02));
    box-shadow: 0 0 10px rgba(255, 210, 80, 0.09), inset 0 0 0 1px rgba(255, 210, 80, 0.08);
}

#news-feed-wrapper .news-item.news-importance-level-2:hover {
    background: linear-gradient(90deg, rgba(255, 210, 80, 0.105), rgba(255, 210, 80, 0.035));
}

#news-feed-wrapper .news-analysis-panel {
    margin-top: 5px;
    padding: 7px 9px;
    color: #d6dde6;
    background: rgba(255, 255, 255, 0.045);
    border-left: 2px solid rgba(255, 86, 86, 0.38);
    border-radius: 4px;
    font-size: 10.5px;
    line-height: 1.35;
}

#news-feed-wrapper .news-analysis-panel > div + div {
    margin-top: 4px;
}

#news-feed-wrapper .news-analysis-panel strong {
    color: #ffffff;
    display: block;
    margin-bottom: 3px;
}

#news-feed-wrapper .news-analysis-panel p {
    margin: 0 0 5px;
}

#news-feed-wrapper .news-analysis-panel p:last-child {
    margin-bottom: 0;
}

/* === Secondary tags: always grey === */
#news-feed-wrapper .home-news-tag--secondary {
    background: rgba(140, 140, 140, 0.16) !important;
    color: #d0d0d0 !important;
    border-color: rgba(160, 160, 160, 0.28) !important;
}

/* === Primary tag colours only === */
#news-feed-wrapper .home-news-tag--primary.home-news-tag--geopolitics {
    background: rgba(191, 101, 207, 0.18);
    color: #d8a6e4;
    border-color: rgba(191, 101, 207, 0.35);
}

#news-feed-wrapper .home-news-tag--primary.home-news-tag--politics {
    background: rgba(255, 184, 77, 0.16);
    color: #ffd084;
    border-color: rgba(255, 184, 77, 0.32);
}

#news-feed-wrapper .home-news-tag--primary.home-news-tag--central_banks {
    background: rgba(69, 193, 255, 0.16);
    color: #8fdcff;
    border-color: rgba(69, 193, 255, 0.34);
}

#news-feed-wrapper .home-news-tag--primary.home-news-tag--macro_data {
    background: rgba(134, 255, 107, 0.14);
    color: #b8ff9f;
    border-color: rgba(134, 255, 107, 0.30);
}

#news-feed-wrapper .home-news-tag--primary.home-news-tag--forex {
    background: rgba(0, 176, 246, 0.16);
    color: #8adfff;
    border-color: rgba(0, 176, 246, 0.34);
}

#news-feed-wrapper .home-news-tag--primary.home-news-tag--equities {
    background: rgba(255, 77, 143, 0.15);
    color: #ff9fc3;
    border-color: rgba(255, 77, 143, 0.32);
}

#news-feed-wrapper .home-news-tag--primary.home-news-tag--fixed_income {
    background: rgba(160, 160, 255, 0.16);
    color: #c4c4ff;
    border-color: rgba(160, 160, 255, 0.32);
}

#news-feed-wrapper .home-news-tag--primary.home-news-tag--commodities {
    background: rgba(255, 216, 77, 0.15);
    color: #ffe48a;
    border-color: rgba(255, 216, 77, 0.30);
}

#news-feed-wrapper .home-news-tag--primary.home-news-tag--crypto {
    background: rgba(255, 140, 0, 0.16);
    color: #ffbf73;
    border-color: rgba(255, 140, 0, 0.32);
}

#news-feed-wrapper .home-news-tag--primary.home-news-tag--stocks {
    background: rgba(0, 230, 118, 0.14);
    color: #8cffbf;
    border-color: rgba(0, 230, 118, 0.30);
}

#news-feed-wrapper .home-news-tag--primary.home-news-tag--earnings {
    background: rgba(255, 92, 92, 0.15);
    color: #ffb0b0;
    border-color: rgba(255, 92, 92, 0.30);
}

#news-feed-wrapper .home-news-tag--primary.home-news-tag--miscellaneous {
    background: rgba(140, 140, 140, 0.16);
    color: #d0d0d0;
    border-color: rgba(160, 160, 160, 0.28);
}

/* === Home Page News: simple name highlight === */
.hl-news-name {
    color: #bf65cf;
    font-weight: 800;
}

/* --- Home page: News search pill --- */
.pill-search-input {
  background-color: #1e1e1e;
  border: 1px solid #2b2b2b;
  border-radius: 9999px;
  padding: 3px 10px;
  min-width: 120px;
  color: #ffffff;
  font-size: 11px;
  line-height: 1.1;
  outline: none;
}

.pill-search-input::placeholder {
  color: #888888;
}




/* --- Home news controls row --- */
.news-tag-filter-dropdown {
  width: 160px !important;
  min-width: 160px !important;
  max-width: 160px !important;
  flex: 0 0 160px !important;
}

/* Outer control */
.news-tag-filter-dropdown .Select-control,
.news-tag-filter-dropdown .Select--multi .Select-control {
  background-color: #1e1e1e !important;
  border: 1px solid #2b2b2b !important;
  border-radius: 9999px !important;
  min-height: 28px !important;
  height: 28px !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}

/* Value area */
.news-tag-filter-dropdown .Select-multi-value-wrapper,
.news-tag-filter-dropdown .Select-value {
  display: flex;
  align-items: center;
  max-width: 116px;
  overflow: hidden !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
}

/* Input / placeholder */
.news-tag-filter-dropdown .Select-placeholder,
.news-tag-filter-dropdown .Select-input > input {
  color: #ffffff !important;
  font-size: 11px !important;
  line-height: 26px !important;
}

.news-tag-filter-dropdown .Select-placeholder {
  color: #888888 !important;
  padding-left: 2px;
}

/* Arrow / clear icons */
.news-tag-filter-dropdown .Select-arrow-zone,
.news-tag-filter-dropdown .Select-clear-zone {
  color: #bbbbbb !important;
}

.news-tag-filter-dropdown .Select-arrow-zone:hover,
.news-tag-filter-dropdown .Select-clear-zone:hover {
  color: #ffffff !important;
}

/* Selected tag chips inside dropdown */
.news-tag-filter-dropdown .Select--multi .Select-value,
.news-tag-filter-dropdown .Select-value {
  background-color: rgba(139, 92, 246, 0.18) !important;
  border: 1px solid rgba(139, 92, 246, 0.35) !important;
  border-radius: 9999px !important;
  color: #e7d7ff !important;
  font-size: 9px !important;
  line-height: 1 !important;
  height: 18px !important;
  min-height: 18px !important;
  margin-top: 1px !important;
  margin-bottom: 1px !important;
  margin-right: 4px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  max-width: 104px !important;
  overflow: hidden !important;
}

.news-tag-filter-dropdown .Select-value-icon {
  border-right: 1px solid rgba(139, 92, 246, 0.25) !important;
  color: #d8c1ff !important;
  padding: 0 5px !important;
  line-height: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.news-tag-filter-dropdown .Select-value-icon:hover {
  background-color: rgba(139, 92, 246, 0.12) !important;
  color: #ffffff !important;
}

.news-tag-filter-dropdown .Select-value-label {
  color: #e7d7ff !important;
  padding: 0 6px !important;
  line-height: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  max-width: 74px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Menu */
.news-tag-filter-dropdown .Select-menu-outer {
  background: #1e1e1e !important;
  border: 1px solid #2b2b2b !important;
  border-radius: 10px !important;
  margin-top: 6px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35) !important;
  z-index: 10000 !important;
}

.news-tag-filter-dropdown .Select-option {
  background: #1e1e1e !important;
  color: #ffffff !important;
  font-size: 11px !important;
  padding: 7px 10px !important;
}

.news-tag-filter-dropdown .Select-option.is-focused {
  background: #2a2a2a !important;
  color: #ffffff !important;
}

.news-tag-filter-dropdown .Select-option.is-selected {
  background: #2e2153 !important;
  color: #ffd700 !important;
}

/* Keep the search bar a touch smaller */
.pill-search-input {
  padding: 2px 10px;
  min-width: 120px;
  font-size: 10.5px;
  line-height: 1.05;
  width: 160px !important;
  min-width: 160px !important;
  max-width: 160px !important;
  flex: 0 0 160px !important;
}

/* Prevent clipping */
#news-feed-wrapper,
.news-tag-filter-dropdown,
.news-tag-filter-dropdown .Select {
  overflow: visible !important;
}




/******************************************************************************
========================= HOME PAGE ASSET PERFORMANCE =========================
******************************************************************************/


perf-container {
    display: grid;
    grid-auto-rows: minmax(0, 1fr);
    width: 100%;
    height: 100%;
    gap: 3px;
    overflow: hidden;
    box-sizing: border-box;
}

/* ===========================================================
   UNIFIED GRID FOR BOTH HEADER & ROWS
   =========================================================== */

.perf-header-row,
.perf-row {
    display: grid;
    grid-template-columns: minmax(76px, 88px) 22px 62px minmax(0, 1fr);
    align-items: center;
    padding: 3px 4px;
    min-height: 23px;
    column-gap: 4px;
    box-sizing: border-box;
}

/* ===========================================================
   HEADER
   =========================================================== */

.perf-header-row {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #b8b8b8;
    padding-top: 5px;
    padding-bottom: 9px;
    border-bottom: 1px solid #3f3f3f;
}

.perf-header-symbol {
    text-align: left;
    padding-right: 6px;
    border-right: 1px solid #333;
}

.perf-header-dot {
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-right: 1px solid #333;
}

.perf-header-pct {
    text-align: center;
    padding: 0 4px;
    border-right: 1px solid #333;
}

.perf-header-bar {
    text-align: center;
    padding: 0 6px;
}

.perf-sort-button {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-width: 0;
    min-height: 18px;
    margin: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.perf-sort-button.perf-header-symbol {
    justify-content: flex-start;
}

.perf-sort-button.perf-header-symbol,
.perf-sort-button.perf-header-dot,
.perf-sort-button.perf-header-pct {
    border-right: 1px solid #333;
}

.perf-sort-button:hover,
.perf-sort-button--active {
    color: #fff;
}

.perf-sort-button i {
    flex: 0 0 auto;
    color: #b89cff;
    font-size: 9px;
}

/* ===========================================================
   ROWS
   =========================================================== */

.perf-symbol {
    font-weight: 600;
    font-size: 11px;
    line-height: 1.1;
    color: #e0e0e0;
    text-align: left;
    padding-right: 6px;
    border-right: 1px solid #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.perf-sentiment-dot {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center !important;
    border-right: 1px solid #333;
    font-size: 10px;
    line-height: 1;
    margin-left: 0 !important;
}

.perf-pct {
    text-align: center !important;
    padding: 0 4px;
    border-right: 1px solid #333;
    font-weight: 700;
    font-size: 11px;
    line-height: 1.1;
    white-space: nowrap;
    margin-left: 0 !important;
}

/* ===========================================================
   BAR COLUMN
   =========================================================== */

.perf-bar {
    height: 11px;
    background-color: #1a1a1a;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    min-width: 0;
}

.perf-bar div {
    height: 100%;
    border-radius: 6px;
}

.perf-bar::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #5a5a5a;
    transform: translateX(-0.5px);
    z-index: 2;
}






/******************************************************************************
========================== HOME PAGE VIDEO COMMENTARY =========================
******************************************************************************/



/* --- Responsive grid for the video cards --- */
.video-list {
  /* Use a grid so cards flow horizontally on wider viewports.  Each card has
     a minimum width of 200px and grows to fill the available space. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  overflow-y: auto;
  min-height: 200px;
  padding: 4px;
}

.video-list .video-card {
  display: flex;
  flex-direction: column;
  background-color: #222;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.video-list .video-card:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}

.video-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

.video-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  padding: 6px 8px 2px 8px;
}

.video-date {
  font-size: 12px;
  color: #bbb;
  padding: 0 8px 6px 8px;
}

.play-btn {
  margin-top: 6px;
  padding: 6px 10px;
  border: none;
  border-radius: 8px;
  background: #333;
  color: #fff;
  cursor: pointer;
  z-index: 10;
}


.video-card { display: flex; flex-direction: column; gap: 6px; }
.video-embed { width: 100%; aspect-ratio: 16/9; border: none; border-radius: 10px; display: block; background: #000; }
.close-video-btn {
  position: absolute; top: 6px; right: 6px;
  border: none; background: rgba(0,0,0,0.45); color: #fff;
  width: 28px; height: 28px; line-height: 28px;
  border-radius: 50%; cursor: pointer; font-size: 18px; padding: 0;
}
.close-video-btn:hover { background: rgba(0,0,0,0.65); }


/* ---------- Video tabs (pills) ---------- */
/* Tabs: pills, no wrap */
.video-tabs {
  border-bottom: none !important;
  display: flex;
  gap: 20px;
  flex-wrap: nowrap;       /* stay on one line */
  overflow: hidden;        /* avoid accidental scrollbar */
}

/* Each tab uses the `video-tab` class.  We avoid styling Dash's internal
   `.tab` selector directly and instead apply styles to our own classes. */
.video-tabs .video-tab {
  background: #1a1a1a !important;
  color: #cfcfcf !important;
  border: 1px solid #2b2b2b !important;
  border-radius: 9999px !important;
  padding: 6px 12px !important;
  font-size: 12px;
  white-space: nowrap;           /* never break labels */
  transition: background .2s, color .2s, box-shadow .2s, transform .2s;
}

.video-tabs .video-tab:hover {
  background: #232323 !important;
  color: #fff !important;
  transform: translateY(-1px);
}

/* The active tab receives `video-tab--selected` from the `selected_className`
   prop in Python. */
.video-tabs .video-tab--selected {
  background: #2e2153 !important;   /* purple-ish bg */
  color: #FFD700 !important;        /* yellow text */
  box-shadow: 0 0 0 2px #8B5CF6 inset;
}

/* Header row: keep left, keep on one line */
.video-header {
  display: flex;
  align-items: center;
  gap: 12px;               /* space between H3 and tabs */
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: nowrap;       /* don't let "Previews" drop */
}


.video-embed {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: none;
  display: block;
  background: #000;
}



/******************************************************************************
========================== HOME PAGE RATE EXPECTATIONS ========================
APPLY TO TILE + MODAL
******************************************************************************/

/* === Rate Expectations tile/modal (compact home version) === */
#rate-expectations-table .rate-card-wrap,
#rate-expectations-modal-body .rate-card-wrap {
  padding: 4px 2px;
  overflow: hidden !important;
  flex: 1 1 auto;
  min-height: 0;
}

#rate-expectations-table .rate-card,
#rate-expectations-modal-body .rate-card {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 6px;
  font-family: var(--dashboard-font-family);
  color: #e9e9e9;
  font-size: 11px;
}

#rate-expectations-table .rate-card thead th,
#rate-expectations-modal-body .rate-card thead th {
  text-align: left;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .02em;
  color: #bdbdbd;
  padding: 4px 6px 5px;
  border-bottom: 1px solid #2b2b2b;
}

#rate-expectations-table .rate-card tbody tr,
#rate-expectations-modal-body .rate-card tbody tr {
  background: #171717;
  box-shadow: 0 1px 0 #2b2b2b;
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

#rate-expectations-table .rate-card tbody tr:hover,
#rate-expectations-modal-body .rate-card tbody tr:hover {
  background: #202020;
  box-shadow: 0 1px 0 #343434;
}

#rate-expectations-table .rate-card th,
#rate-expectations-table .rate-card td,
#rate-expectations-modal-body .rate-card th,
#rate-expectations-modal-body .rate-card td {
  overflow: hidden;
  text-overflow: ellipsis;
}

#rate-expectations-table .rate-card td,
#rate-expectations-modal-body .rate-card td {
  padding: 4px 5px;
  vertical-align: middle;
  font-size: 11px;
  line-height: 1.1;
}

/* Central bank cell */
#rate-expectations-table .rate-card .cb-cell,
#rate-expectations-modal-body .rate-card .cb-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

#rate-expectations-table .rate-card .cb-flag,
#rate-expectations-modal-body .rate-card .cb-flag {
  font-size: 8px;
  line-height: 1;
  flex-shrink: 0;
}

#rate-expectations-table .rate-card th:nth-child(2),
#rate-expectations-table .rate-card td:nth-child(2),
#rate-expectations-modal-body .rate-card th:nth-child(2),
#rate-expectations-modal-body .rate-card td:nth-child(2) {
  width: 18%;
  text-align: center;
}

#rate-expectations-table .rate-card th:nth-child(3),
#rate-expectations-table .rate-card td:nth-child(3),
#rate-expectations-modal-body .rate-card th:nth-child(3),
#rate-expectations-modal-body .rate-card td:nth-child(3) {
  width: 10%;
  text-align: center;
}

#rate-expectations-table .rate-card th:nth-child(4),
#rate-expectations-table .rate-card td:nth-child(4),
#rate-expectations-modal-body .rate-card th:nth-child(4),
#rate-expectations-modal-body .rate-card td:nth-child(4) {
  width: 12%;
  text-align: center;
}

#rate-expectations-table .rate-card th:nth-child(5),
#rate-expectations-table .rate-card td:nth-child(5),
#rate-expectations-modal-body .rate-card th:nth-child(5),
#rate-expectations-modal-body .rate-card td:nth-child(5) {
  width: 14.5%;
  text-align: center;
}

#rate-expectations-table .rate-card th:nth-child(6),
#rate-expectations-table .rate-card td:nth-child(6),
#rate-expectations-modal-body .rate-card th:nth-child(6),
#rate-expectations-modal-body .rate-card td:nth-child(6) {
  width: 14.5%;
  text-align: center;
}

#rate-expectations-table .rate-card th:nth-child(7),
#rate-expectations-table .rate-card td:nth-child(7),
#rate-expectations-modal-body .rate-card th:nth-child(7),
#rate-expectations-modal-body .rate-card td:nth-child(7) {
  width: 14.5%;
  text-align: center;
}

#rate-expectations-table .rate-card .next-meeting-cell,
#rate-expectations-modal-body .rate-card .next-meeting-cell {
  font-size: 9px;
  line-height: 1.1;
}

#rate-expectations-table .rate-card .cb-name,
#rate-expectations-modal-body .rate-card .cb-name {
  font-weight: 700;
  font-size: 11px;
  line-height: 1.1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Implied BSP coloring */
#rate-expectations-table .rate-card .bsp,
#rate-expectations-modal-body .rate-card .bsp {
  font-weight: 700;
  font-size: 10px;
}

#rate-expectations-table .rate-card .bsp.neg,
#rate-expectations-modal-body .rate-card .bsp.neg {
  color: #ff4d4f;
}

#rate-expectations-table .rate-card .bsp.pos,
#rate-expectations-modal-body .rate-card .bsp.pos {
  color: #86ff6b;
}

/* Move badges */
#rate-expectations-table .rate-card .badge,
#rate-expectations-modal-body .rate-card .badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 10px;
  line-height: 1.05;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}

#rate-expectations-table .rate-card .badge-cut,
#rate-expectations-modal-body .rate-card .badge-cut {
  background: #2b1430;
  color: #e08bff;
}

#rate-expectations-table .rate-card .badge-hold,
#rate-expectations-modal-body .rate-card .badge-hold {
  background: #2a2a1a;
  color: #ffd84d;
}

#rate-expectations-table .rate-card .badge-hike,
#rate-expectations-modal-body .rate-card .badge-hike {
  background: #0f2b16;
  color: #86ff6b;
}

/* Probability cells */
#rate-expectations-table .rate-card .prob-cell,
#rate-expectations-modal-body .rate-card .prob-cell {
  width: 14%;
  min-width: 74px;
}

#rate-expectations-table .rate-card .prob-num,
#rate-expectations-modal-body .rate-card .prob-num {
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
  font-feature-settings: "tnum" 1, "lnum" 1;
  margin-bottom: 4px;
}

#rate-expectations-table .rate-card .prob-bar,
#rate-expectations-modal-body .rate-card .prob-bar {
  height: 7px;
  background: #2b2b2b;
  border-radius: 6px;
  overflow: hidden;
}

#rate-expectations-table .rate-card .prob-fill,
#rate-expectations-modal-body .rate-card .prob-fill {
  height: 100%;
  border-radius: 6px;
}

#rate-expectations-table .rate-card .prob-bar.cut .prob-fill,
#rate-expectations-modal-body .rate-card .prob-bar.cut .prob-fill {
  background: linear-gradient(90deg, #a64fff, #ff8bff);
}

#rate-expectations-table .rate-card .prob-bar.hold .prob-fill,
#rate-expectations-modal-body .rate-card .prob-bar.hold .prob-fill {
  background: linear-gradient(90deg, #ffd84d, #ffb84d);
}

#rate-expectations-table .rate-card .prob-bar.hike .prob-fill,
#rate-expectations-modal-body .rate-card .prob-bar.hike .prob-fill {
  background: linear-gradient(90deg, #37f087, #86ff6b);
}

/* Tighten title spacing for Rate Expectations Overview */
#rate-expectations-table h3,
#rate-expectations-table + .rate-card-wrap,
#rate-expectations-modal-body h3,
#rate-expectations-modal-body + .rate-card-wrap {
  margin-top: 0 !important;
}





/******************************************************************************
========================== POSITIONING OVERVIEW TABLE =========================
******************************************************************************/

/* Keep the actual Positioning table wrapper scrollable */
#positioning-table {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Positioning table only */
#positioning-table .rate-card {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 12px;
}

/* Header + cells */
#positioning-table .rate-card thead th,
#positioning-table .rate-card td {
  padding: 5px 8px !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center !important;
}

/* Narrow the first column back down and keep asset labels centered */
#positioning-table .rate-card th:nth-child(1),
#positioning-table .rate-card td:nth-child(1) {
  width: 20%;
  text-align: center !important;
  box-shadow: none !important;
}

/* Positioning Tile 1 - separate asset colour blocks so they do not merge */
#positioning-tile-1 .rate-card td:nth-child(1) {
  background-clip: border-box !important;
  border-radius: 0 !important;
  overflow: hidden;
}

#positioning-tile-1 .rate-card tbody tr td:nth-child(1) {
  border-top: 0 !important;
}


/* Open interest */
#positioning-table .rate-card th:nth-child(2),
#positioning-table .rate-card td:nth-child(2) {
  width: 13%;
}

/* Net non-comm */
#positioning-table .rate-card th:nth-child(3),
#positioning-table .rate-card td:nth-child(3) {
  width: 18%;
}

/* Weekly change */
#positioning-table .rate-card th:nth-child(4),
#positioning-table .rate-card td:nth-child(4) {
  width: 15%;
}

/* 52wk percentile */
#positioning-table .rate-card th:nth-child(5),
#positioning-table .rate-card td:nth-child(5) {
  width: 13%;
}

/* Institutional bias */
#positioning-table .rate-card th:nth-child(6),
#positioning-table .rate-card td:nth-child(6) {
  width: 20%;
}





/******************************************************************************
====================== IMPLIED VOLATILITY OVERVIEW TABLE ======================
******************************************************************************/

#ivol-table,
#ivol-tile-1 #ivol-table {
  overflow: hidden !important;
}

#ivol-table .rate-card,
#ivol-tile-1 .rate-card {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}

#ivol-table .rate-card thead th,
#ivol-table .rate-card td,
#ivol-tile-1 .rate-card thead th,
#ivol-tile-1 .rate-card td {
  padding: 7px 10px !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#ivol-table .rate-card thead th:first-child,
#ivol-table .rate-card td:first-child,
#ivol-tile-1 .rate-card thead th:first-child,
#ivol-tile-1 .rate-card td:first-child {
  text-align: left;
}

#ivol-table .rate-card thead th,
#ivol-tile-1 .rate-card thead th {
  text-align: center;
}






/* Morning Summary Tile */
#morning-summary-content {
  background: #171717;
  border-radius: 8px;
  padding: 12px;
  box-shadow: inset 0 0 6px rgba(255,255,255,0.05);
}

#morning-summary-content div {
  margin-bottom: 10px;
}

#morning-summary-content strong {
  color: #ffd84d; /* highlight key section headers */
}


/* Tighten title spacing for Rate Expectations Overview */
#rate-expectations-table h3,
#rate-expectations-table + .rate-card-wrap {
    margin-top: 1px !important;   /* was ~16px by default */
}




/* === Generic pill group for RadioItems === */
.pill-group label {
  display: inline-flex;
  align-items: center;
  margin: 0 6px 0 0;
}

.pill-group input[type="radio"] {
  display: none; /* hide the native circle */
}

.pill-group .pill-txt {
  padding: 6px 12px;
  border-radius: 9999px;
  background: #1e1e1e;
  color: #cfcfcf;
  border: 1px solid #2b2b2b;
  font-size: 13px;
  line-height: 1;
  transition: background .15s, color .15s, box-shadow .15s;
  user-select: none;
  white-space: nowrap;
}

.pill-group label:hover .pill-txt {
  background: #232323;
  color: #fff;
}

/* Selected state (clear blue highlight) */
.pill-group input[type="radio"]:checked + .pill-txt {
  background: #2e2153;     /* purple-ish bg */
  color: #FFD700;          /* yellow text */
  box-shadow: 0 0 0 2px #8B5CF6 inset;
  font-weight: 600;
}





/******************************************************************************
================================ CALENDAR PAGE ================================
******************************************************************************/


#calendar-table .rate-card-wrap {
  overflow: auto !important;
}


.rate-card.calendar {
    border-collapse: separate;
    border-spacing: 0 2px;   /* tighter gaps only for calendar */
}


/* === Economic Calendar table (scoped) === */
.rate-card.calendar thead th {
  text-align: center;             /* center all headers by default */
}
.rate-card.calendar thead th.indicator-col {
  text-align: left;               /* left align Indicator column */
}

/* Date column narrower */
.rate-card.calendar td.date-col {
  width: 100px;                   /* adjust as needed */
  text-align: center;
}

/* All td center aligned by default */
.rate-card.calendar td {
  text-align: center;
}

/* Indicator column left aligned */
.rate-card.calendar td.indicator-col {
  text-align: left;
}



/* Impact badges with dark pill background */
.impact-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  background-color: #2b2b2b;  /* dark grey pill background */
}

.impact-high {
  color: #d9534f;   /* dark red */
}

.impact-medium {
  color: #f0ad4e;   /* orange */
}

.impact-low {
  color: #ffffff;   /* white */
}



/* Central bank speaker rows */
.cb-speak-row td {
  background-color: #2b2b2b !important;  /* highlight full row */
}

.cb-speak-row td.indicator-col {
  font-style: italic;
  color: #f5f5f5;
}


/* Threshold highlights */
.row-green td {
  background-color: rgba(0, 128, 0, 0.30) !important; /* subtle green */
}

.row-red td {
  background-color: rgba(178, 34, 34, 0.30) !important; /* subtle red */
}




/* === Calendar Filter Bar === */
.calendar-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
  align-items: center;
}



/* --- DATE PICKER RANGE --- */
.DateRangePickerInput {
  background-color: #1e1e1e !important;
  border: 1px solid #2b2b2b !important;
  border-radius: 9999px !important;
  font-size: 13px !important;
  display: flex;
  align-items: center;
  height: 36px; /* ✅ unify height */
  padding: 0 8px;
}

/* Inner date inputs (remove white background) */
.DateInput_input {
  background: transparent !important; /* ✅ no more white */
  color: #fff !important;
  border: none !important;
  font-size: 13px !important;
  height: 34px !important; /* ✅ match outer */
  line-height: 34px !important;
  padding: 0 6px !important;
  box-shadow: none !important;
  text-align: center !important;
}

/* Placeholder inside date fields */
.DateInput_input::placeholder {
  color: #aaa !important;
}




/* --- COUNTRY DROPDOWN (selected pill) --- */
.Select-control {
  background: #1e1e1e !important;
  border: 1px solid #2b2b2b !important;
  border-radius: 9999px !important;
  color: #fff !important;
  font-size: 13px !important;
  min-width: 140px;
  height: 36px !important;
}

.Select-value-label {
  color: #fff !important;
  font-size: 13px !important;
  line-height: 34px !important;
}

/* --- COUNTRY DROPDOWN MENU (open list) --- */
.Select-menu-outer {
  background: #1e1e1e !important;
  border: 1px solid #2b2b2b !important;
  border-radius: 6px !important;
  font-size: 13px
}

.Select-option {
  background: #1e1e1e !important;
  color: #fff !important;
  font-size: 13px !important;
  padding: 6px 10px;
}

.Select-option.is-focused {
  background: #2b2b2b !important; /* hover highlight */
  color: #fff !important;
  font-size: 13px
}



/* --- SEARCH BOX --- */
#calendar-event-filter {
  background: #1e1e1e !important;
  color: #fff !important;
  border: 1px solid #2b2b2b !important;
  border-radius: 9999px !important;
  padding: 0 12px;
  font-size: 13px;
  width: 200px;
  height: 36px !important; /* ✅ same height */
  line-height: 34px;
}


/* Fix white background behind each date box */
.DateInput {
  background: transparent !important;  /* removes white box */
  border: none !important;
}




.calendar-preset {
  background: #1e1e1e;
  border: 1px solid #2b2b2b;
  border-radius: 9999px;
  color: #fff;
  font-size: 13px;
  height: 36px;
  line-height: 34px;
  padding: 0 14px;
  cursor: pointer;
}

.calendar-preset:hover {
  background: #2b2b2b;
}

.calendar-preset.clear-btn {
  color: #ff6666;       /* red-ish text */
  border-color: #ff6666;
}

.calendar-preset.clear-btn:hover {
  background: #3a1e1e;
}



/* --- SINGLE DATE PICKER BADGE --- */
.calendar-single-date .SingleDatePickerInput {
  background-color: #1e1e1e !important;
  border: 1px solid #2b2b2b !important;
  border-radius: 9999px !important;
  font-size: 13px !important;
  display: flex;
  align-items: center;
  height: 36px !important;
  padding: 0 12px;
}

.calendar-single-date .SingleDatePickerInput input {
  background: transparent !important;
  color: #fff !important;
  border: none !important;
  text-align: center !important;
  font-size: 13px !important;
  height: 34px !important;
  line-height: 34px !important;
  box-shadow: none !important;
}

.calendar-single-date .SingleDatePickerInput input::placeholder {
  color: #aaa !important;
}



.upcoming-event {
    background-color: rgba(255, 215, 0, 0.15); /* a soft yellow highlight */
}


.active-filter {
    background-color: #007acc; /* or any highlight color */
    color: white;
    border: 1px solid #005a9e;
}






/******************************************************************************
============================== CENTRAL BANK PAGE ==============================
******************************************************************************/



/* === Central Bank Pills === */

/* === Central Bank Pills (Top-of-page selectors style) === */
.cb-tabs {
  display: flex !important;
  justify-content: center !important;
  border: none !important;
  background: transparent !important;
  gap: 8px;                       /* balanced spacing */
  flex-wrap: nowrap !important;   /* ✅ stay on one row */
  width: 100% !important;
  overflow: hidden;               /* ✅ no scrollbars */
}

.cb-tab {
  flex: 0 1 auto !important;
  background: #1e1e1e !important;
  border-radius: 9999px !important;
  color: #fff !important;
  font-size: 11px !important;
  padding: 3px 8px !important;
  min-width: 62px !important;
  max-width: 92px !important;
  border: none !important;
  margin: 0 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}


/* Force spacing between tab items even with Dash wrappers */
.cb-tabs { 
  gap: 0 !important;              /* neutralize gap; we'll control via margins */
}

.cb-tabs > * {
  margin: 0 10px 0 0 !important;
}

/* Optional: no extra space after the last item on a row */
.cb-tabs > *:last-child {
  margin-right: 0 !important;
}

.cb-tab:hover {
  background: #2b2b2b !important;
  transform: translateY(-1px);
}

/* Selected pill */
.cb-tab--selected {
  background: #2e2153 !important;
  color: #FFD700 !important;
  box-shadow: 0 0 0 2px #8B5CF6 inset;
}


/* --- Central Bank Tile 1 spacing & alignment --- */
.cb-tile .rate-card-wrap { 
  margin-top: 2px;         /* pulls table closer to the title */
}

.cb-tile .rate-card th,
.cb-tile .rate-card td {
  text-align: center;      /* center align ALL columns in Tile 1 */
  vertical-align: middle;  /* better row look */
}

/* keep empty rows same height as filled rows */
.cb-tile .rate-card td {
  height: auto;
  vertical-align: middle;
}



.curve-badge {
    background-color: #2a2a2a;
    border-radius: 20px;
    padding: 4px 12px;
    margin: 2px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #ccc;
    font-size: 13px;
}
.curve-badge:hover {
    background-color: #444;
}
.curve-badge-selected {
    background-color: #FFD700;
    color: black;
    font-weight: bold;
}




/* === Tile 4: Rate Curves (Current) — unified transparent highlight === */
.curve-pill {
  background-color: #1e1e1e;
  border: 1px solid #2a2a2a;
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 10px;
  line-height: 1.05;
  color: #ccc;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  margin: 0 3px 4px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}



/* Hide the default checkbox */
.curve-pill input[type="checkbox"] {
  display: none;
}

/* Hover */
.curve-pill:hover {
  background-color: #2b2b2b;
  color: #fff;
}

/* Active / Selected — single transparent purple highlight */
label.curve-pill:has(input[type="checkbox"]:checked),
.curve-pill.active {
  background-color: rgba(78, 46, 129, 0.28) !important; /* soft transparent purple */
  color: #FFD700 !important;
  border-color: #8B5CF6 !important;
  box-shadow:
    0 0 0 1px rgba(139, 92, 246, 0.6) inset,   /* inner purple edge */
    0 0 4px rgba(139, 92, 246, 0.4);           /* outer glow */
  font-weight: 600;
}

/* Flatten inner span */
.curve-pill span {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: inherit !important;
  box-shadow: none !important;
}


.pill-btn {
  border: 1px solid #2b2b2b;
  color: #d3d3d3;
  background-color: #1e1e1e;
  border-radius: 20px;
  padding: 2px 8px;
  transition: 0.2s ease-in-out;
  font-size: 10px;
  line-height: 1.05;
  cursor: pointer;
}

/* Hover */
.pill-btn:hover {
  background-color: #2b2b2b;
  color: #fff;
}

/* Active — identical to page selector + Rate Curves highlight */
.pill-btn.active-pill {
  background: #2e2153;              /* same purple as top tabs */
  color: #FFD700;
  box-shadow: 0 0 0 1px #8B5CF6 inset;
  font-weight: 600;
}



#tile-2 .pill-btn,
#tile-2 .btn,
#tile-2 .btn-secondary {
  padding: 2px 7px !important;
  font-size: 10px !important;
  line-height: 1.05 !important;
}




#tile-4 .dash-checklist {
  margin-left: -12px;
}

#tile-4 .curve-pill {
  padding: 2px 8px;
  font-size: 10px;
  line-height: 1.05;
  margin: 0 3px 4px 0;
}

.cb-modal-bank-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  justify-content: center;
  min-width: 0;
}

#cb-curve-modal .curve-pill,
#cb-policy-rate-modal .curve-pill {
  padding: 3px 9px;
  font-size: 11px;
  line-height: 1.05;
  margin: 0 3px 4px 0;
}




#cb-tile-1 .tile1-content,
#cb-tile-1 .rate-card-wrap {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#cb-tile-1 .rate-card {
  height: 100%;
}





/****************************************************************************** 
========================= CENTRAL BANK TILE 3 (NEWS) ==========================
******************************************************************************/

/* Wrap the whole tile neatly */
#tile-3 {
  display: flex;
  flex-direction: column;
  height: 100%;            /* 👈 stretch to match Tile 1 */
  box-sizing: border-box;
}

/* Inner scrolling list */
.news-scroll {
  max-height: 100%;
  overflow-y: auto;
}

.news-item {
  border-bottom: 1px solid #333;
  padding: 5px 0;
  font-size: 10.5px;
  line-height: 1.2;
}


#tile-3 .news-timestamp {
  width: 62px;
  min-width: 62px;
}

#tile-3 .date,
#tile-3 .time {
  font-size: 9px;
  line-height: 1.05;
}

#tile-3 .news-headline {
  font-size: 10.5px;
  line-height: 1.2;
}



.cb-tile{
  /* keep layout behavior only */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}



.cb-chart {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
}





/* =========================
   CENTRAL BANK TILE 1
   compact sizing + bsp colours + badges + bars
   ========================= */

.cb-tile .rate-card {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 4px;
  font-size: 11px;
}

.cb-tile .rate-card thead th {
  font-size: 11px;
  font-weight: 700;
  color: #bdbdbd;
  padding: 4px 6px 5px;
  line-height: 1.1;
  border-bottom: 1px solid #2b2b2b;
  text-align: center;
}

.cb-tile .rate-card td {
  padding: 4px 5px;
  font-size: 11px;
  line-height: 1.1;
  vertical-align: middle;
}

.cb-tile .rate-card .bsp {
  font-weight: 700;
  font-size: 10px;
}

.cb-tile .rate-card .bsp.neg { color: #ff4d4f; }
.cb-tile .rate-card .bsp.pos { color: #86ff6b; }

.cb-tile .rate-card .badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 10px;
  line-height: 1.05;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}

.cb-tile .rate-card .badge-cut  { background: #2b1430; color: #e08bff; }
.cb-tile .rate-card .badge-hold { background: #2a2a1a; color: #ffd84d; }
.cb-tile .rate-card .badge-hike { background: #0f2b16; color: #86ff6b; }

.cb-tile .rate-card .prob-cell {
  width: 14%;
  min-width: 74px;
}

.cb-tile .rate-card .prob-num {
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
  margin-bottom: 4px;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.cb-tile .rate-card .prob-bar {
  height: 7px;
  background: #2b2b2b;
  border-radius: 6px;
  overflow: hidden;
}

.cb-tile .rate-card .prob-fill {
  height: 100%;
  border-radius: 6px;
}

.cb-tile .rate-card .prob-bar.cut  .prob-fill  { background: linear-gradient(90deg, #a64fff, #ff8bff); }
.cb-tile .rate-card .prob-bar.hold .prob-fill  { background: linear-gradient(90deg, #ffd84d, #ffb84d); }
.cb-tile .rate-card .prob-bar.hike .prob-fill  { background: linear-gradient(90deg, #37f087, #86ff6b); }




/* =========================
   RATE CARD GLASSY SKIN
   used by live CB tile 1 callback
   ========================= */

.rate-card.rate-card--glassy {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  background: transparent;
}

.rate-card.rate-card--glassy thead th {
  background: transparent;
  color: #bdbdbd;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.02) !important;
}

.rate-card.rate-card--glassy tbody tr {
  background: rgba(0,0,0,0.30);
  box-shadow: inset 0 -1px rgba(255,255,255,0.06);
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.rate-card.rate-card--glassy tbody tr:nth-child(even) {
  background: rgba(0,0,0,0.38);
}

.rate-card.rate-card--glassy tbody tr:hover {
  background: rgba(0,0,0,0.8);
  box-shadow: inset 0 -1px rgba(255,255,255,0.08);
}

.rate-card.rate-card--glassy td {
  background: transparent;
  border: none !important;
}

.rate-card.rate-card--glassy img {
  display: block;
}




/* =========================
   CB NEWS MODAL: NICE GLASS (REVERT)
   ========================= */
#cb-news-modal .modal-shell{
  background: rgba(8, 8, 8, 0.92) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,0.65) !important;
  backdrop-filter: blur(12px);
}

/* Make the content area opaque too (this prevents any "line" from the dashboard behind) */
#cb-news-modal .cb-news-body{
  background: #0b0f14 !important;               /* fully opaque */
}

/* Divider (only when used) */
#cb-news-modal .cb-news-divider{
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 10px 0 14px 0;
}

/* Rows: top separators only (no bottom border illusion) */
#cb-news-modal .cb-news-row{
  border-bottom: none !important;
  padding: 8px 0 !important;
}
#cb-news-modal .cb-news-row + .cb-news-row{
  border-top: 1px solid rgba(255,255,255,0.06);
}


/* =========================
   CB NEWS MODAL: REMOVE RANDOM MID-SCROLL LINE
   (strip borders from scroll container; separators only on rows)
   ========================= */

/* Make sure the modal body container itself has NO borders/lines */
#cb-news-modal #cb-news-modal-body,
#cb-news-modal .cb-news-body,
#cb-news-modal .modal-shell > div,
#cb-news-modal .modal-shell *{
  outline: none;
}

/* Specifically nuke any borders that might be applied to the scroll area */
#cb-news-modal #cb-news-modal-body{
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Also nuke accidental <hr> lines if any exist */
#cb-news-modal hr{
  display: none !important;
}

/* Row separators: ONLY between rows (top border) */
#cb-news-modal .cb-news-row{
  border: none !important;
  padding: 8px 0 !important;
}
#cb-news-modal .cb-news-row + .cb-news-row{
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}



/* Kill any accidental <hr> inside the modal */
#cb-news-modal hr{ display:none !important; }

/* Ensure no container border is being applied to the list wrapper */
#cb-news-modal .cb-news-body,
#cb-news-modal .cb-news-list{
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}


/****************************************************************************** 
========================= CURRENCY PAGE - SEARCH ==========================
******************************************************************************/



/* Currency page dropdown: single-pill look */
#currency-pair-search .Select-control {
  background: #1e1e1e;
  border: none;
  border-radius: 9999px;
  min-height: 36px;
  box-shadow: none;
}
#currency-pair-search .Select-placeholder,
#currency-pair-search .Select-value-label,
#currency-pair-search .Select-input > input {
  color: #ffffff !important;
}
#currency-pair-search .Select-arrow-zone { color: #ffffff; }
#currency-pair-search .Select-menu-outer {
  background: #1e1e1e;
  border: 1px solid #2b2b2b;
  border-radius: 10px;
}


/* Pill styling applied to the inner control of the search dropdown */
.pill-dropdown .Select__control {
  background-color: #1e1e1e;
  border: none;
  border-radius: 9999px;
  min-height: 32px;
  height: 32px;
  box-shadow: none;
}

.pill-dropdown .Select__value-container {
  padding: 0 12px;
}

.pill-dropdown .Select__single-value,
.pill-dropdown .Select__placeholder {
  color: #ffffff;
}

.pill-dropdown .Select__indicators { color: #ffffff; }
.pill-dropdown .Select__indicator { padding: 6px; }

.pill-dropdown .Select__menu {
  background-color: #1e1e1e;
  color: #ffffff;
  z-index: 10000; /* ensure dropdown menu sits above other elements */
}


/* Elevate dropdown menus in Tile 1 above the chart */
#currency-tile-1 .Select__menu {
  z-index: 10000;
}


/* --- Central Bank Flags --- */
.cb-flag-img {
  width: 30px;        /* increase width */
  height: 20px;       /* slightly shorter height */
  object-fit: cover;  /* ensures rectangular scaling */
  border-radius: 2px; /* optional: subtle rounding for cleaner look */
  margin-right: 6px;  /* small gap before text */
  vertical-align: middle;
}


/* --- Central Bank News Modal Layer Fix --- */
#cb-news-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  /* don't force display, let Dash toggle it */
  justify-content: center !important;
  align-items: center !important;
  z-index: 999999 !important;
  background-color: rgba(0, 0, 0, 0.75) !important;
}

/* Inner modal box */
#cb-news-modal > div {
  position: relative !important;
  z-index: 1000000 !important;
  background-color: #1e1e1e !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 20px !important;
  width: 70% !important;
  max-height: 80vh !important;
  overflow-y: auto !important;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.9) !important;
}


/* Keep Central Bank News modal at a comfortable width and height */
#cb-news-modal > div {
  transition: all 0.2s ease;
  width: 50% !important;
  min-width: 500px !important;
  min-height: 600px !important;
  max-height: 80vh !important;
  overflow-y: auto !important;
}

#cb-news-modal[style*="display: flex"] {
  opacity: 1;
  pointer-events: all;
}

/* --- Central Bank Modal dropdown (dark mode) --- */
#cb-news-dropdown .Select-control {
  background-color: #1e1e1e !important;
  color: white !important;
  border-color: #555 !important;
}

#cb-news-dropdown .Select-menu-outer {
  background-color: #1e1e1e !important;
  color: white !important;
  border: 1px solid #555 !important;
}

#cb-news-dropdown .VirtualizedSelectOption {
  color: white !important;
  white-space: pre; /* keeps the indent for speaker rows */
}

#cb-news-dropdown .Select-placeholder,
#cb-news-dropdown .Select-value-label {
  color: white !important;
}


#cb-news-bank-header img {
  height: 50px;
}

@media (max-width: 1000px) {
  #cb-news-bank-header img {
    height: 40px;
  }
}


/* In your assets/custom.css or inside a <style> block */
.Select-control, .Select--single > .Select-control {
    border: none !important;
    box-shadow: none !important;
    background-color: #2a2a2a !important;
    border-radius: 20px !important;
}

.Select-menu-outer {
    background-color: #1f1f1f !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
}

.Select-value-label {
    color: #fff !important;
    font-weight: 600 !important;
}


/* scope to our modal pills only */
.pill-dd .Select,
.pill-dd .Select-control {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;      /* wrapper stays transparent */
}

/* the visible pill */
.pill-dd .Select-control {
  background-color: #2a2a2a !important;
  border-radius: 20px !important;
  padding: 2px 6px !important;
}

/* focus state (no glow rectangle) */
.pill-dd .Select.is-focused > .Select-control,
.pill-dd .Select.has-value.is-focused > .Select-control {
  box-shadow: none !important;
}

/* value text */
.pill-dd .Select-value-label { 
  color: #fff !important; 
  font-weight: 600 !important; 
}

/* dropdown menu */
.pill-dd .Select-menu-outer {
  background-color: #1f1f1f !important;
  border: none !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
}


/* ===== Cross-Asset Volatility: header layout + snapshot button ===== */

/* 3-column header: left = title, middle = dropdown, right = button */
.tile-header-3col {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.tile-header-3col .center-cell { justify-self: center; }
.tile-header-3col .right-cell  { justify-self: end; }

/* dark ghost-style button */
.save-btn, .snapshot-button {
  background-color: #333 !important;
  color: #fff !important;
  border: 1px solid #555 !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
.save-btn:hover, .snapshot-button:hover {
  background-color: #444 !important;
  border-color: #666 !important;
}

/* keep titles from shrinking awkwardly */
.tile-header-3col h3 { margin: 0; min-width: 0; }

/* optional niceties */
.tile-header-3col > * { min-width: 0; }
.pill-dropdown .Select__menu { z-index: 9999; }





/* === Home Page News: simple name highlight === */
.hl-news-name {
    color: #bf65cf;
    font-weight: 850;
}



/* --- Home page: News search pill --- */
.pill-search-input {
  background-color: #1e1e1e;
  border: 1px solid #2b2b2b;
  border-radius: 9999px;
  padding: 4px 12px;
  min-width: 160px;
  color: #ffffff;
  font-size: 12px;
  outline: none;
}

.pill-search-input::placeholder {
  color: #888888;
}





/* =========================
   CALENDAR V2 (AG GRID) THEME FIXES
   - Match app dark-glass tiles (panel look, not flat #141414 slabs)
   - Keep all your alignment helpers + conditional colours + clickables
   - Avoid white flashes / bright dividers
   ========================= */

.cal2-date-scope {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-height: 36px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  box-sizing: border-box;
}

.cal2-date-scope label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  margin: 0;
  padding: 0 12px;
  border-radius: 999px;
  color: rgba(255,255,255,0.68);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.cal2-date-scope label:has(input:checked) {
  color: #0b0b0b;
  background: #f5d10f;
  box-shadow: 0 2px 8px rgba(245,209,15,0.22);
}

.cal2-date-scope input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.cal2-date-range-wrap {
  transition: opacity 120ms ease;
}

.cal2-date-range-wrap--disabled {
  opacity: 0.42;
}

.cal2-mobile-nav-btn:disabled,
.cal2-mobile-range-label:disabled {
  opacity: 0.42;
  cursor: default;
}

#cal2-grid {
  /* Panel-like base (slightly lighter than charts; sits inside home-tile) */
  --ag-background-color: rgba(255,255,255,0.01);
  --ag-foreground-color: #E8E8E8;

  /* Header */
  --ag-header-background-color: rgba(255,255,255,0.04);
  --ag-header-foreground-color: #F2F2F2;

  /* Borders / separators */
  --ag-border-color: rgba(255,255,255,0.06);
  --ag-secondary-border-color: rgba(255,255,255,0.06);
  --ag-row-border-color: rgba(255,255,255,0.06);

  /* Hover + selected */
  --ag-row-hover-color: rgba(255,255,255,0.06);
  --ag-selected-row-background-color: rgba(255,255,255,0.09);

  /* Optional: inputs inside grid (filters/menus when used) */
  --ag-input-background-color: rgba(0,0,0,0.35);
  --ag-input-border-color: rgba(255,255,255,0.10);

  --ag-font-size: 12px;
}

/* Force the whole grid to stay “panel/glass”.
   IMPORTANT: set to transparent so it inherits --ag-background-color rather than hard #141414. */
#cal2-grid .ag-root-wrapper,
#cal2-grid .ag-root-wrapper-body,
#cal2-grid .ag-root,
#cal2-grid .ag-body-viewport,
#cal2-grid .ag-center-cols-viewport,
#cal2-grid .ag-center-cols-container {
  background-color: transparent !important;
  color: var(--ag-foreground-color) !important;
}

/* Header background + border */
#cal2-grid .ag-header,
#cal2-grid .ag-header-viewport,
#cal2-grid .ag-header-container {
  background-color: var(--ag-header-background-color) !important;
  color: var(--ag-header-foreground-color) !important;
  border-bottom: 1px solid var(--ag-border-color) !important;
}

/* Cells: transparent surface so the panel reads consistently */
#cal2-grid .ag-cell {
  background-color: transparent !important;
  color: var(--ag-foreground-color) !important;
  border-right: 1px solid var(--ag-border-color) !important;
  border-bottom: 1px solid var(--ag-border-color) !important;
}

/* Row separators */
#cal2-grid .ag-row {
  border-bottom: 1px solid var(--ag-border-color) !important;
}
#cal2-grid .ag-row::after,
#cal2-grid .ag-row::before {
  border-bottom-color: var(--ag-border-color) !important;
}

/* Hover + selected */
#cal2-grid .ag-row-hover .ag-cell,
#cal2-grid .ag-row:hover .ag-cell {
  background-color: var(--ag-row-hover-color) !important;
}

#cal2-grid .ag-row-selected .ag-cell {
  background-color: var(--ag-selected-row-background-color) !important;
}

/* =========================
   Alignment helpers
   ========================= */
#cal2-grid .cal2-h-center .ag-header-cell-label { justify-content: center !important; }
#cal2-grid .cal2-h-left   .ag-header-cell-label { justify-content: flex-start !important; }
#cal2-grid .cal2-c-center { text-align: center !important; }
#cal2-grid .cal2-c-left   { text-align: left !important; }

/* =========================
   Yellow numeric highlights
   ========================= */
#cal2-grid .cal2-yellow {
  color: #FFD24A !important;
  font-weight: 600 !important;
}

/* =========================
   Impact colours
   ========================= */
#cal2-grid .cal2-impact-l { color: #E8E8E8 !important; font-weight: 700 !important; }
#cal2-grid .cal2-impact-m { color: #FFD24A !important; font-weight: 700 !important; }
#cal2-grid .cal2-impact-h { color: #FF5A5A !important; font-weight: 700 !important; }

/* =========================
   Actual conditional colours (ROBUST)
   - works if class is applied to cell OR inner value
   ========================= */
#cal2-grid .cal2-actual-green { color: #3DDC84 !important; font-weight: 700 !important; }
#cal2-grid .cal2-actual-red   { color: #FF5A5A !important; font-weight: 700 !important; }

/* If class is on the cell, force inner value too */
#cal2-grid .ag-cell.cal2-actual-green .ag-cell-value,
#cal2-grid .ag-cell.cal2-actual-green span {
  color: #3DDC84 !important;
  font-weight: 700 !important;
}

#cal2-grid .ag-cell.cal2-actual-red .ag-cell-value,
#cal2-grid .ag-cell.cal2-actual-red span {
  color: #FF5A5A !important;
  font-weight: 700 !important;
}

/* keep colours during hover/selected */
#cal2-grid .ag-row-hover .cal2-actual-green,
#cal2-grid .ag-row-selected .cal2-actual-green {
  color: #3DDC84 !important;
}
#cal2-grid .ag-row-hover .cal2-actual-red,
#cal2-grid .ag-row-selected .cal2-actual-red {
  color: #FF5A5A !important;
}

/* =========================
   Revision conditional colours (keep robust)
   ========================= */
#cal2-grid .cal2-rev-green { color: #3DDC84 !important; font-weight: 700 !important; }
#cal2-grid .cal2-rev-red   { color: #FF5A5A !important; font-weight: 700 !important; }

/* Optional: If revision class is applied to the cell, force inner value too */
#cal2-grid .ag-cell.cal2-rev-green .ag-cell-value,
#cal2-grid .ag-cell.cal2-rev-green span {
  color: #3DDC84 !important;
  font-weight: 700 !important;
}
#cal2-grid .ag-cell.cal2-rev-red .ag-cell-value,
#cal2-grid .ag-cell.cal2-rev-red span {
  color: #FF5A5A !important;
  font-weight: 700 !important;
}

/* keep colours during hover/selected */
#cal2-grid .ag-row-hover .cal2-rev-green,
#cal2-grid .ag-row-selected .cal2-rev-green {
  color: #3DDC84 !important;
}
#cal2-grid .ag-row-hover .cal2-rev-red,
#cal2-grid .ag-row-selected .cal2-rev-red {
  color: #FF5A5A !important;
}

/* =========================
   Clickable cells
   ========================= */
.cal2-clickable-indicator,
.cal2-clickable-forecast {
  cursor: pointer;
}

.cal2-clickable-indicator:hover,
.cal2-clickable-forecast:hover {
  text-decoration: underline;
}

/* =========================
   CALENDAR V2 MODALS — DARK GLASS (Indicator + Forecast Dist)
   - Fix “blue” bootstrap bleed by forcing chrome + body to transparent/dark
   - Force neutral (non-blue) backdrop behind the modal
   - Works with your btn-ghost + btn-secondary close buttons
   ========================= */

/* 0) Backdrop: Bootstrap can look bluish depending on theme.
      This forces a neutral dark backdrop for ALL modals. */
.modal-backdrop.show {
  opacity: 0.65 !important;
  background-color: #000 !important;
}

/* 1) Ensure the dialog wrapper itself is not painting any background */
#cal2-indicator-modal .modal-dialog,
#cal2-forecast-dist-modal .modal-dialog {
  background: transparent !important;
}

/* 2) Core modal shell */
#cal2-indicator-modal .modal-content,
#cal2-forecast-dist-modal .modal-content {
  background: linear-gradient(180deg, rgba(10,14,20,0.94) 0%, rgba(0,0,0,0.88) 100%) !important;
  color: #E8E8E8 !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* 3) Header/footer chrome (Bootstrap sometimes paints these) */
#cal2-indicator-modal .modal-header,
#cal2-indicator-modal .modal-footer,
#cal2-forecast-dist-modal .modal-header,
#cal2-forecast-dist-modal .modal-footer {
  background: transparent !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* 4) Body area (prevents “blue panel” look inside body) */
#cal2-indicator-modal .modal-body,
#cal2-forecast-dist-modal .modal-body {
  background: transparent !important;
  color: #E8E8E8 !important;
}

/* 5) Close (x) button in header */
#cal2-indicator-modal .btn-close,
#cal2-forecast-dist-modal .btn-close {
  filter: invert(1);
  opacity: 0.85;
}
#cal2-indicator-modal .btn-close:hover,
#cal2-forecast-dist-modal .btn-close:hover {
  opacity: 1;
}

/* 6) Secondary buttons (e.g., Close) */
#cal2-indicator-modal .btn-secondary,
#cal2-forecast-dist-modal .btn-secondary {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: #E8E8E8 !important;
}

/* 7) Ghost buttons (your “Save Snapshot” uses btn-ghost) */
#cal2-indicator-modal .btn-ghost,
#cal2-forecast-dist-modal .btn-ghost {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: #E8E8E8 !important;
  border-radius: 10px !important;
}
#cal2-indicator-modal .btn-ghost:hover,
#cal2-forecast-dist-modal .btn-ghost:hover {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.14) !important;
}

/* Calendar V2 modal layouts */
.cal2-indicator-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.85fr);
  align-items: start;
  gap: 18px;
  min-width: 0;
}

.cal2-indicator-layout--single {
  grid-template-columns: minmax(0, 1fr);
}

.cal2-indicator-main,
.cal2-indicator-comments {
  min-width: 0;
}

.cal2-indicator-comments {
  padding: 14px 14px 8px;
  color: #ddd;
  line-height: 1.35;
  background: linear-gradient(180deg, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0.22) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.32);
}

.cal2-indicator-comments-title {
  display: block;
  margin-bottom: 10px;
  color: #fff;
}

.cal2-indicator-comments ul {
  margin: 0;
  padding-left: 20px;
}

.cal2-indicator-comments li {
  margin-bottom: 9px;
}

@media (min-width: 992px) {
  #cal2-indicator-modal .modal-dialog {
    width: calc(100vw - 48px) !important;
    max-width: 1180px !important;
  }
}

/* Final Earnings overrides: keep these after all legacy tile/grid rules. */
:root[data-theme="light"] #earnings-filter-panel {
  background: #E9EBF3 !important;
  background-color: #E9EBF3 !important;
  background-image: none !important;
  border-color: #C9CDE0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
}
:root[data-theme="light"] #earnings-filter-panel::before,
:root[data-theme="light"] #earnings-filter-panel::after {
  content: none !important;
  display: none !important;
}

:root[data-theme="light"] #earnings-grid .earnings-positive-cell,
:root[data-theme="light"] #earnings-grid .earnings-positive-cell .ag-cell-value,
:root[data-theme="light"] #momentum-grid .stocks-positive-cell,
:root[data-theme="light"] #momentum-grid .stocks-positive-cell .ag-cell-value {
  color: #137333 !important;
  -webkit-text-fill-color: #137333 !important;
  font-weight: 700 !important;
}
:root[data-theme="light"] #earnings-grid .earnings-negative-cell,
:root[data-theme="light"] #earnings-grid .earnings-negative-cell .ag-cell-value,
:root[data-theme="light"] #momentum-grid .stocks-negative-cell,
:root[data-theme="light"] #momentum-grid .stocks-negative-cell .ag-cell-value {
  color: #B42336 !important;
  -webkit-text-fill-color: #B42336 !important;
  font-weight: 700 !important;
}
:root[data-theme="dark"] #earnings-grid .earnings-positive-cell,
:root[data-theme="dark"] #earnings-grid .earnings-positive-cell .ag-cell-value,
:root[data-theme="dark"] #momentum-grid .stocks-positive-cell,
:root[data-theme="dark"] #momentum-grid .stocks-positive-cell .ag-cell-value {
  color: #57D690 !important;
  -webkit-text-fill-color: #57D690 !important;
  font-weight: 700 !important;
}
:root[data-theme="dark"] #earnings-grid .earnings-negative-cell,
:root[data-theme="dark"] #earnings-grid .earnings-negative-cell .ag-cell-value,
:root[data-theme="dark"] #momentum-grid .stocks-negative-cell,
:root[data-theme="dark"] #momentum-grid .stocks-negative-cell .ag-cell-value {
  color: #FF718A !important;
  -webkit-text-fill-color: #FF718A !important;
  font-weight: 700 !important;
}

/* Stocks table column accents. Conditional bias/cash colours remain semantic. */
:root[data-theme="light"] #momentum-grid .stocks-tone-violet,
:root[data-theme="light"] #momentum-grid .stocks-tone-violet .ag-cell-value {
  color: #5D0BC1 !important;
  -webkit-text-fill-color: #5D0BC1 !important;
  font-weight: 700 !important;
}
:root[data-theme="light"] #momentum-grid .stocks-tone-blue,
:root[data-theme="light"] #momentum-grid .stocks-tone-blue .ag-cell-value {
  color: #175CD3 !important;
  -webkit-text-fill-color: #175CD3 !important;
  font-weight: 700 !important;
}
:root[data-theme="light"] #momentum-grid .stocks-tone-amber,
:root[data-theme="light"] #momentum-grid .stocks-tone-amber .ag-cell-value {
  color: #8A5700 !important;
  -webkit-text-fill-color: #8A5700 !important;
  font-weight: 700 !important;
}
:root[data-theme="light"] #momentum-grid .stocks-tone-green,
:root[data-theme="light"] #momentum-grid .stocks-tone-green .ag-cell-value {
  color: #137333 !important;
  -webkit-text-fill-color: #137333 !important;
  font-weight: 700 !important;
}
:root[data-theme="dark"] #momentum-grid .stocks-tone-violet,
:root[data-theme="dark"] #momentum-grid .stocks-tone-violet .ag-cell-value { color: #C8B6FF !important; -webkit-text-fill-color: #C8B6FF !important; font-weight: 700 !important; }
:root[data-theme="dark"] #momentum-grid .stocks-tone-blue,
:root[data-theme="dark"] #momentum-grid .stocks-tone-blue .ag-cell-value { color: #65C8FF !important; -webkit-text-fill-color: #65C8FF !important; font-weight: 700 !important; }
:root[data-theme="dark"] #momentum-grid .stocks-tone-amber,
:root[data-theme="dark"] #momentum-grid .stocks-tone-amber .ag-cell-value { color: #F4C95D !important; -webkit-text-fill-color: #F4C95D !important; font-weight: 700 !important; }
:root[data-theme="dark"] #momentum-grid .stocks-tone-green,
:root[data-theme="dark"] #momentum-grid .stocks-tone-green .ag-cell-value { color: #57D690 !important; -webkit-text-fill-color: #57D690 !important; font-weight: 700 !important; }

/* Fundamental report: solid light surfaces and fully legible copy. */
:root[data-theme="light"] #earnings-fundamental-report-modal-shell,
:root[data-theme="light"] #earnings-fundamental-report-body,
:root[data-theme="light"] #earnings-fundamental-report-body .fundamental-report-content {
  background: #FFFFFF !important;
  background-image: none !important;
  color: #172033 !important;
}
:root[data-theme="light"] #earnings-fundamental-report-title {
  color: #172033 !important;
  -webkit-text-fill-color: #172033 !important;
}
:root[data-theme="light"] #earnings-fundamental-report-subtitle {
  color: #4F5D78 !important;
  -webkit-text-fill-color: #4F5D78 !important;
}
:root[data-theme="light"] #earnings-fundamental-report-body .fundamental-report-cover,
:root[data-theme="light"] #earnings-fundamental-report-body .quarterly-trend-section,
:root[data-theme="light"] #earnings-fundamental-report-body .quarterly-kpi-card,
:root[data-theme="light"] #earnings-fundamental-report-body .quarterly-chart-panel,
:root[data-theme="light"] #earnings-fundamental-report-body .quarterly-history-details,
:root[data-theme="light"] #earnings-fundamental-report-body .research-context-card,
:root[data-theme="light"] #earnings-fundamental-report-body .research-text-panel,
:root[data-theme="light"] #earnings-fundamental-report-body .research-section,
:root[data-theme="light"] #earnings-fundamental-report-body .research-metric-table {
  background: #E9EBF3 !important;
  background-image: none !important;
  border-color: #C9CDE0 !important;
  box-shadow: none !important;
  color: #172033 !important;
}
:root[data-theme="light"] #earnings-fundamental-report-body .research-table-header,
:root[data-theme="light"] #earnings-fundamental-report-body .quarterly-history-table th {
  background: #D8DCE8 !important;
}
:root[data-theme="light"] #earnings-fundamental-report-body .fundamental-report-company,
:root[data-theme="light"] #earnings-fundamental-report-body .fundamental-report-badge-value,
:root[data-theme="light"] #earnings-fundamental-report-body .quarterly-section-heading,
:root[data-theme="light"] #earnings-fundamental-report-body .quarterly-kpi-value,
:root[data-theme="light"] #earnings-fundamental-report-body .quarterly-chart-title,
:root[data-theme="light"] #earnings-fundamental-report-body .research-context-value,
:root[data-theme="light"] #earnings-fundamental-report-body .research-section-title,
:root[data-theme="light"] #earnings-fundamental-report-body .research-panel-title,
:root[data-theme="light"] #earnings-fundamental-report-body .research-table-metric,
:root[data-theme="light"] #earnings-fundamental-report-body .research-table-value {
  color: #172033 !important;
  -webkit-text-fill-color: #172033 !important;
}
:root[data-theme="light"] #earnings-fundamental-report-body .fundamental-report-meta,
:root[data-theme="light"] #earnings-fundamental-report-body .quarterly-kpi-label,
:root[data-theme="light"] #earnings-fundamental-report-body .quarterly-kpi-caption,
:root[data-theme="light"] #earnings-fundamental-report-body .quarterly-chart-subtitle,
:root[data-theme="light"] #earnings-fundamental-report-body .research-context-label,
:root[data-theme="light"] #earnings-fundamental-report-body .research-context-caption,
:root[data-theme="light"] #earnings-fundamental-report-body .research-table-head {
  color: #4F5D78 !important;
  -webkit-text-fill-color: #4F5D78 !important;
}
:root[data-theme="light"] #earnings-fundamental-report-body .research-explainer-text,
:root[data-theme="light"] #earnings-fundamental-report-body .research-bullet-list,
:root[data-theme="light"] #earnings-fundamental-report-body .research-empty,
:root[data-theme="light"] #earnings-fundamental-report-body .report-narrative-blocks p {
  color: #293653 !important;
  -webkit-text-fill-color: #293653 !important;
}
:root[data-theme="light"] #earnings-fundamental-report-body .research-explainer-label,
:root[data-theme="light"] #earnings-fundamental-report-body .research-conclusion-title,
:root[data-theme="light"] #earnings-fundamental-report-body .report-evidence-divider,
:root[data-theme="light"] #earnings-fundamental-report-body .fundamental-report-kicker {
  color: #720FEB !important;
  -webkit-text-fill-color: #720FEB !important;
}
:root[data-theme="light"] #earnings-fundamental-report-body .research-value-good { color: #137333 !important; -webkit-text-fill-color: #137333 !important; }
:root[data-theme="light"] #earnings-fundamental-report-body .research-value-bad { color: #B42336 !important; -webkit-text-fill-color: #B42336 !important; }
:root[data-theme="light"] #earnings-fundamental-report-body .research-value-watch { color: #8A5700 !important; -webkit-text-fill-color: #8A5700 !important; }
:root[data-theme="light"] #earnings-fundamental-report-body .research-value-neutral { color: #293653 !important; -webkit-text-fill-color: #293653 !important; }

@media (max-width: 767.98px) {
  .cal2-forecast-two-panel {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .cal2-forecast-panel-cell {
    height: auto !important;
    padding-right: 0 !important;
  }

  .cal2-indicator-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .cal2-indicator-comments {
    position: static;
    max-height: none;
    overflow: visible;
    margin-top: 10px;
    padding: 14px 0 0;
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(255,255,255,0.10);
    border-radius: 0;
    box-shadow: none;
  }
}




/* =========================
   APP BACKGROUND (login-style)
   ========================= */
:root{
  --app-bg: #000000;
}

/* Use this on any outer wrapper you want to have the login-style background */
.app-bg {
  min-height: 100vh;
  background: var(--app-bg);
  color: white;
}



/* =========================
   HOME TILE (BORDER-ONLY): pseudo-element gradient border + transparent fill
   + SCROLL-SAFE (outer doesn't scroll; inner does)
   ========================= */

/* Outer tile should NOT be the scrolling container */
.home-tile{
  position: relative;
  border-radius: 12px;
  overflow: hidden; /* clips the border radius cleanly */

  /* tile fill */
  background: rgba(20, 20, 20, 0.55);

  /* optional glass */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* border layer */
.home-tile::before{
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;                 /* <-- border thickness */
  border-radius: inherit;
  pointer-events: none;

  background: linear-gradient(
    90deg,
    rgba(250, 204, 21, 0.15),
    rgba(250, 204, 21, 0.90),
    rgba(250, 204, 21, 0.15)
  );

  /* Cut out the middle so ONLY the border shows */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* ✅ Inner scroller for tiles
   Fixes the "yellow line halfway" artifacts on scrollable tiles */
.tile-scroll{
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;  /* important in flex layouts */
}

/* Optional: nicer scrollbar (safe defaults) */
.tile-scroll::-webkit-scrollbar { width: 10px; }
.tile-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 10px; }
.tile-scroll::-webkit-scrollbar-track { background: transparent; }


/* =========================
   SIDEBAR: glass + thin yellow gradient border
   ========================= */
.sidebar-shell{
  position: relative;
  border-radius: 14px;
  overflow: hidden;

  /* semi-transparent fill */
  background: rgba(20, 20, 20, 0.45);

  /* glass effect */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* gradient border (1px) */
.sidebar-shell::before{
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;

  background: linear-gradient(
    180deg,
    rgba(250, 204, 21, 0.15),
    rgba(250, 204, 21, 0.90),
    rgba(250, 204, 21, 0.15)
  );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.sidebar-shell .nav-link:hover,
.sidebar-shell .nav-item:hover{
  background: rgba(255,255,255,0.06);
}


/* =========================
   MODALS: glass + thin yellow gradient border
   (less transparent than tiles)
   ========================= */
.modal-overlay{
  background: rgba(0,0,0,0.55);
}

/* Modal box: slightly LESS transparent than tiles */
.modal-shell{
  position: relative;
  border-radius: 12px;
  overflow: hidden;

  /* ✅ less transparent */
  background: rgba(18, 18, 18, 0.82);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow: 0 10px 30px rgba(0,0,0,0.50);
}

/* gradient border */
.modal-shell::before{
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;

  background: linear-gradient(
    90deg,
    rgba(250,204,21,0.15),
    rgba(250,204,21,0.90),
    rgba(250,204,21,0.15)
  );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}


/* =========================
   INNER SURFACES (replaces old #1e1e1e blocks)
   Use these inside tiles/modals for tables/cards/list items
   ========================= */
.tile-inner{
  background: rgba(18,18,18,0.35);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
}

.tile-inner-strong{
  background: rgba(18,18,18,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}

/* For clickable rows/cards inside tiles */
.tile-card{
  background: rgba(18,18,18,0.40);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
}

.tile-card:hover{
  background: rgba(18,18,18,0.52);
  border-color: rgba(255,255,255,0.10);
}

/* Inner wrapper with NO border (prevents double-panel look) */
.tile-inner-plain{
  background: transparent;
  border: none;
  border-radius: 0;
}


/* Morning Market Summary meta line (Sentiment Summary: Global) */
.mms-meta{
  background: rgba(0,0,0,0.18);
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 8px;
}

/* Morning Market Summary body block */
.mms-body{
  background: rgba(0,0,0,0.22);
  border-radius: 8px;
  padding: 10px;
}


/* =========================
   RATE EXPECTATIONS: cleaner darker rows (no weird underline under flags)
   ========================= */
.rate-table-skin{
  background: transparent;
}

/* ---- If builder returns a real <table> ---- */
.rate-table-skin table{
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

/* Remove cell borders entirely (these caused the misaligned underline effect) */
.rate-table-skin th,
.rate-table-skin td{
  border: none !important;
  padding: 4px 5px;
  color: #e6e6e6;
  vertical-align: middle;
}

/* Row backgrounds (darker so it doesn't look hovered) */
.rate-table-skin tr{
  background: rgba(0,0,0,0.28);              /* darker base */
  box-shadow: inset 0 -1px rgba(255,255,255,0.06); /* single clean divider */
}

.rate-table-skin tr:nth-child(even){
  background: rgba(0,0,0,0.36);              /* slightly darker alt row */
}

/* Optional: keep hover subtle (or remove it entirely) */
.rate-table-skin tr:hover{
  background: rgba(0,0,0,0.36);              /* same as even to avoid "selected" look */
}

/* Ensure flags/images don't create baseline artifacts */
.rate-table-skin img{
  display: block;
}

/* ---- If builder is DIV-based rows ---- */
.rate-table-skin .row,
.rate-table-skin .rate-row,
.rate-table-skin .table-row{
  background: rgba(0,0,0,0.28);
  box-shadow: inset 0 -1px rgba(255,255,255,0.06);
}

.rate-table-skin .row:nth-child(even),
.rate-table-skin .rate-row:nth-child(even),
.rate-table-skin .table-row:nth-child(even){
  background: rgba(0,0,0,0.36);
}

.rate-table-skin .row:hover,
.rate-table-skin .rate-row:hover,
.rate-table-skin .table-row:hover{
  background: rgba(0,0,0,0.36);
}

#app-footer{
  background: rgba(0,0,0,0.70) !important;   /* darker strip */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}



/* =========================
   CB NEWS MODAL: KILL YELLOW FRAME EVERYWHERE
   (fixes stray border line inside modal)
   ========================= */

/* 1) If the frame is drawn via pseudo-elements on any element */
#cb-news-modal *::before,
#cb-news-modal *::after{
  /* don't break icons/images because this is scoped to cb-news-modal only */
  box-shadow: none !important;
  background-image: none !important;
  border-image: none !important;
}

/* 2) Specifically disable content-bearing frame pseudos (most common pattern) */
#cb-news-modal .home-tile::before,
#cb-news-modal .home-tile::after,
#cb-news-modal .modal-shell::before,
#cb-news-modal .modal-shell::after,
#cb-news-modal .glass::before,
#cb-news-modal .glass::after,
#cb-news-modal .tile-glass::before,
#cb-news-modal .tile-glass::after{
  content: none !important;
  display: none !important;
}

/* 3) If the frame is a gradient border via background on the element */
#cb-news-modal .home-tile,
#cb-news-modal .modal-shell,
#cb-news-modal .glass,
#cb-news-modal .tile-glass{
  background-image: none !important;
  border-image: none !important;
}

/* Keep the modal shell looking good (restore clean edge) */
#cb-news-modal .modal-shell{
  background: rgba(8, 8, 8, 0.92) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,0.65) !important;
  backdrop-filter: blur(12px);
}




/* When the cell is in "blue" state, force blue on the rendered text */
#cal2-grid .ag-cell.cal2-forecast-blue,
#cal2-grid .ag-cell.cal2-forecast-blue .cal2-link-forecast,
#cal2-grid .ag-cell.cal2-forecast-blue .ag-cell-wrapper,
#cal2-grid .ag-cell.cal2-forecast-blue .ag-cell-value,
#cal2-grid .ag-cell.cal2-forecast-blue span,
#cal2-grid .ag-cell.cal2-forecast-blue * {
  color: #60a5fa !important;
  font-weight: 600;
}

/* CALENDAR V2: darker rows for CB SPEAK + HOLIDAY */
#cal2-grid .ag-row.cal2-row-cbspeak .ag-cell,
#cal2-grid .ag-row.cal2-row-holiday .ag-cell {
  background-color: rgba(255,255,255,0.04) !important;
}

#cal2-grid .ag-row.cal2-row-cbspeak:hover .ag-cell,
#cal2-grid .ag-row.cal2-row-holiday:hover .ag-cell {
  background-color: rgba(255,255,255,0.06) !important;
}



/* =========================
   POSITIONING: tighter table rows
   ========================= */
#positioning-tile-1 table th,
#positioning-tile-1 table td {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  line-height: 1.2 !important;
}

#positioning-tile-1 table td {
  font-size: 12px !important;   /* optional: slightly smaller */
}

#positioning-tile-1 table th {
  font-size: 12px !important;   /* optional: slightly smaller */
}



/* =========================
   POSITIONING: prevent dropdown pill overlap
   ========================= */

/* Make sure dropdown wrappers don't introduce negative margins */
#positioning-tile-2 .pill-dropdown,
#positioning-tile-2 .dash-dropdown {
  margin: 0 !important;
}

/* Add a clean gap between the two dropdown pills */
#positioning-tile-2 .pill-dropdown {
  margin-right: 10px !important;
}

/* Don't add extra gap after the last dropdown */
#positioning-tile-2 .pill-dropdown:last-child {
  margin-right: 0 !important;
}


/* Force-hide the Calendar V2 detail text */
#cal2-detail {
  display: none !important;
}




/* Currency + general: allow dropdown menus to escape glass tiles */
.tile-overflow-visible { 
  overflow: visible !important; 
}

/* Generic modal close button (used by Currency modals) */
.modal-close-btn{
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}
.modal-close-btn:hover{
  opacity: 0.85;
}



/* =========================
   PLOTLY IN GLASS TILES (GLOBAL)
   - prevents white flashes
   - keeps charts transparent so the glass tile shows through
   ========================= */
.home-tile .js-plotly-plot,
.home-tile .plot-container,
.home-tile .svg-container {
  background: transparent !important;
}

.home-tile .modebar {
  background: transparent !important;
}

.home-tile .main-svg {
  background: transparent !important;
}


/* =========================
   IVOL TABLE: tighter rows
   ========================= */
#ivol-tile-1 .rate-card th,
#ivol-tile-1 .rate-card td {
  padding: 6px 8px !important;   /* was effectively bigger */
  line-height: 1.15 !important;
  font-size: 12px !important;
}

#ivol-tile-1 .rate-card thead th {
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}

/* Optional: slightly tighter pills inside table cells */
#ivol-tile-1 .rate-card td > div,
#ivol-tile-1 .rate-card td {
  vertical-align: middle;
}



/* COUNTRY MODALS: force landscape sizing */
#country-cesi-modal .modal-shell,
#country-spread-modal .modal-shell,
#country-reer-modal .modal-shell,
#country-ctot-modal .modal-shell,
#country-inflexp-modal .modal-shell,
#country-yieldcurve-modal .modal-shell,
#country-cpi-modal .modal-shell,
#country-gdp-modal .modal-shell,
#country-unemp-modal .modal-shell{
  width: 92vw;
  max-width: 1500px;
  height: 86vh;
  display: flex;
  flex-direction: column;
}



.page-loader-dots {
    display: flex;
    gap: 10px;
}

.page-loader-dots span {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #FACC15;
    animation: pageLoaderBounce 0.8s infinite ease-in-out;
}

.page-loader-dots span:nth-child(2) {
    animation-delay: 0.12s;
}

.page-loader-dots span:nth-child(3) {
    animation-delay: 0.24s;
}

@keyframes pageLoaderBounce {
    0%, 80%, 100% {
        transform: scale(0.7);
        opacity: 0.45;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}




/****************************************************************************** 
====================== HOME PAGE - MORNING MARKET SUMMARY =====================
******************************************************************************/



/* Morning Market Summary - pill tabs */
.mms-tabs {
  display: flex !important;
  justify-content: flex-start !important;
  gap: 6px;
  border: none !important;
  background: transparent !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 8px;
  scrollbar-width: none;
}

.mms-tabs::-webkit-scrollbar {
  display: none;
}

.mms-tab {
  background: #1e1e1e !important;
  border-radius: 9999px !important;
  color: #e5e7eb !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  padding: 3px 9px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  margin: 0 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

.mms-tab--selected {
  background: #262626 !important;
  color: #f5d10f !important;
  border: 1px solid rgba(245,209,15,0.35) !important;
}

.mms-panel {
  min-height: 0;
}

.mms-current-document,
.mms-current-sections {
  font-family: var(--dashboard-font-family);
  font-size: 13px;
  font-weight: var(--dashboard-font-medium);
  line-height: 1.62;
}

.mms-topline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.mms-meta {
  color: #bbb;
  font-size: 11px;
  line-height: 1.25;
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
}

.mms-updated {
  color: #777;
  font-size: 10px;
  line-height: 1.1;
  white-space: nowrap;
}

.mms-wrap-headline {
  color: #f5d10f;
  font-size: 12px;
  line-height: 1.2;
  margin: 1px 0 4px;
}

.mms-wrap-drivers {
  color: #cfcfcf;
  font-size: 11px;
  line-height: 1.3;
  margin: 0 0 8px;
  opacity: 0.9;
}

.mms-body {
  color: #e0e0e0;
  font-size: 13px;
  line-height: 1.62;
  white-space: pre-line;
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.mms-body strong,
.mms-body b {
  color: #f3f4f6;
}

.mms-body br {
  line-height: 1.6;
}

.mms-weekly-wrap,
.mms-story-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mms-weekly-hero,
.mms-story-hero {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.mms-weekly-headline,
.mms-story-headline {
  color: #f8e58f;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
}

.mms-weekly-summary,
.mms-story-summary {
  color: #e0e0e0;
  font-size: 13px;
  line-height: 1.62;
  white-space: pre-line;
}

.mms-weekly-grid,
.mms-story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.mms-weekly-card,
.mms-weekly-section,
.mms-story-card,
.mms-day-card {
  border-radius: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.mms-weekly-card-title,
.mms-weekly-section-title,
.mms-story-card-title,
.mms-day-title,
.mms-day-strip-label {
  color: #f5d10f;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 7px;
}

.mms-weekly-card-body,
.mms-story-card-body,
.mms-day-body {
  color: #e0e0e0;
  font-size: 13px;
  line-height: 1.62;
  white-space: pre-line;
}

.mms-weekly-note {
  color: #b4ad8c;
  font-size: 10px;
  line-height: 1.35;
}

.mms-weekly-sections {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mms-weekly-section-body {
  color: #e0e0e0;
  font-size: 13px;
  line-height: 1.62;
  white-space: pre-line;
}

.mms-day-strip-wrap {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.mms-day-strip-label {
  margin-bottom: 0;
}

.mms-day-strip {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.mms-day-card {
  flex: 1 1 auto;
}




#morning-summary-modal-body .mms-body {
  font-size: 13px;
  line-height: 1.6;
}

#morning-summary-modal-body .mms-wrap-drivers {
  font-size: 12px;
  line-height: 1.4;
}

#morning-summary-modal-body .mms-meta,
#morning-summary-modal-body .mms-updated {
  font-size: 11px;
}

#morning-summary-modal-body .mms-weekly-headline,
#morning-summary-modal-body .mms-story-headline {
  font-size: 17px;
}

#morning-summary-modal-body .mms-weekly-summary,
#morning-summary-modal-body .mms-story-summary,
#morning-summary-modal-body .mms-weekly-card-body,
#morning-summary-modal-body .mms-weekly-section-body,
#morning-summary-modal-body .mms-story-card-body,
#morning-summary-modal-body .mms-day-body {
  font-size: 13px;
  line-height: 1.65;
}

#morning-summary-modal-body .mms-weekly-card-title,
#morning-summary-modal-body .mms-weekly-section-title,
#morning-summary-modal-body .mms-story-card-title,
#morning-summary-modal-body .mms-day-title,
#morning-summary-modal-body .mms-day-strip-label {
  font-size: 11px;
}




/* =========================
   VIDEO COMMENTARY PAGE ONLY
   - larger cards than Home page
   - separate from shared video tile styles
   ========================= */

#video-commentary-page-tile .video-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 16px;
  overflow-y: auto;
  min-height: 300px;
  padding: 6px;
}

#video-commentary-page-tile .video-card {
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.45);
}

#video-commentary-page-tile .video-card:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 16px rgba(0,0,0,0.55);
}

#video-commentary-page-tile .video-thumb,
#video-commentary-page-tile .video-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

#video-commentary-page-tile .video-title {
  font-size: 15px;
  font-weight: 700;
  padding: 8px 10px 2px 10px;
}

#video-commentary-page-tile .video-date {
  font-size: 12px;
  padding: 0 10px 8px 10px;
}

#video-commentary-page-tile .play-btn {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 10px;
}




/* Seasonality dropdown dark theme */
#seasonality-asset-dropdown .Select-control,
#seasonality-asset-dropdown .Select-menu-outer,
#seasonality-asset-dropdown .Select-menu,
#seasonality-asset-dropdown .Select-value,
#seasonality-asset-dropdown .Select-placeholder,
#seasonality-asset-dropdown .Select-input > input {
    background-color: #111111 !important;
    color: #ffffff !important;
}

#seasonality-asset-dropdown .Select-value-label {
    color: #ffffff !important;
}

#seasonality-asset-dropdown .Select-placeholder {
    color: #bfbfbf !important;
}

#seasonality-asset-dropdown .Select-arrow-zone,
#seasonality-asset-dropdown .Select-clear-zone {
    color: #ffffff !important;
}

#seasonality-asset-dropdown .Select-option {
    background-color: #111111 !important;
    color: #ffffff !important;
}

#seasonality-asset-dropdown .Select-option.is-focused {
    background-color: #1c1c1c !important;
    color: #ffffff !important;
}

#seasonality-asset-dropdown .Select-option.is-selected {
    background-color: #222222 !important;
    color: #ffffff !important;
}

#seasonality-asset-dropdown .VirtualizedSelectOption {
    background-color: #111111 !important;
    color: #ffffff !important;
}

#seasonality-asset-dropdown .VirtualizedSelectFocusedOption {
    background-color: #1c1c1c !important;
    color: #ffffff !important;
}



/* SEASONALITY TABLE - kill Dash row/cell hover highlight */
#seasonality-monthly-table table tbody tr:hover,
#seasonality-monthly-table table tbody tr:hover td,
#seasonality-monthly-table table tbody tr:hover th,
#seasonality-monthly-table table tbody tr:hover .dash-cell-value,
#seasonality-monthly-table .dash-cell:hover,
#seasonality-monthly-table .dash-cell:hover .dash-cell-value,
#seasonality-monthly-table .dash-cell.focused,
#seasonality-monthly-table .dash-cell.focused .dash-cell-value,
#seasonality-monthly-table .dash-cell.cell--selected,
#seasonality-monthly-table .dash-cell.cell--selected .dash-cell-value,
#seasonality-monthly-table td.focused,
#seasonality-monthly-table td.cell--selected,
#seasonality-monthly-table td.focused .dash-cell-value,
#seasonality-monthly-table td.cell--selected .dash-cell-value {
    background: rgba(0, 0, 0, 0) !important;
    background-color: rgba(0, 0, 0, 0) !important;
    color: white !important;
}

/* optional subtle custom hover instead of white */
#seasonality-monthly-table table tbody tr:hover td,
#seasonality-monthly-table table tbody tr:hover .dash-cell-value {
    background-color: rgba(255, 255, 255, 0.03) !important;
}




/* =========================================================
   SIDEBAR - BLACK SHELL WITH SUBTLE BORDERS
   ========================================================= */

.sidebar.sidebar-shell {
    width: 162px;
    min-width: 162px;
    max-width: 162px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 18px 10px 18px 12px;
    box-sizing: border-box;

    /* black background instead of glass */
    background: #000000;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    /* simple divider instead of framed shell */
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    border-top: none;
    border-bottom: none;
    border-left: none;

    /* remove shell rounding */
    border-radius: 0;
    overflow: visible;

    position: relative;
}

/* remove yellow / gradient frame */
.sidebar.sidebar-shell::before {
    content: none !important;
    display: none !important;
}

.sidebar-top {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.sidebar-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-bottom: 22px;
    margin-left: 4px;   /* moves logo away from hard left edge */
    margin-top: 2px;    /* keeps it from feeling jammed into the top */
    border-radius: 8px;
    align-self: flex-start;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* main nav row */
.sidebar .nav-item.nav-item-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: calc(100% + 22px);
    min-height: 30px;
    margin-left: -12px;
    margin-right: -10px;
    padding: 6px 12px;
    box-sizing: border-box;
    text-decoration: none;
    text-align: left;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    color: #ffffff !important;
}

/* regular hover */
.sidebar .nav-item.nav-item-row:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-radius: 8px !important;
}

/* active row */
.sidebar .nav-item.nav-item-row.active {
    background: #2e2153 !important;
    color: #FFD700 !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 8px !important;
}

/* active text/icon color */
.sidebar .nav-item.nav-item-row.active .nav-item-label,
.sidebar .nav-item.nav-item-row.active .nav-item-icon i {
    color: #FFD700 !important;
}

/* icon wrapper */
.nav-item-icon {
    width: 16px;
    min-width: 16px;
    flex: 0 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px 0 0;
    padding: 0;
    line-height: 1;
}

/* main menu icon size */
.nav-item-icon i {
    display: block;
    font-size: 15px !important;
    line-height: 1 !important;
    color: #ffffff !important;
}

/* label */
.nav-item-label {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-size: 11px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #ffffff !important;
    text-align: left;
}

/* logout */
.sidebar-logout-btn {
    margin-top: 18px;
    width: calc(100% + 22px);
    min-height: 30px;
    margin-left: -12px;
    margin-right: -10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 6px 12px;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    cursor: pointer;
    box-sizing: border-box;
    text-align: left;
    color: #ffffff !important;
}

.sidebar-logout-btn:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-radius: 8px !important;
}

.sidebar-logout-btn .nav-item-icon {
    width: 16px;
    min-width: 16px;
    flex: 0 0 16px;
    margin: 0 10px 0 0;
}

.sidebar-logout-btn .nav-item-icon i {
    display: block;
    font-size: 15px !important;
    line-height: 1 !important;
    color: #ffffff !important;
}

.sidebar-logout-btn .nav-item-label {
    font-size: 11px;
    line-height: 1.15;
    color: #ffffff !important;
}

.sidebar-logout-btn,
.sidebar-logout-btn .nav-item-label,
.sidebar-logout-btn .nav-item-icon,
.sidebar-logout-btn .nav-item-icon i {
    color: #ffffff !important;
}




/* =========================
   EARNINGS DATE PICKER
   placement only
   ========================= */

#earnings-tile-1,
#earnings-tile-1 .DateRangePicker,
#earnings-tile-1 .DateRangePicker_picker {
  overflow: visible !important;
}

#earnings-tile-1 .DateRangePicker {
  position: relative !important;
  z-index: 50 !important;
}

#earnings-tile-1 .DateRangePicker_picker {
  z-index: 9999 !important;
}




.ag-center-header .ag-header-cell-label {
  justify-content: center !important;
}

.ag-left-header .ag-header-cell-label {
  justify-content: flex-start !important;
}

.ag-center-cell {
  text-align: center !important;
}

.ag-center-cell .ag-cell-value {
  width: 100% !important;
  text-align: center !important;
}





/* =========================
   EARNINGS MULTI DROPDOWNS
   company + sector
   based on Home news tag dropdown styling
   ========================= */

/* Keep Earnings controls above the grid/menu layers */
#earnings-tile-1,
#earnings-tile-1 .tile-inner-strong,
#earnings-tile-1 .dash-dropdown,
#earnings-tile-1 .earnings-multi-filter,
#earnings-tile-1 .earnings-multi-filter .Select,
#earnings-tile-1 .earnings-multi-filter .Select-control {
  overflow: visible !important;
}

/* Shared dropdown wrapper */
.earnings-multi-filter {
  width: 100% !important;
  min-width: 0 !important;
}

/* Outer control */
.earnings-multi-filter .Select-control,
.earnings-multi-filter .Select--multi .Select-control {
  background-color: #1e1e1e !important;
  border: 1px solid #2b2b2b !important;
  border-radius: 9999px !important;
  min-height: 32px !important;
  height: auto !important;
  min-height: 32px !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
  padding: 2px 8px !important;
}

/* Value area */
.earnings-multi-filter .Select-multi-value-wrapper,
.earnings-multi-filter .Select-value {
  display: flex;
  align-items: center;
}

/* Input / placeholder */
.earnings-multi-filter .Select-placeholder,
.earnings-multi-filter .Select-input > input {
  color: #ffffff !important;
  font-size: 11px !important;
  line-height: 26px !important;
}

.earnings-multi-filter .Select-placeholder {
  color: #888888 !important;
  padding-left: 2px;
}

/* Selected chips */
.earnings-multi-filter .Select--multi .Select-value,
.earnings-multi-filter .Select-value {
  background-color: rgba(139, 92, 246, 0.18) !important;
  border: 1px solid rgba(139, 92, 246, 0.35) !important;
  border-radius: 9999px !important;
  color: #e7d7ff !important;
  font-size: 9px !important;
  line-height: 1 !important;
  min-height: 18px !important;
  margin-top: 1px !important;
  margin-bottom: 1px !important;
  margin-right: 4px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  max-width: 100% !important;
}

.earnings-multi-filter .Select-value-icon {
  border-right: 1px solid rgba(139, 92, 246, 0.25) !important;
  color: #d8c1ff !important;
  padding: 0 5px !important;
  line-height: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
}

.earnings-multi-filter .Select-value-icon:hover {
  background-color: rgba(139, 92, 246, 0.12) !important;
  color: #ffffff !important;
}

.earnings-multi-filter .Select-value-label {
  color: #e7d7ff !important;
  padding: 0 6px !important;
  line-height: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  max-width: 220px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Arrow / clear icons */
.earnings-multi-filter .Select-arrow-zone,
.earnings-multi-filter .Select-clear-zone {
  color: #bbbbbb !important;
}

.earnings-multi-filter .Select-arrow-zone:hover,
.earnings-multi-filter .Select-clear-zone:hover {
  color: #ffffff !important;
}

/* Menu */
.earnings-multi-filter .Select-menu-outer {
  background: #1e1e1e !important;
  border: 1px solid #2b2b2b !important;
  border-radius: 10px !important;
  margin-top: 6px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35) !important;
  z-index: 10000 !important;
}

.earnings-multi-filter .Select-option {
  background: #1e1e1e !important;
  color: #ffffff !important;
  font-size: 11px !important;
  padding: 7px 10px !important;
}

.earnings-multi-filter .Select-option.is-focused {
  background: #2a2a2a !important;
  color: #ffffff !important;
}

.earnings-multi-filter .Select-option.is-selected {
  background: #2e2153 !important;
  color: #ffd700 !important;
}

/* Keep menus above the table/grid area */
#earnings-tile-1 .earnings-multi-filter,
#earnings-tile-1 .earnings-multi-filter .Select,
#earnings-tile-1 .earnings-multi-filter .Select-control,
#earnings-tile-1 .earnings-multi-filter .Select-menu-outer {
  z-index: 10000 !important;
}

/* Slightly better wrapping behavior when many chips are selected */
.earnings-multi-filter .Select--multi .Select-multi-value-wrapper {
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}

/* Make the two filters feel consistent in the controls row */
#earnings-company-filter,
#earnings-sector-filter {
  width: 100% !important;
}

/* Keep multi-select chips inside the control. Selected values wrap downward
   instead of extending across the neighbouring Earnings filters. */
#earnings-tile-1 .earnings-multi-filter .Select--multi .Select-control {
  align-items: center !important;
  overflow: hidden !important;
  border-radius: 16px !important;
}

.earnings-multi-filter .Select--multi .Select-multi-value-wrapper {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-wrap: wrap !important;
  align-content: flex-start !important;
  align-items: center !important;
  gap: 2px 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  white-space: normal !important;
}

.earnings-multi-filter .Select--multi .Select-value {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 4px) !important;
  overflow: hidden !important;
}

.earnings-multi-filter .Select--multi .Select-value-label {
  min-width: 0 !important;
  max-width: 180px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.earnings-multi-filter .Select--multi .Select-input {
  flex: 1 0 72px !important;
  min-width: 72px !important;
  max-width: 100% !important;
}
+

/* Earnings filters use compact summaries and vertical checkbox menus. */
.earnings-checkbox-filter {
  position: relative;
  width: 100%;
  min-width: 0;
  z-index: 10020;
}

.earnings-checkbox-filter > summary {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--fm-border-subtle, #2b2b2b);
  border-radius: 999px;
  background: var(--fm-surface-2, #1e1e1e);
  color: var(--fm-text-primary, #ffffff);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  box-sizing: border-box;
  font-size: 11px;
  line-height: 1.2;
  user-select: none;
}

.earnings-checkbox-filter > summary::-webkit-details-marker {
  display: none;
}

.earnings-checkbox-filter[open] > summary {
  border-color: var(--fm-accent, #8b5cf6);
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.12);
}

.earnings-filter-summary-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.earnings-filter-chevron {
  flex: 0 0 auto;
  color: var(--fm-text-muted, #a1a1aa);
  font-size: 14px;
  transition: transform 140ms ease;
}

.earnings-checkbox-filter[open] .earnings-filter-chevron {
  transform: rotate(180deg);
}

.earnings-checkbox-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 10030;
  padding: 8px;
  border: 1px solid var(--fm-border-subtle, #333333);
  border-radius: 12px;
  background: var(--fm-surface-2, #171717);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
  box-sizing: border-box;
}

.earnings-filter-search {
  width: 100%;
  height: 32px;
  margin-bottom: 7px;
  padding: 0 10px;
  border: 1px solid var(--fm-border-subtle, #333333);
  border-radius: 8px;
  outline: none;
  background: var(--fm-surface-1, #0f0f10);
  color: var(--fm-text-primary, #ffffff);
  font-size: 11px;
  box-sizing: border-box;
}

.earnings-filter-search:focus {
  border-color: var(--fm-accent, #8b5cf6);
}
+
.earnings-filter-menu-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
}

.earnings-filter-menu-actions-right {
  justify-content: flex-end;
}

.earnings-filter-menu-actions .earnings-filter-search {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

.earnings-filter-clear {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--fm-border-subtle, #3f3f46);
  border-radius: 8px;
  background: var(--fm-surface-1, #0f0f10);
  color: var(--fm-text-secondary, #d4d4d8);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.earnings-filter-clear:hover {
  border-color: var(--fm-accent, #8b5cf6);
  color: var(--fm-text-primary, #ffffff);
  background: var(--fm-hover-bg, rgba(139, 92, 246, 0.14));
}


.earnings-filter-checklist {
  max-height: 270px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 3px;
}

.earnings-filter-checklist label {
  width: 100%;
  min-height: 31px;
  margin: 0;
  padding: 6px 7px;
  border-radius: 7px;
  display: flex !important;
  align-items: center;
  gap: 8px;
  color: var(--fm-text-primary, #ffffff);
  font-size: 11px;
  line-height: 1.25;
  cursor: pointer;
  box-sizing: border-box;
}

.earnings-filter-checklist label:hover {
  background: var(--fm-hover-bg, rgba(139, 92, 246, 0.14));
}

.earnings-filter-checklist input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--fm-accent, #8b5cf6);
}

:root[data-theme="light"] .earnings-checkbox-menu {
  box-shadow: 0 14px 34px rgba(30, 41, 59, 0.18);
}

@media (max-width: 760px) {
  .earnings-checkbox-menu {
    min-width: min(320px, calc(100vw - 42px));
  }

  .earnings-filter-checklist {
    max-height: 230px;
  }
}






/* =========================
   RESEARCH PAGE DROPDOWNS
   ========================= */

.research-dd,
.research-dd .Select-control,
.research-dd .Select-menu-outer,
.research-dd .Select-menu {
  z-index: 9999 !important;
}

.research-dd .Select-menu-outer {
  position: absolute !important;
}

#research-header-tile {
  position: relative;
  z-index: 50;
  overflow: visible !important;
}

#research-feed-tile,
#research-detail-tile {
  position: relative;
  z-index: 1;
}





/******************************************************************************
========================== RETAIL SENTIMENT PAGE ==============================
SCOPED ONLY TO RETAIL SENTIMENT PAGE
******************************************************************************/

/* =========================
   Retail tiles: allow inner content to shrink cleanly
   ========================= */
#retail-sentiment-tile-1,
#retail-sentiment-tile-2,
#retail-sentiment-tile-3 {
  min-width: 0;
  min-height: 0;
}

#retail-sentiment-tile-1 .tile-scroll,
#retail-sentiment-tile-2 .tile-scroll,
#retail-sentiment-tile-3 .tile-scroll {
  min-height: 0;
}

/* =========================
   Retail top buttons / pills
   Keep scoped so other pages do not change
   ========================= */
#retail-sentiment-tile-1 .pill-btn,
#retail-sentiment-tile-2 .pill-btn,
#retail-sentiment-tile-3 .pill-btn,
#open-retail-sentiment-alerts-btn,
#close-retail-sentiment-alerts-btn,
#save-retail-sentiment-history-btn {
  font-size: 10px !important;
  line-height: 1.05 !important;
  padding: 2px 8px !important;
}

#retail-sentiment-tile-1 .btn-group,
#retail-sentiment-tile-1 .btn-group-sm,
#retail-sentiment-tile-1 .btn-group > .btn,
#retail-sentiment-tile-1 .btn-group-sm > .btn {
  flex-wrap: wrap;
  gap: 4px;
}

/* =========================
   Retail dropdowns
   Scoped only to the two Retail page dropdowns
   ========================= */
#retail-sentiment-tile1-asset-dd .Select-control,
#retail-sentiment-asset-dd .Select-control {
  background: #1e1e1e !important;
  border: 1px solid #2b2b2b !important;
  border-radius: 9999px !important;
  min-height: 32px !important;
  height: 32px !important;
  box-shadow: none !important;
  font-size: 11px !important;
}

#retail-sentiment-tile1-asset-dd .Select-placeholder,
#retail-sentiment-asset-dd .Select-placeholder,
#retail-sentiment-tile1-asset-dd .Select-value-label,
#retail-sentiment-asset-dd .Select-value-label,
#retail-sentiment-tile1-asset-dd .Select-input > input,
#retail-sentiment-asset-dd .Select-input > input {
  color: #ffffff !important;
  font-size: 11px !important;
  line-height: 30px !important;
}

#retail-sentiment-tile1-asset-dd .Select-arrow-zone,
#retail-sentiment-asset-dd .Select-arrow-zone,
#retail-sentiment-tile1-asset-dd .Select-clear-zone,
#retail-sentiment-asset-dd .Select-clear-zone {
  color: #ffffff !important;
}

#retail-sentiment-tile1-asset-dd .Select-menu-outer,
#retail-sentiment-asset-dd .Select-menu-outer {
  background: #1e1e1e !important;
  border: 1px solid #2b2b2b !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  z-index: 10000 !important;
}

#retail-sentiment-tile1-asset-dd .Select-option,
#retail-sentiment-asset-dd .Select-option {
  background: #1e1e1e !important;
  color: #ffffff !important;
  font-size: 11px !important;
  padding: 6px 10px !important;
}

#retail-sentiment-tile1-asset-dd .Select-option.is-focused,
#retail-sentiment-asset-dd .Select-option.is-focused {
  background: #2b2b2b !important;
  color: #ffffff !important;
}

/* Keep menus above chart/tile layers */
#retail-sentiment-tile-1,
#retail-sentiment-tile-2 {
  overflow: visible !important;
}

#retail-sentiment-tile-1 .Select-menu-outer,
#retail-sentiment-tile-2 .Select-menu-outer {
  z-index: 10000 !important;
}

/* =========================
   Retail helper / meta text
   ========================= */
#retail-sentiment-last-updated,
#retail-sentiment-details-asof {
  font-size: 11px !important;
  line-height: 1.15 !important;
  color: #9CA3AF !important;
}

/* =========================
   Retail Tile 3 details body
   This is the main place to tighten the details panel visually
   without touching other pages.
   ========================= */
#retail-sentiment-tile-3-body {
  font-size: 11px;
  line-height: 1.35;
  color: #e5e7eb;
}

#retail-sentiment-tile-3-body > div {
  margin-bottom: 8px !important;
}

#retail-sentiment-tile-3-body h4,
#retail-sentiment-tile-3-body h5,
#retail-sentiment-tile-3-body strong {
  line-height: 1.2;
}

#retail-sentiment-tile-3-body table {
  width: 100%;
  border-collapse: collapse;
}

#retail-sentiment-tile-3-body td,
#retail-sentiment-tile-3-body th {
  font-size: 11px !important;
  line-height: 1.2 !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  vertical-align: top;
}

#retail-sentiment-tile-3-body ul,
#retail-sentiment-tile-3-body ol {
  margin-top: 4px;
  margin-bottom: 6px;
  padding-left: 18px;
}

#retail-sentiment-tile-3-body li {
  margin-bottom: 3px;
  line-height: 1.3;
}

/* If the helper renders little glass cards/blocks */
#retail-sentiment-tile-3-body .tile-inner,
#retail-sentiment-tile-3-body .tile-inner-strong,
#retail-sentiment-tile-3-body .tile-card {
  padding: 8px 10px;
  border-radius: 9px;
}

/* =========================
   Retail modal
   ========================= */
#retail-sentiment-alerts-modal .save-btn {
  font-size: 10px !important;
  line-height: 1.05 !important;
  padding: 2px 8px !important;
}

#retail-sentiment-alerts-modal-body {
  font-size: 11px;
  line-height: 1.4;
}

#retail-sentiment-alerts-modal-body > div {
  margin-bottom: 8px;
}

/* =========================
   Retail graphs
   Keep charts transparent and stop weird overflow behavior
   ========================= */
#retail-sentiment-tile-1 .js-plotly-plot,
#retail-sentiment-tile-1 .plot-container,
#retail-sentiment-tile-1 .svg-container,
#retail-sentiment-tile-2 .js-plotly-plot,
#retail-sentiment-tile-2 .plot-container,
#retail-sentiment-tile-2 .svg-container {
  background: transparent !important;
}

/* =========================
   Slightly tighter headers within retail tiles only
   ========================= */
#retail-sentiment-tile-1 h3,
#retail-sentiment-tile-2 h3,
#retail-sentiment-tile-3 h3 {
  line-height: 1.1 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}





/* =========================================
   COUNTRY MODAL CHARTS - force pure black
   ========================================= */




#country-cesi-modal-graph,
#country-spread-modal-graph,
#country-reer-modal-graph,
#country-ctot-modal-graph,
#country-inflexp-modal-graph,
#country-yieldcurve-modal-graph,
#country-cpi-modal-graph,
#country-gdp-modal-graph,
#country-unemp-modal-graph,
#currency-diff-modal-graph,
#currency-iv-modal-graph,
#currency-netpct-modal-graph,
#currency-rr-modal-graph,
#cb-curve-modal-graph,
#cb-policy-rate-modal-graph,
#ivol-tile2-modal-graph,
#ivol-tile3-modal-graph,
#crossassetvol-modal-graph-1,
#crossassetvol-modal-graph-2,
#crossassetvol-modal-graph-3,
#crossassetvol-modal-graph-4,
#correlation-matrix-modal-graph,
#correlation-rolling-modal-graph,
#positioning-netpct-modal-graph {
  background: #000000 !important;
}

/* Force all inner Plotly containers to black too */
#country-cesi-modal-graph .js-plotly-plot,
#country-spread-modal-graph .js-plotly-plot,
#country-reer-modal-graph .js-plotly-plot,
#country-ctot-modal-graph .js-plotly-plot,
#country-inflexp-modal-graph .js-plotly-plot,
#country-yieldcurve-modal-graph .js-plotly-plot,
#country-cpi-modal-graph .js-plotly-plot,
#country-gdp-modal-graph .js-plotly-plot,
#country-unemp-modal-graph .js-plotly-plot,
#country-cesi-modal-graph .plot-container,
#country-spread-modal-graph .plot-container,
#country-reer-modal-graph .plot-container,
#country-ctot-modal-graph .plot-container,
#country-inflexp-modal-graph .plot-container,
#country-yieldcurve-modal-graph .plot-container,
#country-cpi-modal-graph .plot-container,
#country-gdp-modal-graph .plot-container,
#country-unemp-modal-graph .plot-container,
#country-cesi-modal-graph .svg-container,
#country-spread-modal-graph .svg-container,
#country-reer-modal-graph .svg-container,
#country-ctot-modal-graph .svg-container,
#country-inflexp-modal-graph .svg-container,
#country-yieldcurve-modal-graph .svg-container,
#country-cpi-modal-graph .svg-container,
#country-gdp-modal-graph .svg-container,
#country-unemp-modal-graph .svg-container,
#currency-diff-modal-graph .js-plotly-plot,
#currency-iv-modal-graph .js-plotly-plot,
#currency-netpct-modal-graph .js-plotly-plot,
#currency-rr-modal-graph .js-plotly-plot,
#currency-diff-modal-graph .plot-container,
#currency-iv-modal-graph .plot-container,
#currency-netpct-modal-graph .plot-container,
#currency-rr-modal-graph .plot-container,
#currency-diff-modal-graph .svg-container,
#currency-iv-modal-graph .svg-container,
#currency-netpct-modal-graph .svg-container,
#currency-rr-modal-graph .svg-container,
#cb-curve-modal-graph .js-plotly-plot,
#cb-policy-rate-modal-graph .js-plotly-plot,
#cb-curve-modal-graph .plot-container,
#cb-policy-rate-modal-graph .plot-container,
#cb-curve-modal-graph .svg-container,
#cb-policy-rate-modal-graph .svg-container,
#ivol-tile2-modal-graph .js-plotly-plot,
#ivol-tile3-modal-graph .js-plotly-plot,
#crossassetvol-modal-graph-1 .js-plotly-plot,
#crossassetvol-modal-graph-2 .js-plotly-plot,
#crossassetvol-modal-graph-3 .js-plotly-plot,
#crossassetvol-modal-graph-4 .js-plotly-plot,
#ivol-tile2-modal-graph .plot-container,
#ivol-tile3-modal-graph .plot-container,
#crossassetvol-modal-graph-1 .plot-container,
#crossassetvol-modal-graph-2 .plot-container,
#crossassetvol-modal-graph-3 .plot-container,
#crossassetvol-modal-graph-4 .plot-container,
#ivol-tile2-modal-graph .svg-container,
#ivol-tile3-modal-graph .svg-container,
#crossassetvol-modal-graph-1 .svg-container,
#crossassetvol-modal-graph-2 .svg-container,
#crossassetvol-modal-graph-3 .svg-container,
#crossassetvol-modal-graph-4 .svg-container,
#correlation-matrix-modal-graph .js-plotly-plot,
#correlation-rolling-modal-graph .js-plotly-plot,
#correlation-matrix-modal-graph .plot-container,
#correlation-rolling-modal-graph .plot-container,
#correlation-matrix-modal-graph .svg-container,
#correlation-rolling-modal-graph .svg-container,
#positioning-netpct-modal-graph .js-plotly-plot,
#positioning-netpct-modal-graph .plot-container,
#positioning-netpct-modal-graph .svg-container {
  background: #000000 !important;
}

/* Optional: keep the modebar area dark too */
#country-cesi-modal-graph .modebar,
#country-spread-modal-graph .modebar,
#country-reer-modal-graph .modebar,
#country-ctot-modal-graph .modebar,
#country-inflexp-modal-graph .modebar,
#country-yieldcurve-modal-graph .modebar,
#country-cpi-modal-graph .modebar,
#country-gdp-modal-graph .modebar,
#country-unemp-modal-graph .modebar,
#currency-diff-modal-graph .modebar,
#currency-iv-modal-graph .modebar,
#currency-netpct-modal-graph .modebar,
#currency-rr-modal-graph .modebar,
#cb-curve-modal-graph .modebar,
#cb-policy-rate-modal-graph .modebar,
#ivol-tile2-modal-graph .modebar,
#ivol-tile3-modal-graph .modebar,
#crossassetvol-modal-graph-1 .modebar,
#crossassetvol-modal-graph-2 .modebar,
#crossassetvol-modal-graph-3 .modebar,
#crossassetvol-modal-graph-4 .modebar,
#correlation-matrix-modal-graph .modebar,
#correlation-rolling-modal-graph .modebar,
#positioning-netpct-modal-graph .modebar {
  background: transparent !important;
}
















/* Fundamental report modal */
#earnings-fundamental-report-modal-shell {
    font-family: var(--dashboard-font-family);
}

#earnings-fundamental-report-body {
    scrollbar-color: rgba(245,209,15,0.55) rgba(255,255,255,0.08);
}

.fundamental-report-content {
    color: #e8edf7;
    font-family: var(--dashboard-font-family);
}

.fundamental-report-cover {
    border: 1px solid rgba(245,209,15,0.20);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(245,209,15,0.10), rgba(255,255,255,0.035) 42%, rgba(96,165,250,0.06));
    padding: 18px 20px;
    margin-bottom: 14px;
}

.fundamental-report-kicker {
    color: rgba(245,209,15,0.92);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.fundamental-report-company {
    color: #f8fafc;
    font-size: 28px;
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1.08;
    margin-top: 7px;
}

.fundamental-report-meta {
    color: rgba(226,232,240,0.72);
    font-size: 12px;
    line-height: 1.45;
    margin-top: 8px;
}

.fundamental-report-badges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 9px;
    margin-bottom: 18px;
}

.fundamental-report-badge {
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px;
    background: rgba(255,255,255,0.045);
    padding: 10px 12px;
    min-width: 0;
}

.fundamental-report-badge-label {
    color: rgba(203,213,225,0.68);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.fundamental-report-badge-value {
    color: #f8fafc;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    margin-top: 5px;
}

.fundamental-report-markdown {
    color: #e8edf7;
    font-size: 13.5px;
    line-height: 1.62;
    max-width: 980px;
}

.fundamental-report-markdown h1 {
    display: none;
}

.fundamental-report-markdown h2 {
    color: #f8fafc;
    font-size: 19px;
    font-weight: 850;
    line-height: 1.18;
    letter-spacing: 0;
    border-top: 1px solid rgba(255,255,255,0.10);
    padding-top: 17px;
    margin: 22px 0 9px;
}

.fundamental-report-markdown h2:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.fundamental-report-markdown h3 {
    color: #f5d10f;
    font-size: 15px;
    font-weight: 800;
    margin: 16px 0 7px;
}

.fundamental-report-markdown p {
    color: rgba(241,245,249,0.92);
    margin: 0 0 11px;
}

.fundamental-report-markdown strong {
    color: #ffffff;
    font-weight: 800;
}

.fundamental-report-markdown ul,
.fundamental-report-markdown ol {
    margin: 7px 0 13px 19px;
    padding: 0;
}

.fundamental-report-markdown li {
    margin: 0 0 6px;
    padding-left: 3px;
}

.fundamental-report-pdf-page {
    color: #172033 !important;
    background: #ffffff !important;
    font-family: var(--dashboard-font-family) !important;
    padding: 34px 42px !important;
    border: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.fundamental-report-pdf-page .fundamental-report-cover {
    background: #ffffff !important;
    border: none !important;
    border-bottom: 3px solid #111827 !important;
    border-radius: 0 !important;
    padding: 0 0 16px !important;
    margin-bottom: 18px !important;
}

.fundamental-report-pdf-page .fundamental-report-kicker {
    color: #7a5a00 !important;
}

.fundamental-report-pdf-page .fundamental-report-company {
    color: #111827 !important;
    font-size: 25px !important;
}

.fundamental-report-pdf-page .fundamental-report-meta,
.fundamental-report-pdf-page .fundamental-report-markdown p,
.fundamental-report-pdf-page .fundamental-report-markdown li {
    color: #263244 !important;
}

.fundamental-report-pdf-page .fundamental-report-badge {
    background: #f7f8fb !important;
    border: 1px solid #d9dee8 !important;
}

.fundamental-report-pdf-page .fundamental-report-badge-label {
    color: #697386 !important;
}

.fundamental-report-pdf-page .fundamental-report-badge-value,
.fundamental-report-pdf-page .fundamental-report-markdown h2,
.fundamental-report-pdf-page .fundamental-report-markdown strong {
    color: #111827 !important;
}

.fundamental-report-pdf-page .fundamental-report-markdown {
    color: #263244 !important;
    font-size: 12px !important;
    line-height: 1.52 !important;
    max-width: none !important;
}

.fundamental-report-pdf-page .fundamental-report-markdown h2 {
    font-size: 17px !important;
    border-top: 1px solid #d9dee8 !important;
    page-break-after: avoid;
    break-after: avoid;
}

.fundamental-report-pdf-page .fundamental-report-markdown p,
.fundamental-report-pdf-page .fundamental-report-markdown li {
    page-break-inside: avoid;
    break-inside: avoid;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.momentum-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
    gap: 10px;
}

.momentum-stat-card {
    min-width: 0;
    padding: 12px 12px 11px;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.018)),
        rgba(3,7,18,0.72);
    backdrop-filter: blur(9px);
}

.momentum-stat-label {
    color: rgba(255,255,255,0.58);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.72px;
    text-transform: uppercase;
}

.momentum-stat-value {
    margin-top: 5px;
    color: #f8fafc;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;
}

.momentum-stat-note {
    margin-top: 6px;
    color: rgba(226,232,240,0.72);
    font-size: 11px;
    line-height: 1.38;
    min-height: 30px;
}

.momentum-help-title {
    color: #f8fafc;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
}

.momentum-help-copy {
    color: rgba(226,232,240,0.74);
    font-size: 12px;
    line-height: 1.52;
}

.momentum-help-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.momentum-help-item,
.momentum-note-line {
    color: rgba(226,232,240,0.78);
    font-size: 12px;
    line-height: 1.5;
}

.momentum-detail-header {
    display: grid;
    gap: 4px;
}

.momentum-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.momentum-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.05);
    color: #f8fafc;
}

.momentum-badge--good {
    background: rgba(16,185,129,0.14);
    border-color: rgba(16,185,129,0.28);
    color: #d1fae5;
}

.momentum-badge--watch {
    background: rgba(245,208,15,0.15);
    border-color: rgba(245,208,15,0.28);
    color: #fef08a;
}

.momentum-badge--bear {
    background: rgba(251,113,133,0.14);
    border-color: rgba(251,113,133,0.28);
    color: #fecdd3;
}

.momentum-badge--accent {
    background: rgba(96,165,250,0.14);
    border-color: rgba(96,165,250,0.26);
    color: #dbeafe;
}

.momentum-badge--neutral {
    background: rgba(148,163,184,0.14);
    border-color: rgba(148,163,184,0.22);
    color: #e2e8f0;
}

.momentum-detail-copy {
    display: grid;
    gap: 6px;
}

.ag-tooltip {
    max-width: 460px !important;
    white-space: pre-line !important;
    line-height: 1.45 !important;
    padding: 11px 13px !important;
    font-size: 12px !important;
    color: rgba(248,250,252,0.96) !important;
    background: rgba(15,23,42,0.96) !important;
    border: 1px solid rgba(245,208,15,0.18) !important;
    box-shadow: 0 18px 44px rgba(2,6,23,0.55) !important;
}


/* ==========================================================================
   IMPLIED VOLATILITY PAGE — positioning-style table, checker and mobile
   ========================================================================== */
.ivol-tile-header { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.ivol-header-controls { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; min-width:0; }
.ivol-tile-collapse-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:30px;
    padding:5px 10px; border:1px solid rgba(218,195,255,.38); border-radius:999px;
    background:rgba(218,195,255,.08); color:#DAC3FF; font-size:10px; font-weight:750;
    cursor:pointer; white-space:nowrap;
}
.ivol-tile-collapse-btn:hover { background:rgba(218,195,255,.16); }
.ivol-page-tile.ivol-tile-collapsed {
    height:auto !important; min-height:0 !important; align-self:start !important;
    padding-top:12px !important; padding-bottom:12px !important;
}
.ivol-tile-collapsed .ivol-tile-header { margin-bottom:0 !important; }
.ivol-tile-collapsed .ivol-collapsible-body { display:none !important; }

#ivol-tile-1 .ivol-table-scroll, #ivol-tile-1 #ivol-table {
    overflow-x:auto !important; overflow-y:auto !important; scrollbar-gutter:stable;
}
#ivol-table .ivol-overview-table {
    width:100%; min-width:980px; table-layout:fixed; border-collapse:separate;
    border-spacing:0; background:transparent;
}
#ivol-table .ivol-overview-table th {
    position:sticky; top:0; z-index:3; padding:9px 8px !important;
    border-bottom:1px solid rgba(255,255,255,.10);
    background:linear-gradient(180deg,rgba(40,40,42,.99),rgba(27,27,29,.99));
    color:#c9cbd1; font-size:9px !important; font-weight:700; line-height:1.2 !important;
    text-align:right; white-space:nowrap; overflow:visible; text-overflow:clip;
}
#ivol-table .ivol-overview-table td {
    padding:8px !important; border-bottom:1px solid rgba(255,255,255,.065);
    background:rgba(255,255,255,.018); color:#e7e9ed; font-size:10px !important;
    line-height:1.25 !important; text-align:right; vertical-align:middle; white-space:nowrap;
}
#ivol-table .ivol-overview-row:nth-child(even) td,
#ivol-table .ivol-history-row:nth-child(even) td { background:rgba(255,255,255,.032); }
#ivol-table .ivol-overview-row:hover td,
#ivol-table .ivol-history-row:hover td { background:rgba(176,149,226,.075); }

/* Keep the frozen Date and Asset columns opaque while the mobile table scrolls. */
#ivol-tile-1 .ivol-table-scroll,
#ivol-table .ivol-overview-table { background:#0b0c0e; }
#ivol-table .ivol-overview-table th.ivol-date-cell,
#ivol-table .ivol-overview-table th.ivol-asset-cell {
    background:#24252a !important;
}
#ivol-table .ivol-overview-table td.ivol-date-cell,
#ivol-table .ivol-overview-table td.ivol-asset-cell {
    z-index:3; background:#0b0c0e !important;
}
#ivol-table .ivol-overview-table .ivol-overview-row:nth-child(even) td.ivol-date-cell,
#ivol-table .ivol-overview-table .ivol-overview-row:nth-child(even) td.ivol-asset-cell {
    background:#111216 !important;
}
#ivol-table .ivol-overview-table .ivol-overview-row:hover td.ivol-date-cell,
#ivol-table .ivol-overview-table .ivol-overview-row:hover td.ivol-asset-cell {
    background:#17131f !important;
}
#ivol-table .ivol-overview-table th.ivol-asset-cell,
#ivol-table .ivol-overview-table td.ivol-asset-cell {
    box-shadow:8px 0 12px -10px rgba(0,0,0,.98);
}

#ivol-table .ivol-date-cell {
    left:0; width:96px; min-width:96px; max-width:96px; text-align:left !important;
    overflow:visible !important; text-overflow:clip !important; font-variant-numeric:tabular-nums;
}
#ivol-table th.ivol-date-cell { position:sticky; z-index:6; }
#ivol-table td.ivol-date-cell { position:sticky; z-index:2; color:#9ca3af; }
#ivol-table .ivol-asset-cell {
    left:96px; width:82px; min-width:82px; text-align:left !important;
    font-weight:700; color:#f4f5f7;
}
#ivol-table th.ivol-asset-cell { position:sticky; z-index:6; }
#ivol-table td.ivol-asset-cell { position:sticky; z-index:2; }
#ivol-table .ivol-value-cell { width:86px; font-variant-numeric:tabular-nums; }
#ivol-table .ivol-value-iv { color:#C8B6FF; font-weight:700; }
#ivol-table .ivol-value-move { color:#e9edf4; }
#ivol-table .ivol-band-cell { width:82px; font-variant-numeric:tabular-nums; }
#ivol-table .ivol-band-low { color:#38BDF8; }
#ivol-table .ivol-band-high { color:#FB7185; }

.ivol-check-method {
    margin:0 0 9px; padding:8px 10px; border:1px solid rgba(255,255,255,.07);
    border-radius:9px; background:rgba(255,255,255,.025); color:#9aa3b1;
    font-size:9px; line-height:1.45;
}
.ivol-check-method strong { color:#e7e9ed; }
.ivol-check-timeline {
    display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);
    align-items:stretch; gap:6px; margin:0 0 8px;
}
.ivol-check-timeline-step {
    display:flex; align-items:flex-start; gap:7px; min-width:0; padding:8px;
    border:1px solid rgba(255,255,255,.075); border-radius:8px; background:rgba(255,255,255,.022);
}
.ivol-check-step-number {
    display:inline-flex; align-items:center; justify-content:center; flex:0 0 18px; width:18px; height:18px;
    border-radius:50%; background:rgba(200,182,255,.14); color:#d9caff; font-size:8px; font-weight:800;
}
.ivol-check-timeline-step strong { display:block; margin-bottom:2px; color:#e2e5ea; font-size:8px; }
.ivol-check-timeline-step div > span { display:block; color:#969eaa; font-size:8px; line-height:1.35; }
.ivol-check-timeline-arrow { align-self:center; color:rgba(200,182,255,.65); font-size:13px; }
.ivol-check-guide {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin:0 0 8px;
}
.ivol-check-guide-item {
    min-width:0; padding:8px 9px; border-left:2px solid rgba(200,182,255,.52);
    border-radius:0 7px 7px 0; background:rgba(200,182,255,.035);
}
.ivol-check-guide-item strong {
    display:block; margin-bottom:2px; color:#d9caff; font-size:8px; letter-spacing:.04em; text-transform:uppercase;
}
.ivol-check-guide-item span { display:block; color:#a8afbb; font-size:8.5px; line-height:1.4; }
.ivol-check-example {
    margin:0 0 8px; padding:8px 10px; border:1px solid rgba(56,189,248,.14); border-radius:8px;
    background:rgba(56,189,248,.035); color:#aeb7c4; font-size:8.5px; line-height:1.45;
}
.ivol-check-example strong { color:#bae6fd; }
.ivol-check-reading-note { margin:0 0 9px; color:#88919f; font-size:8.5px; line-height:1.45; }
.ivol-check-summary { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; margin-bottom:9px; }
.ivol-check-summary-card {
    min-width:0; padding:8px 9px; border:1px solid rgba(255,255,255,.075);
    border-radius:9px; background:linear-gradient(180deg,rgba(255,255,255,.038),rgba(255,255,255,.018));
}
.ivol-check-summary-card span {
    display:block; margin-bottom:3px; color:#8f97a4; font-size:7.5px; font-weight:700;
    letter-spacing:.045em; text-transform:uppercase;
}
.ivol-check-summary-card strong {
    display:block; overflow:hidden; color:#f2f3f5; font-size:10px; font-weight:700;
    line-height:1.25; text-overflow:ellipsis; white-space:nowrap;
}
#ivol-table .ivol-history-table { min-width:1080px; }
#ivol-table .ivol-history-table th:nth-child(1) { width:84px; }
#ivol-table .ivol-history-table th:nth-child(2) { width:62px; }
#ivol-table .ivol-history-table th:nth-child(3),
#ivol-table .ivol-history-table th:nth-child(4),
#ivol-table .ivol-history-table th:nth-child(5) { width:220px; text-align:left; }
#ivol-table .ivol-history-table th:nth-child(6) { width:112px; text-align:center; }
#ivol-table .ivol-history-table .ivol-asset-cell { left:0; }
#ivol-table .ivol-history-table td { text-align:left; white-space:normal; }
.ivol-sessions-cell { color:#aab1bd !important; text-align:center !important; font-variant-numeric:tabular-nums; }
.ivol-check-primary { display:flex; align-items:baseline; justify-content:space-between; gap:7px; color:#e8eaf0; }
.ivol-check-primary strong { color:#f1f3f6; font-size:11px; font-weight:750; }
.ivol-check-metric-label { color:#949daa; font-size:8px; font-weight:650; }
.ivol-check-count { margin-top:1px; color:#7f8998; font-size:8px; }
.ivol-check-secondary { margin-top:4px; color:#b7bdc8; font-size:8px; white-space:normal; }
.ivol-check-secondary > div { display:flex; align-items:baseline; justify-content:space-between; gap:7px; margin-top:2px; }
.ivol-check-secondary strong { flex:0 0 auto; color:#dce1e8; font-size:8.5px; }
.ivol-read-cell { text-align:center !important; }
.ivol-read-pill {
    display:inline-flex; align-items:center; justify-content:center; padding:4px 7px;
    border:1px solid rgba(255,255,255,.09); border-radius:999px;
    font-size:8px; font-weight:750; white-space:nowrap;
}
.ivol-read-mean_reverting { color:#5EEAD4; background:rgba(94,234,212,.08); }
.ivol-read-trend_prone { color:#FB7185; background:rgba(251,113,133,.08); }
.ivol-read-mixed { color:#aab1bd; background:rgba(255,255,255,.035); }
.ivol-empty-state { padding:18px; color:#9aa3b1; font-size:11px; text-align:center; }
.ivol-chart-wrap { border-radius:10px; background:rgba(255,255,255,.012); }
.ivol-history-lookback-wrap { width:88px; min-width:88px; max-width:88px; margin:0 !important; }
.ivol-history-lookback,
.ivol-history-lookback .Select,
.ivol-history-lookback .Select-control {
    width:88px !important; min-width:88px !important; max-width:88px !important; margin:0 !important;
}
.ivol-history-expand-btn { margin-left:0 !important; }

/* Click any Positioning Overview header to sort that visible column. */
#positioning-table .positioning-sort-header {
    display:flex; align-items:center; gap:5px; width:100%; padding:0; border:0;
    background:transparent; color:inherit; font:inherit; font-weight:inherit;
    line-height:1.2; text-align:left; white-space:nowrap; cursor:pointer;
}
#positioning-table .positioning-sort-header::after {
    content:"↕"; color:rgba(201,203,209,.42); font-size:9px; font-weight:800;
}
#positioning-table th:nth-child(2) .positioning-sort-header { justify-content:flex-end; }
#positioning-table th:nth-child(6) .positioning-sort-header { justify-content:center; }
#positioning-table .positioning-sort-header:hover,
#positioning-table .positioning-sort-header:focus-visible { color:#fff; }
#positioning-table .positioning-sort-header:focus-visible { outline:1px solid #DAC3FF; outline-offset:3px; border-radius:2px; }
#positioning-table .positioning-sort-header.positioning-sort-active { color:#DAC3FF; }
#positioning-table .positioning-sort-header.positioning-sort-active.sort-asc::after { content:"▲"; color:#DAC3FF; }
#positioning-table .positioning-sort-header.positioning-sort-active.sort-desc::after { content:"▼"; color:#DAC3FF; }

@media (max-width:980px) {
    .ivol-main-grid {
        display:flex !important; flex-direction:column; gap:14px !important;
        min-height:0 !important; padding-right:0 !important;
    }
    .ivol-page-tile {
        width:100%; height:auto !important; min-height:430px !important;
        grid-column:auto !important; grid-row:auto !important;
    }
    .ivol-overview-tile { min-height:560px !important; }
    .ivol-page-tile.ivol-tile-collapsed { min-height:0 !important; }
    .ivol-tile-header { position:relative; align-items:flex-start !important; padding-right:82px; }
    .ivol-tile-collapse-btn { position:absolute; top:0; right:0; }
    .ivol-header-controls { width:100%; justify-content:flex-start; }
    .ivol-chart-wrap { min-height:350px !important; }
    .ivol-check-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
    #ivol-table .ivol-overview-table { min-width:940px; }
    #ivol-table .ivol-history-table { min-width:920px; }
}
@media (max-width:560px) {
    .ivol-page-tile { padding:11px !important; min-height:410px !important; }
    .ivol-overview-tile { min-height:540px !important; }
    .ivol-page-tile.ivol-tile-collapsed { min-height:0 !important; }
    .ivol-tile-header h3 { font-size:17px !important; line-height:1.25; }
    .ivol-header-controls { align-items:stretch; flex-direction:column; }
    .ivol-header-controls .pill-group { width:100%; }
    .ivol-header-controls .pill-dropdown,
    .ivol-header-controls .Select { width:min(100%,240px) !important; margin-right:0 !important; }
    .ivol-chart-wrap { min-height:330px !important; }
    #ivol-table .ivol-date-cell { width:92px; min-width:92px; max-width:92px; }
    #ivol-table .ivol-asset-cell { left:92px; }
    #ivol-table .ivol-history-table .ivol-asset-cell { left:0; }
    .ivol-check-summary { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
    .ivol-check-summary-card:first-child { grid-column:1/-1; }
    .ivol-check-guide { grid-template-columns:minmax(0,1fr); }
    .ivol-check-timeline { grid-template-columns:minmax(0,1fr); }
    .ivol-check-timeline-arrow { display:none; }
}

/* ========================================================================== 
   CROSS ASSET VOLATILITY — Positioning-style charts, collapse and mobile
   ========================================================================== */
.crossassetvol-main-grid { grid-template-rows:auto auto !important; align-content:start !important; }
.crossassetvol-page-tile {
    height:47vh; min-height:450px; min-width:0; overflow:hidden !important;
    box-sizing:border-box;
}
.crossassetvol-tile-header {
    display:grid !important; grid-template-columns:minmax(0,1fr) auto auto;
    align-items:center; gap:10px; margin-bottom:8px; flex:0 0 auto;
}
.crossassetvol-tile-header { grid-template-columns:minmax(0,1fr) 88px auto !important; }
.crossassetvol-tile-header .center-cell,
.crossassetvol-tile-header .center-cell .pill-dropdown,
.crossassetvol-tile-header .center-cell .Select,
.crossassetvol-tile-header .center-cell .Select-control {
    width:88px !important; min-width:88px !important; max-width:88px !important; margin:0 !important;
}
.crossassetvol-tile-header .right-cell { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.crossassetvol-tile-header h3 { min-width:0; line-height:1.2; }
.crossassetvol-tile-header .center-cell,
.crossassetvol-tile-header .right-cell { min-width:0; }
.crossassetvol-chart-wrap {
    flex:1 1 auto; min-width:0; min-height:0; overflow:hidden;
    border-radius:10px; background:rgba(255,255,255,.012);
}
.crossassetvol-chart-wrap > div { width:100%; height:100%; min-height:0; }
.crossassetvol-tile-collapse-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:30px;
    padding:5px 10px; border:1px solid rgba(218,195,255,.38); border-radius:999px;
    background:rgba(218,195,255,.08); color:#DAC3FF; font-size:10px; font-weight:750;
    line-height:1; white-space:nowrap; cursor:pointer;
}
.crossassetvol-tile-collapse-btn:hover { background:rgba(218,195,255,.16); }
.crossassetvol-tile-collapse-btn:focus-visible { outline:2px solid #DAC3FF; outline-offset:2px; }
.crossassetvol-series-all-btn {
    display:inline-flex; align-items:center; justify-content:center; min-height:20px;
    padding:3px 8px; border:1px solid rgba(218,195,255,.30); border-radius:999px;
    background:rgba(218,195,255,.08); color:#DAC3FF; font-size:8px; font-weight:750;
    line-height:1.2; cursor:pointer;
}
.crossassetvol-series-all-btn:hover { background:rgba(218,195,255,.16); }
.crossassetvol-series-all-btn:focus-visible { outline:1px solid #DAC3FF; outline-offset:2px; }
.crossassetvol-modal-series-toolbar {
    width:auto !important; margin:0 12px 8px !important; flex:0 0 auto;
}
:is([id^="crossassetvol-series-"], [id^="crossassetvol-modal-series-"]) label:has(.crossassetvol-toggle-label--usd) input,
:is([id^="crossassetvol-series-"], [id^="crossassetvol-modal-series-"]) label:has(.crossassetvol-toggle-label--vix) input,
:is([id^="crossassetvol-series-"], [id^="crossassetvol-modal-series-"]) label:has(.crossassetvol-toggle-label--oil) input,
:is([id^="crossassetvol-series-"], [id^="crossassetvol-modal-series-"]) label:has(.crossassetvol-toggle-label--move) input { accent-color:#C8B6FF; }
:is([id^="crossassetvol-series-"], [id^="crossassetvol-modal-series-"]) label:has(.crossassetvol-toggle-label--eur) input,
:is([id^="crossassetvol-series-"], [id^="crossassetvol-modal-series-"]) label:has(.crossassetvol-toggle-label--vdax) input,
:is([id^="crossassetvol-series-"], [id^="crossassetvol-modal-series-"]) label:has(.crossassetvol-toggle-label--gold) input { accent-color:#38BDF8; }
:is([id^="crossassetvol-series-"], [id^="crossassetvol-modal-series-"]) label:has(.crossassetvol-toggle-label--gbp) input,
:is([id^="crossassetvol-series-"], [id^="crossassetvol-modal-series-"]) label:has(.crossassetvol-toggle-label--vxn) input,
:is([id^="crossassetvol-series-"], [id^="crossassetvol-modal-series-"]) label:has(.crossassetvol-toggle-label--silver) input { accent-color:#FB7185; }
:is([id^="crossassetvol-series-"], [id^="crossassetvol-modal-series-"]) label:has(.crossassetvol-toggle-label--jpy) input { accent-color:#5EEAD4; }
:is([id^="crossassetvol-series-"], [id^="crossassetvol-modal-series-"]) label:has(.crossassetvol-toggle-label--chf) input { accent-color:#F59E0B; }
:is([id^="crossassetvol-series-"], [id^="crossassetvol-modal-series-"]) label:has(.crossassetvol-toggle-label--aud) input { accent-color:#A78BFA; }
:is([id^="crossassetvol-series-"], [id^="crossassetvol-modal-series-"]) label:has(.crossassetvol-toggle-label--nzd) input { accent-color:#60A5FA; }
:is([id^="crossassetvol-series-"], [id^="crossassetvol-modal-series-"]) label:has(.crossassetvol-toggle-label--cad) input { accent-color:#F472B6; }
.crossassetvol-page-tile.crossassetvol-tile-collapsed {
    height:auto !important; min-height:0 !important; align-self:start !important;
    padding-top:12px !important; padding-bottom:12px !important;
}
.crossassetvol-tile-collapsed .crossassetvol-tile-header { margin-bottom:0; }
.crossassetvol-tile-collapsed .crossassetvol-collapsible-body { display:none !important; }

@media (max-width:980px) {
    .crossassetvol-page-content { height:auto !important; padding:16px !important; }
    .crossassetvol-main-grid {
        display:flex !important; flex-direction:column; gap:14px !important;
        min-height:0 !important; width:100%;
    }
    .crossassetvol-page-tile { width:100%; height:auto !important; min-height:440px; }
    .crossassetvol-page-tile.crossassetvol-tile-collapsed { min-height:0 !important; }
    .crossassetvol-chart-wrap { min-height:350px; }
}

@media (max-width:640px) {
    .crossassetvol-page-content { padding:10px !important; }
    .crossassetvol-page-tile { min-height:410px; padding:11px !important; }
    .crossassetvol-page-tile.crossassetvol-tile-collapsed { min-height:0 !important; }
    .crossassetvol-tile-header {
        display:flex !important; align-items:center; flex-wrap:wrap; gap:8px;
    }
    .crossassetvol-tile-header h3 { flex:1 1 190px; font-size:17px !important; }
    .crossassetvol-tile-header .center-cell {
        order:3; flex:1 0 100%; display:flex; justify-content:flex-start;
    }
    .crossassetvol-tile-header .right-cell { margin-left:auto; }
    .crossassetvol-chart-wrap { min-height:320px; }
}

/* ========================================================================== 
   COUNTRY — Positioning-style tiles, collapse controls and responsive grid
   ========================================================================== */
.country-page-content { min-width:0; }
.country-main-grid { min-width:0; }
.country-page-tile { min-width:0; overflow:hidden !important; box-sizing:border-box; }
.country-tile-header {
    grid-template-columns:minmax(0,1fr) 92px auto auto !important;
    gap:8px !important; flex:0 0 auto;
}
.country-tile-title { min-width:0; }
.country-tile-title h3 { color:#f4f5f7 !important; font-weight:700 !important; line-height:1.2; }
.country-tile-lookback,
.country-tile-lookback .pill-dropdown,
.country-tile-lookback .Select,
.country-tile-lookback .Select-control {
    width:92px !important; min-width:92px !important; max-width:92px !important; margin:0 !important;
}
.country-chart { flex:1 1 auto; min-width:0; min-height:0; }
.country-tile-collapse-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:30px;
    padding:5px 10px; border:1px solid rgba(218,195,255,.38); border-radius:999px;
    background:rgba(218,195,255,.08); color:#DAC3FF; font-size:10px; font-weight:750;
    line-height:1; white-space:nowrap; cursor:pointer;
}
.country-tile-collapse-btn:hover { background:rgba(218,195,255,.16); }
.country-tile-collapse-btn:focus-visible { outline:2px solid #DAC3FF; outline-offset:2px; }
.country-page-tile.country-tile-collapsed {
    height:auto !important; min-height:0 !important; align-self:start !important;
    padding-top:8px !important; padding-bottom:8px !important;
}
.country-tile-collapsed .country-tile-header { padding-top:4px !important; padding-bottom:4px !important; }
.country-tile-collapsed .country-collapsible-body { display:none !important; }

@media (max-width:1280px) {
    .country-main-grid {
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        grid-template-rows:none !important; grid-auto-rows:minmax(370px,42vh);
    }
}

@media (max-width:760px) {
    .country-page-content { padding:10px !important; height:auto !important; min-height:100vh; }
    .country-main-grid {
        grid-template-columns:minmax(0,1fr) !important;
        grid-template-rows:none !important; grid-auto-rows:auto !important; gap:12px !important;
    }
    .country-page-tile { width:100%; height:auto !important; min-height:410px !important; }
    .country-page-tile.country-tile-collapsed { min-height:0 !important; }
    .country-tile-header {
        grid-template-columns:minmax(0,1fr) 78px auto !important;
        position:relative; padding-right:88px !important;
    }
    .country-tile-collapse-btn { position:absolute; top:8px; right:8px; }
    .country-tile-lookback,
    .country-tile-lookback .pill-dropdown,
    .country-tile-lookback .Select,
    .country-tile-lookback .Select-control {
        width:78px !important; min-width:78px !important; max-width:78px !important;
    }
    .country-page-content .modal-shell { width:96vw !important; height:92vh !important; }
    .country-page-content .modal-header { display:flex !important; flex-direction:column; align-items:stretch !important; gap:8px !important; }
}

/* Shared Positioning-style series controls for volatility and policy charts. */
.ivol-series-toolbar,
.crossassetvol-series-toolbar,
.cb-policy-rate-controls {
    flex:0 0 auto; width:100%; max-width:100%; margin:0 0 8px;
    box-sizing:border-box; flex-wrap:wrap; gap:6px;
}
.crossassetvol-series-toolbar .positioning-series-toggle,
.ivol-series-toolbar .positioning-series-toggle,
.cb-policy-rate-controls .positioning-series-toggle { min-width:0; flex:0 1 auto; }
.cb-policy-rate-history-label { margin-left:auto; }
.cb-policy-rate-lookback,
.cb-policy-rate-lookback .Select,
.cb-policy-rate-lookback .Select-control {
    width:68px !important; min-width:68px !important; max-width:68px !important; margin:0 !important;
}
.cb-policy-rate-modal-controls { margin:0 0 8px !important; }

@media (max-width:640px) {
    .ivol-series-toolbar,
    .crossassetvol-series-toolbar,
    .cb-policy-rate-controls { align-items:flex-start; gap:7px; padding:7px !important; }
    .ivol-series-toolbar .positioning-series-toggle,
    .crossassetvol-series-toolbar .positioning-series-toggle,
    .cb-policy-rate-controls .positioning-series-toggle { flex:1 1 calc(100% - 48px); }
    .cb-policy-rate-history-label { margin-left:0; }
    .cb-policy-rate-lookback,
    .cb-policy-rate-lookback .Select,
    .cb-policy-rate-lookback .Select-control { width:68px !important; min-width:68px !important; max-width:68px !important; }
    #ivol-tile-3 .ivol-tile-header {
        display:grid !important; grid-template-columns:minmax(0,1fr) 78px auto !important;
        gap:7px !important;
    }
    .ivol-history-lookback-wrap,
    .ivol-history-lookback,
    .ivol-history-lookback .Select,
    .ivol-history-lookback .Select-control {
        width:78px !important; min-width:78px !important; max-width:78px !important;
    }
}

/* Deployment-safe tile controls: mirror the working IV pills and reserve header space. */
.crossassetvol-tile-collapse-btn,
.country-tile-collapse-btn {
    appearance:none !important; -webkit-appearance:none !important;
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    gap:6px !important; min-width:82px !important; min-height:30px !important;
    padding:5px 10px !important; border:1px solid rgba(218,195,255,.38) !important;
    border-radius:999px !important; background:rgba(218,195,255,.08) !important;
    color:#DAC3FF !important; box-shadow:none !important; font-size:10px !important;
    font-weight:750 !important; line-height:1 !important; white-space:nowrap !important; cursor:pointer !important;
}
.crossassetvol-tile-collapse-btn:hover,
.country-tile-collapse-btn:hover { background:rgba(218,195,255,.16) !important; }
.crossassetvol-tile-header { grid-template-columns:minmax(0,1fr) 78px max-content !important; gap:6px !important; }
.country-tile-header { grid-template-columns:minmax(0,1fr) 78px max-content max-content !important; gap:6px !important; }
.crossassetvol-tile-header .center-cell,
.crossassetvol-tile-header .center-cell .pill-dropdown,
.crossassetvol-tile-header .center-cell .Select,
.crossassetvol-tile-header .center-cell .Select-control,
.country-tile-lookback,
.country-tile-lookback .pill-dropdown,
.country-tile-lookback .Select,
.country-tile-lookback .Select-control {
    width:78px !important; min-width:78px !important; max-width:78px !important; margin:0 !important;
}
@media (max-width:760px) {
    .country-tile-header {
        position:relative !important; grid-template-columns:minmax(0,1fr) 78px !important;
        padding-right:96px !important;
    }
    .country-tile-title { grid-column:1/-1; grid-row:1; }
    .country-tile-lookback { grid-column:1; grid-row:2; justify-self:start !important; }
    .country-tile-expand { grid-column:2; grid-row:2; justify-self:end !important; }
    .country-tile-collapse-btn { position:absolute !important; top:8px; right:8px; }
}
@media (max-width:640px) {
    .crossassetvol-tile-header {
        display:grid !important; grid-template-columns:minmax(0,1fr) max-content !important;
        align-items:start !important;
    }
    .crossassetvol-tile-header h3 { grid-column:1; grid-row:1; }
    .crossassetvol-tile-header .center-cell { grid-column:1; grid-row:2; justify-self:start !important; }
    .crossassetvol-tile-header .right-cell {
        grid-column:2; grid-row:1/span 2; align-self:start !important;
    }
}

/* ========================================================================== 
   IV OVERVIEW ALIGNMENT + FLAT NEWS THREADS
   ========================================================================== */
#ivol-table .ivol-overview-table:not(.ivol-history-table) th {
    background:#24252a !important; color:#c9cbd1 !important;
}
#ivol-table .ivol-overview-table:not(.ivol-history-table) td {
    background:#0b0c0e !important; color:#e7e9ed !important;
}
#ivol-table .ivol-overview-table:not(.ivol-history-table) .ivol-overview-row:nth-child(even) td {
    background:#111216 !important;
}
#ivol-table .ivol-overview-table:not(.ivol-history-table) .ivol-overview-row:hover td {
    background:#17191e !important;
}
#ivol-table .ivol-overview-table:not(.ivol-history-table) th:not(.ivol-date-cell):not(.ivol-asset-cell),
#ivol-table .ivol-overview-table:not(.ivol-history-table) td:not(.ivol-date-cell):not(.ivol-asset-cell) {
    text-align:center !important;
}
#ivol-table .ivol-overview-table:not(.ivol-history-table) td.ivol-date-cell,
#ivol-table .ivol-overview-table:not(.ivol-history-table) td.ivol-asset-cell,
#ivol-table .ivol-overview-table:not(.ivol-history-table) td.ivol-value-iv,
#ivol-table .ivol-overview-table:not(.ivol-history-table) td.ivol-value-move,
#ivol-table .ivol-overview-table:not(.ivol-history-table) td.ivol-band-low,
#ivol-table .ivol-overview-table:not(.ivol-history-table) td.ivol-band-high {
    color:#e7e9ed !important;
}

#news-feed-list { gap:0 !important; }
#news-feed-wrapper .home-news-tags { display:none !important; }
#news-feed-wrapper .news-item {
    position:relative; margin:0 !important; padding:8px 8px !important;
    border:0 !important; border-bottom:1px solid rgba(148,163,184,.11) !important;
    border-radius:0 !important; background:transparent; box-shadow:none !important;
    transition:background-color 80ms linear !important;
}
#news-feed-wrapper .news-item:hover { background:rgba(148,163,184,.045) !important; }
#news-feed-wrapper .home-news-tag,
#news-feed-wrapper .home-news-tag--primary,
#news-feed-wrapper .home-news-tag--secondary,
#news-feed-wrapper .home-news-importance-tag--3 {
    padding:2px 6px !important; border:1px solid rgba(148,163,184,.20) !important;
    border-radius:3px !important; background:rgba(100,116,139,.12) !important;
    color:#aeb8c7 !important; box-shadow:none !important;
}
#news-feed-wrapper .news-cluster-badge,
#news-feed-wrapper .news-analysis-badge {
    min-height:22px; padding:3px 7px !important;
    border:1px solid rgba(100,116,139,.30) !important; border-radius:3px !important;
    background:#111827 !important; color:#b9c4d2 !important; box-shadow:none !important;
    transition:background-color 80ms linear !important;
}
#news-feed-wrapper .news-cluster-badge:hover,
#news-feed-wrapper .news-analysis-badge:hover { background:#182235 !important; box-shadow:none !important; }
#news-feed-wrapper .news-cluster-badge::after {
    content:"⌄"; margin-left:4px; color:#7f8da1; transform:rotate(0deg); transition:transform 100ms linear;
}
#news-feed-wrapper .news-cluster.expanded .news-cluster-badge::after { transform:rotate(180deg); }
#news-feed-wrapper .home-news-primary-row {
    display:flex; align-items:flex-start; gap:8px; width:100%; min-width:0;
}
#news-feed-wrapper .home-news-primary-row .news-headline {
    flex:1 1 auto; min-width:0;
}
#news-feed-wrapper .home-news-primary-row .home-news-actions {
    flex:0 0 auto; align-self:flex-start; margin:0; white-space:nowrap;
}
#news-feed-wrapper .news-cluster-members {
    --news-thread-indent:16px;
    margin:4px 0 0 70px !important; padding:0 !important;
    border-left:0 !important;
}
#news-feed-wrapper .news-cluster-members .news-item {
    margin-left:var(--news-thread-indent) !important;
    opacity:.88 !important; padding:6px 8px !important; border-bottom:0 !important;
    border-radius:0 !important; background:transparent !important;
}
#news-feed-wrapper .news-cluster-members .news-item::before {
    content:""; position:absolute;
    left:calc(-1 * var(--news-thread-indent)); top:11px;
    width:var(--news-thread-indent);
    border-top:1px solid rgba(100,116,139,.28);
}
#news-feed-wrapper .news-cluster-members .news-item::after {
    content:""; position:absolute; pointer-events:none;
    left:calc(-1 * var(--news-thread-indent)); top:0; bottom:0;
    border-left:1px solid rgba(100,116,139,.28);
}
#news-feed-wrapper .news-cluster-members .news-item:last-child::after {
    bottom:auto; height:11px;
}
#news-feed-wrapper .news-item.news-importance-level-3,
#news-feed-wrapper .news-item.news-importance-level-3:hover {
    background:rgba(127,29,29,.16) !important;
        border-left:2px solid rgba(251,113,133,.78) !important;
        box-shadow:none !important;
}
#news-feed-wrapper .news-cluster-members .news-item.news-importance-level-3,
#news-feed-wrapper .news-cluster-members .news-item.news-importance-level-3:hover {
    margin-left:0 !important;
    padding-left:calc(var(--news-thread-indent) + 6px) !important;
    opacity:1 !important;
}
#news-feed-wrapper .news-cluster-members .news-item.news-importance-level-3::before {
    left:0; width:var(--news-thread-indent);
}
#news-feed-wrapper .news-cluster-members .news-item.news-importance-level-3::after {
    left:0;
}
#news-feed-wrapper .news-item.news-importance-level-2,
#news-feed-wrapper .news-item.news-importance-level-2:hover {
    background:transparent !important; box-shadow:none !important;
}

.news-home-controls { flex-wrap:wrap !important; }
.news-timezone-control {
    display:flex; align-items:center; gap:5px; flex:0 0 auto; min-width:0;
}
.news-timezone-label {
    color:#8f98a7; font-size:9px; font-weight:700; letter-spacing:.08em;
}
.news-timezone-dropdown {
    width:140px; min-width:140px; font-size:11px;
}
.news-timezone-dropdown .Select-control {
    min-height:28px !important; height:28px !important;
}
.news-timezone-dropdown .Select-value,
.news-timezone-dropdown .Select-placeholder {
    line-height:26px !important;
}
.news-timezone-dropdown .Select-menu-outer { z-index:40; }

@media (max-width:640px) {
    #news-feed-wrapper .news-cluster-members {
        --news-thread-indent:12px;
        margin-left:48px !important; padding-left:0 !important;
    }
    .news-page-controls,
    .news-home-controls {
        display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
        align-items:center !important; gap:6px !important; width:100% !important;
        justify-content:stretch !important;
    }
    .news-page-controls .news-tag-filter-dropdown,
    .news-page-controls .news-page-search,
    .news-home-controls .news-tag-filter-dropdown,
    .news-home-controls .pill-search-input {
        width:100% !important; min-width:0 !important; max-width:none !important;
        flex:1 1 auto !important;
    }
    .news-page-controls .news-timezone-control,
    .news-home-controls .news-timezone-control {
        grid-column:1 / -1; width:100%;
    }
    .news-timezone-dropdown { width:100%; min-width:0; flex:1 1 auto; }
    #news-feed-wrapper .home-news-primary-row { gap:5px; }
    #news-feed-wrapper .home-news-primary-row .home-news-actions { gap:4px; }
    #news-feed-wrapper .home-news-primary-row .news-cluster-badge,
    #news-feed-wrapper .home-news-primary-row .news-analysis-badge {
        padding:2px 5px !important;
    }
}

/* Final responsive control authority. Keep after legacy page rules. */
#news-feed-wrapper .news-cluster-badge::after,
#news-feed-wrapper .news-cluster.expanded .news-cluster-badge::after {
    content:none !important; display:none !important;
}
#news-feed-wrapper .news-cluster-badge,
#news-feed-wrapper .news-analysis-badge {
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
    width:60px !important; min-width:60px !important; max-width:60px !important;
    height:20px !important; min-height:20px !important; box-sizing:border-box !important;
    padding:2px 4px !important; font-size:8px !important; line-height:1 !important; text-align:center !important;
}
#news-feed-wrapper .news-cluster-badge {
    border-color:rgba(167,139,250,.45) !important;
    background:rgba(139,92,246,.16) !important; color:#ddd6fe !important;
}
#news-feed-wrapper .news-analysis-badge {
    border-color:rgba(56,189,248,.42) !important;
    background:rgba(14,165,233,.14) !important; color:#bae6fd !important;
}
#news-feed-wrapper .news-cluster-badge:hover { background:rgba(139,92,246,.25) !important; }
#news-feed-wrapper .news-analysis-badge:hover { background:rgba(14,165,233,.23) !important; }
.positioning-page-content { min-width:0; box-sizing:border-box; }
@media (max-width:720px) {
    .news-page-controls,
    .news-home-controls {
        display:grid !important; grid-template-columns:minmax(0,1fr) !important;
        align-items:stretch !important; gap:7px !important; width:100% !important;
    }
    .news-page-controls .news-tag-filter-dropdown,
    .news-page-controls .news-page-search,
    .news-home-controls .news-tag-filter-dropdown,
    .news-home-controls .pill-search-input,
    .news-page-controls .news-timezone-control,
    .news-home-controls .news-timezone-control {
        grid-column:1 !important; width:100% !important; min-width:0 !important;
        max-width:none !important; margin:0 !important; box-sizing:border-box !important;
    }
    .news-page-controls .news-tag-filter-dropdown .Select,
    .news-page-controls .news-tag-filter-dropdown .Select-control,
    .news-home-controls .news-tag-filter-dropdown .Select,
    .news-home-controls .news-tag-filter-dropdown .Select-control,
    .news-timezone-dropdown,
    .news-timezone-dropdown .Select,
    .news-timezone-dropdown .Select-control {
        width:100% !important; min-width:0 !important; max-width:none !important;
        box-sizing:border-box !important;
    }
    .news-page-controls .news-timezone-control,
    .news-home-controls .news-timezone-control {
        display:grid !important; grid-template-columns:20px minmax(0,1fr); gap:5px;
    }
    .positioning-page-content { padding:10px 4px 10px 10px !important; overflow-x:hidden !important; }
    .positioning-main-grid {
        width:100% !important; min-width:0 !important; padding-right:0 !important; column-gap:0 !important;
    }
    #positioning-tile-1 { width:100% !important; min-width:0 !important; max-width:none !important; }
    #positioning-tile-1 .positioning-tile-header {
        display:grid !important; grid-template-columns:minmax(0,1fr) max-content !important;
        align-items:start !important; gap:8px !important; padding-right:0 !important;
    }
    #positioning-tile-1 .positioning-tile-header > .tile-title-with-help {
        grid-column:1; grid-row:1; width:100%; min-width:0; max-width:100%;
    }
    #positioning-tile-1 .positioning-tile-header > .positioning-tile-collapse-btn {
        position:static !important; grid-column:2; grid-row:1; justify-self:end;
    }
    #positioning-tile-1 .positioning-header-controls {
        grid-column:1 / -1; grid-row:2; display:flex !important; width:100%; min-width:0;
        align-items:center !important; justify-content:flex-start !important; flex-wrap:wrap !important; gap:6px !important;
    }
    #positioning-tile-1 .positioning-header-controls .btn-group {
        display:flex !important; flex-wrap:wrap !important; gap:4px !important; width:100%; min-width:0;
    }
    #positioning-tile-1 .positioning-header-controls .btn-group > * {
        margin:0 !important; border-radius:999px !important;
    }
    .ivol-tile-header {
        display:grid !important; grid-template-columns:minmax(0,1fr) max-content !important;
        align-items:start !important; gap:8px !important; padding-right:0 !important;
    }
    .ivol-tile-header > .tile-title-with-help {
        grid-column:1; grid-row:1; display:flex !important; width:100%; min-width:0; max-width:100%;
        align-items:center; gap:6px; overflow:visible;
    }
    .ivol-tile-header > .tile-title-with-help h3 { flex:0 1 auto; min-width:0; overflow-wrap:anywhere; }
    .ivol-tile-header > .tile-title-with-help .tile-help-control { flex:0 0 auto; }
    .ivol-tile-header > .ivol-tile-collapse-btn {
        position:static !important; grid-column:2; grid-row:1; justify-self:end;
    }
    .ivol-tile-header > .ivol-header-controls {
        grid-column:1 / -1; grid-row:2; width:100%; min-width:0;
        align-items:flex-start !important; justify-content:flex-start !important;
    }
    .ivol-header-controls .pill-group { display:flex !important; flex-wrap:wrap !important; gap:6px !important; }
    .ivol-header-controls .pill-group label { margin:0 !important; }
    #ivol-tile-2 .ivol-header-controls {
        display:grid !important; grid-template-columns:minmax(0,1fr) !important;
        justify-items:start !important; gap:8px !important;
    }
    #ivol-tile-2 .ivol-header-controls .pill-dropdown,
    #ivol-tile-2 .ivol-header-controls .Select,
    #ivol-tile-2 .ivol-header-controls .Select-control { margin-left:0 !important; margin-right:0 !important; }
    #ivol-tile-2 .ivol-tile-header > .ivol-collapsible-body:not(.ivol-header-controls) {
        grid-column:1 / -1; grid-row:3; justify-self:start !important;
    }
    #ivol-tile2-expand-btn { margin-left:0 !important; }
    #ivol-tile-3 .ivol-tile-header { grid-template-columns:minmax(0,1fr) max-content !important; }
    #ivol-tile-3 .ivol-history-lookback-wrap { grid-column:1; grid-row:2; justify-self:start !important; }
    #ivol-tile-3 .ivol-tile-header > .ivol-collapsible-body:not(.ivol-history-lookback-wrap) {
        grid-column:2; grid-row:2; justify-self:end !important;
    }
    #ivol-tile3-expand-btn { margin-left:0 !important; }
}
/* Dashboard 1 FX Intelligence accent */
:root { --fxi-accent: #FFD700; }

/* ==========================================================================
   Currency page — FX Intelligence visual panel
   ========================================================================== */
.currency-series-toolbar {
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: -1px 0 7px;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 9px;
  background: linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.018));
  box-sizing: border-box;
}
.currency-series-toolbar .positioning-series-label {
  flex: 0 0 auto;
  color: #9097a4;
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
}
.currency-series-toggle {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}
.currency-series-toggle label {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  margin: 0 !important;
  padding: 3px 7px;
  color: #aeb4c0;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
  font-size: 8px;
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
}
.currency-series-toggle input {
  width: 10px;
  height: 10px;
  margin: 0;
  accent-color: #B095E2;
}
:is(#currency-diff-series-select, #currency-diff-modal-series-select) label:has(.currency-diff-toggle-label--spot) input { accent-color: #F8FAFC; }
:is(#currency-diff-series-select, #currency-diff-modal-series-select) label:has(.currency-diff-toggle-label--yield-2y) input { accent-color: #38BDF8; }
:is(#currency-diff-series-select, #currency-diff-modal-series-select) label:has(.currency-diff-toggle-label--yield-10y) input { accent-color: #60A5FA; }
:is(#currency-diff-series-select, #currency-diff-modal-series-select) label:has(.currency-diff-toggle-label--risk-reversal) input { accent-color: #C8B6FF; }
:is(#currency-diff-series-select, #currency-diff-modal-series-select) label:has(.currency-diff-toggle-label--inflation) input { accent-color: #FB7185; }
:is(#currency-diff-series-select, #currency-diff-modal-series-select) label:has(.currency-diff-toggle-label--real-yield) input { accent-color: #5EEAD4; }
:is(#currency-diff-series-select, #currency-diff-modal-series-select) label:has(.currency-diff-toggle-label--cesi) input { accent-color: #F472B6; }
:is(#currency-diff-series-select, #currency-diff-modal-series-select) label:has(.currency-diff-toggle-label--ctot) input { accent-color: #F59E0B; }
:is(#currency-diff-series-select, #currency-diff-modal-series-select) label:has(.currency-diff-toggle-label--gold-etf) input { accent-color: #A78BFA; }
.currency-series-toolbar.positioning-modal-series-toolbar {
  width: auto;
  margin: 0 12px 8px;
}
.fxi-tile {
  --fxi-bull: #4ade80;
  --fxi-bear: #fb5d73;
  --fxi-neutral: #a6afbd;
  --fxi-glass: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
}
.fxi-tile h3 { color: var(--fxi-accent) !important; }
.fxi-tile-body {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  height: auto;
  width: 100%;
  overflow: hidden;
}
.fxi-panel {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #eef1f6;
  font-size: 11px;
  letter-spacing: .01em;
}
.fxi-snapshot-meta,
.fxi-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #778293;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.fxi-headline-grid {
  display: grid;
  grid-template-columns: minmax(118px,.82fr) minmax(210px,1.55fr) auto;
  gap: 7px;
  min-width: 0;
}
.fxi-call-card,
.fxi-composite-card,
.fxi-evidence-card,
.fxi-structure,
.fxi-detail-card {
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 9px;
  background: var(--fxi-glass);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.fxi-call-card,
.fxi-composite-card {
  min-width: 0;
  padding: 8px 9px;
}
.fxi-eyebrow {
  color: #8590a3;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: 6px;
}
.fxi-call-pill,
.fxi-bias-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.fxi-call-pill {
  max-width: 100%;
  padding: 5px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
}
.fxi-call-pill--bullish,
.fxi-bias-pill--bullish {
  color: #74ee9b;
  border: 1px solid rgba(74,222,128,.48);
  background: rgba(34,197,94,.11);
}
.fxi-call-pill--bearish,
.fxi-bias-pill--bearish {
  color: #ff8292;
  border: 1px solid rgba(251,93,115,.48);
  background: rgba(239,68,68,.11);
}
.fxi-call-pill--neutral,
.fxi-bias-pill--neutral {
  color: #d5d9e0;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.07);
}
.fxi-call-regime {
  margin-top: 6px;
  color: #a5adba;
  font-size: 9px;
}
.fxi-composite-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #8994a6;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .06em;
}
.fxi-composite-label strong {
  font-size: 14px;
  letter-spacing: 0;
}
.fxi-pressure-track {
  position: relative;
  height: 8px;
  margin: 2px 0;
  overflow: visible;
  border-radius: 999px;
  background: rgba(255,255,255,.065);
}
.fxi-pressure-track--labelled { margin: 15px 0 12px; }
.fxi-pressure-negative-zone,
.fxi-pressure-positive-zone {
  position: absolute;
  inset-block: 0;
  width: 50%;
  border-radius: inherit;
  opacity: .24;
}
.fxi-pressure-negative-zone {
  left: 0;
  background: linear-gradient(90deg, rgba(251,93,115,.48), transparent);
}
.fxi-pressure-positive-zone {
  right: 0;
  background: linear-gradient(90deg, transparent, rgba(74,222,128,.48));
}
.fxi-pressure-centre {
  position: absolute;
  left: 50%;
  top: -3px;
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,.4);
}
.fxi-pressure-fill {
  position: absolute;
  top: 1px;
  height: 6px;
  min-width: 1px;
  border-radius: 999px;
}
.fxi-pressure-fill--bullish {
  background: linear-gradient(90deg, #16a36a, var(--fxi-bull));
  box-shadow: 0 0 9px rgba(74,222,128,.28);
}
.fxi-pressure-fill--bearish {
  background: linear-gradient(90deg, var(--fxi-bear), #cf3658);
  box-shadow: 0 0 9px rgba(251,93,115,.24);
}
.fxi-pressure-fill--neutral { background: var(--fxi-neutral); }
.fxi-pressure-marker {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border: 1px solid #f7f8fb;
  border-radius: 50%;
  background: var(--fxi-accent);
  box-shadow: 0 0 7px color-mix(in srgb, var(--fxi-accent) 65%, transparent);
  transform: translate(-50%,-50%);
}
.fxi-axis-label {
  position: absolute;
  top: 13px;
  color: #6f7989;
  font-size: 7px;
  font-weight: 600;
  line-height: 1;
}
.fxi-axis-label--left { left: 0; }
.fxi-axis-label--centre { left: 50%; transform: translateX(-50%); }
.fxi-axis-label--right { right: 0; }
.fxi-evidence-card {
  min-width: 86px;
  padding: 7px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.fxi-evidence-ring {
  position: relative;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.fxi-evidence-ring::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #11141a;
}
.fxi-evidence-ring span {
  position: relative;
  z-index: 1;
  font-size: 9px;
  font-weight: 700;
}
.fxi-evidence-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fxi-evidence-copy strong { font-size: 9px; }
.fxi-evidence-copy span { color: #7e8999; font-size: 8px; }
.fxi-driver-section {
  min-height: 0;
  padding-top: 2px;
}
.fxi-driver-list {
  margin-top: 3px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.fxi-driver-row {
  display: grid;
  grid-template-columns: 72px minmax(95px,1fr) 42px 74px;
  align-items: center;
  column-gap: 7px;
  row-gap: 0;
  min-height: 23px;
  padding: 2px 0;
  border-bottom: 1px solid rgba(255,255,255,.055);
}
.fxi-driver-name {
  overflow: hidden;
  color: #dce1e9;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fxi-driver-score {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.fxi-tone--bullish { color: var(--fxi-bull) !important; }
.fxi-tone--bearish { color: var(--fxi-bear) !important; }
.fxi-tone--neutral { color: #c8ced8 !important; }
.fxi-bias-pill {
  min-width: 0;
  padding: 3px 5px;
  font-size: 7px;
}
.fxi-driver-detail {
  grid-column: 2 / 5;
  margin-top: -1px;
  color: #788393;
  font-size: 7px;
  line-height: 1.1;
}
.fxi-driver-detail:empty { display: none; }
.fxi-structure {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  overflow: hidden;
}
.fxi-structure-cell {
  min-width: 0;
  padding: 5px 8px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1px 5px;
  border-right: 1px solid rgba(255,255,255,.07);
}
.fxi-structure-cell > span {
  grid-column: 1 / 3;
  color: #778293;
  font-size: 7px;
  letter-spacing: .07em;
}
.fxi-structure-cell strong {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fxi-structure-cell small {
  color: #9aa4b3;
  font-size: 8px;
  font-variant-numeric: tabular-nums;
}
.fxi-posture {
  grid-column: 1 / -1;
  padding: 5px 8px;
  color: #c8ced8;
  border-top: 1px solid rgba(255,255,255,.07);
  background: color-mix(in srgb, var(--fxi-accent) 6%, transparent);
  font-size: 8px;
  line-height: 1.3;
}
.fxi-empty-state {
  min-height: 160px;
  display: grid;
  place-content: center;
  gap: 6px;
  padding: 20px;
  color: #8791a0;
  text-align: center;
}
.fxi-empty-title { color: #e5e8ee; font-size: 13px; font-weight: 700; }

/* Detailed modal */
.fxi-modal-body,
.fxi-panel--detailed { min-height: 100%; height: auto; }
#currency-netpct-modal .fxi-modal-shell {
  width: min(1500px,92vw);
  height: 86vh;
}
#currency-netpct-modal .fxi-modal-header {
  flex: 0 0 auto;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px !important;
}
#currency-netpct-modal .fxi-modal-actions {
  flex: 0 0 auto;
  margin-left: auto;
}
#currency-netpct-modal .fxi-modal-scroll-body {
  padding: 14px 16px 18px !important;
  scrollbar-gutter: stable;
}
#currency-netpct-modal .fxi-modal-body {
  width: 100%;
  box-sizing: border-box;
}
#currency-netpct-modal .fxi-panel--detailed {
  box-sizing: border-box;
  padding: 2px 4px 6px;
}
#currency-netpct-modal .fxi-panel--detailed .fxi-snapshot-meta,
#currency-netpct-modal .fxi-panel--detailed .fxi-section-heading,
#currency-netpct-modal .fxi-panel--detailed .fxi-modal-section-title {
  padding-inline: 3px;
}
#currency-netpct-modal .fxi-panel--detailed .fxi-driver-section {
  padding-inline: 3px;
}
.fxi-panel--detailed {
  gap: 12px;
  font-size: 12px;
}
.fxi-panel--detailed .fxi-headline-grid {
  grid-template-columns: minmax(180px,.8fr) minmax(300px,1.6fr) minmax(120px,.45fr);
}
.fxi-panel--detailed .fxi-driver-row {
  grid-template-columns: 100px minmax(180px,1fr) 52px 92px;
  min-height: 29px;
}
.fxi-panel--detailed .fxi-bias-pill { font-size: 9px; }
.fxi-panel--detailed .fxi-structure-cell { padding: 9px 11px; }
.fxi-modal-section-title {
  margin-top: 4px;
  color: var(--fxi-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
}
.fxi-detail-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
}
.fxi-detail-card { min-width: 0; padding: 10px; }
.fxi-detail-card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
}
.fxi-detail-card-title h4 {
  margin: 0;
  color: #eef1f6;
  font-size: 13px;
}
.fxi-detail-card-title span {
  color: var(--fxi-accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fxi-detail-header,
.fxi-detail-row {
  display: grid;
  grid-template-columns: minmax(125px,1.4fr) minmax(95px,1fr) 43px 48px 48px 52px;
  align-items: center;
  gap: 7px;
}
.fxi-detail-header {
  padding: 0 3px 5px;
  color: #687384;
  font-size: 7px;
  letter-spacing: .06em;
}
.fxi-detail-header span:not(:first-child) { text-align: right; }
.fxi-detail-row {
  min-height: 29px;
  padding: 3px;
  border-top: 1px solid rgba(255,255,255,.055);
  color: #9da6b4;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
}
.fxi-detail-row > :not(:first-child):not(.fxi-pressure-track) { text-align: right; }
.fxi-detail-name {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #d8dde6;
}
.fxi-detail-name > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fxi-driver-help {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  color: #aeb7c5;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  font: inherit;
  font-size: 8px;
  line-height: 1;
  cursor: pointer;
}
.fxi-driver-help:hover { background: rgba(255,255,255,.05); }
.fxi-driver-help:focus-visible {
  outline: 2px solid var(--fxi-accent);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .currency-page-header {
    align-items: stretch !important;
    flex-wrap: wrap;
    gap: 8px;
  }
  .currency-page-header > div:last-child {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }
  .currency-grid {
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
    align-items: start !important;
  }
  .currency-grid > .home-tile { min-width: 0; }
  #currency-tile-1,
  #currency-tile-2,
  #currency-tile-4 {
    height: auto !important;
    min-height: 0 !important;
  }
  .currency-chart-wrap {
    flex: 0 0 clamp(360px, 52vh, 470px) !important;
    height: clamp(360px, 52vh, 470px) !important;
    min-height: 360px !important;
    width: 100%;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .currency-chart-wrap > div,
  .currency-chart-wrap > div > div,
  #loading-currency-diff,
  #loading-currency-iv,
  #loading-currency-rr {
    height: 100% !important;
  }
  #currency-diff-chart,
  #currency-iv-chart,
  #currency-vol-rr-chart,
  .currency-chart-wrap .dash-graph,
  .currency-chart-wrap .js-plotly-plot,
  .currency-chart-wrap .plot-container,
  .currency-chart-wrap .svg-container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 360px !important;
  }
  .currency-grid > .fxi-tile { min-height: 430px; }
  .fxi-headline-grid {
    grid-template-columns: minmax(0,1fr) auto;
  }
  .fxi-composite-card {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .fxi-evidence-card { grid-column: 2; grid-row: 1; }
  .fxi-detail-grid { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 520px) {
  #currency-netpct-modal .fxi-modal-shell {
    width: 96vw !important;
    height: 92vh !important;
  }
  #currency-netpct-modal .fxi-modal-header {
    gap: 8px;
    padding: 10px 12px !important;
  }
  #currency-netpct-modal .fxi-modal-header > :first-child {
    min-width: 0;
    font-size: 12px !important;
    line-height: 1.25;
  }
  #currency-netpct-modal .fxi-modal-scroll-body {
    padding: 10px !important;
  }
  #currency-netpct-modal .fxi-panel--detailed {
    padding: 1px 2px 4px;
  }
  .currency-series-toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
  #loading-currency-diff,
  #loading-currency-iv,
  #loading-currency-rr {
    min-height: 0 !important;
  }
  .currency-chart-wrap {
    flex-basis: 360px !important;
    height: 360px !important;
    min-height: 360px !important;
  }
  #currency-diff-modal .modal-shell,
  #currency-iv-modal .modal-shell,
  #currency-rr-modal .modal-shell {
    width: 96vw !important;
    height: 92vh !important;
  }
  #currency-diff-modal .modal-header,
  #currency-iv-modal .modal-header,
  #currency-rr-modal .modal-header {
    grid-template-columns: minmax(0,1fr) auto !important;
    gap: 8px;
  }
  #currency-diff-modal .modal-header > :first-child,
  #currency-iv-modal .modal-header > :first-child,
  #currency-rr-modal .modal-header > :first-child {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  #currency-diff-modal .modal-header > .pill-dropdown,
  #currency-iv-modal .modal-header > .pill-dropdown,
  #currency-rr-modal .modal-header > .pill-dropdown {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }
  #currency-diff-modal .modal-header > :last-child,
  #currency-iv-modal .modal-header > :last-child,
  #currency-rr-modal .modal-header > :last-child {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-content: flex-start !important;
    flex-wrap: wrap;
  }
  .currency-grid > .home-tile > div:first-child {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center !important;
    gap: 8px;
  }
  .currency-grid > .home-tile > div:first-child > .tile-title-with-help {
    min-width: 0;
    grid-column: 1;
    grid-row: 1;
  }
  .currency-grid > .home-tile > div:first-child > div:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }
  .currency-grid > .home-tile > div:first-child > .save-btn {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
  }
  .currency-page-header #currency-pair-search {
    width: 100% !important;
    min-width: 0 !important;
  }
  .currency-page-header > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }
  .currency-page-header .pill-btn { min-width: 0; white-space: normal; }
  .currency-grid { grid-auto-rows: auto !important; }
  .currency-grid > .fxi-tile { min-height: 455px; padding: 10px !important; }
  .fxi-panel { gap: 6px; }
  .fxi-headline-grid { gap: 6px; }
  .fxi-call-card,
  .fxi-composite-card { padding: 7px; }
  .fxi-evidence-card { min-width: 78px; padding: 6px; }
  .fxi-driver-row {
    grid-template-columns: 66px minmax(70px,1fr) 37px 62px;
    column-gap: 5px;
  }
  .fxi-driver-name { font-size: 9px; }
  .fxi-bias-pill { font-size: 6.5px; padding-inline: 3px; }
  .fxi-driver-detail { grid-column: 1 / -1; padding-left: 71px; }
  .fxi-structure-cell { padding: 5px; }
  .fxi-structure-cell strong { font-size: 8px; }
  .fxi-panel--detailed .fxi-headline-grid { grid-template-columns: minmax(0,1fr) auto; }
  .fxi-panel--detailed .fxi-driver-row {
    grid-template-columns: 70px minmax(70px,1fr) 39px 68px;
  }
  .fxi-detail-card { overflow-x: auto; }
  .fxi-detail-header,
  .fxi-detail-row { min-width: 560px; }
}

/* FX Intelligence refinement: breathing room and metals scope */
.fxi-tile-body {
  overflow-x: hidden;
  overflow-y: hidden;
  padding-right: 0;
}
.fxi-panel:not(.fxi-panel--detailed) {
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0,1fr) auto;
  gap: 7px;
}
.fxi-panel:not(.fxi-panel--detailed) .fxi-driver-section {
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.fxi-panel:not(.fxi-panel--detailed) .fxi-driver-list {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(5,minmax(0,1fr));
}
.fxi-panel:not(.fxi-panel--detailed) .fxi-headline-grid {
  grid-template-columns: minmax(125px,.9fr) minmax(210px,1.65fr) 90px;
  gap: 7px;
}
.fxi-panel:not(.fxi-panel--detailed) .fxi-driver-row {
  grid-template-columns: 76px minmax(105px,1fr) 43px 76px;
  min-height: 25px;
  column-gap: 7px;
}
.fxi-panel:not(.fxi-panel--detailed) .fxi-driver-name { font-size: 10px; }
.fxi-panel:not(.fxi-panel--detailed) .fxi-driver-score { font-size: 10px; }
.fxi-panel:not(.fxi-panel--detailed) .fxi-bias-pill { font-size: 7px; padding: 3px 5px; }
.fxi-panel:not(.fxi-panel--detailed) .fxi-driver-detail { font-size: 8px; }
.fxi-panel:not(.fxi-panel--detailed) .fxi-structure-cell { min-height: 34px; padding: 6px 8px; }
.fxi-panel:not(.fxi-panel--detailed) .fxi-structure-cell strong { font-size: 10px; }
.fxi-panel:not(.fxi-panel--detailed) .fxi-posture { min-height: 25px; padding: 6px 8px; font-size: 9px; }
.fxi-scope-panel {
  justify-content: center;
  gap: 12px;
  padding: 3px;
}
.fxi-scope-card {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  background: var(--fxi-glass);
}
.fxi-scope-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: var(--fxi-accent);
  border: 1px solid color-mix(in srgb,var(--fxi-accent) 35%,transparent);
  border-radius: 10px;
  background: color-mix(in srgb,var(--fxi-accent) 9%,transparent);
  font-size: 22px;
}
.fxi-scope-title {
  color: #edf0f5;
  font-size: 13px;
  font-weight: 700;
}
.fxi-scope-copy {
  max-width: 620px;
  margin-top: 5px;
  color: #909aa8;
  font-size: 9px;
  line-height: 1.5;
}
.fxi-scope-status-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
}
.fxi-scope-status {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.025);
}
.fxi-scope-status span {
  color: #788393;
  font-size: 7px;
  letter-spacing: .07em;
}
.fxi-scope-status strong {
  color: #aeb6c2;
  font-size: 10px;
}
.fxi-scope-status--available strong { color: var(--fxi-bull); }
.fxi-scope-guidance {
  grid-column: auto;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  font-size: 9px;
}
.fxi-scope-guidance a {
  color: var(--fxi-accent);
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 900px) {
  .fxi-panel:not(.fxi-panel--detailed) .fxi-headline-grid {
    grid-template-columns: minmax(0,1fr) 88px;
  }
  .fxi-panel:not(.fxi-panel--detailed) .fxi-composite-card {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .fxi-panel:not(.fxi-panel--detailed) .fxi-evidence-card { grid-column: 2; grid-row: 1; }
}
@media (max-width: 520px) {
  .fxi-panel:not(.fxi-panel--detailed) .fxi-driver-row {
    grid-template-columns: 66px minmax(70px,1fr) 37px 62px;
    min-height: 29px;
    column-gap: 5px;
  }
  .fxi-panel:not(.fxi-panel--detailed) .fxi-driver-detail {
    grid-column: 1 / -1;
    padding-left: 71px;
  }
  .fxi-scope-status-grid { grid-template-columns: minmax(0,1fr); }
  .fxi-scope-card { align-items: start; padding: 12px; }
}

/* Central Banks: Fed curve-source selector */
#cb-fed-rate-source-wrap {
  flex: 0 0 auto;
}
.cb-rate-source-toggle label {
  min-width: 34px;
  box-sizing: border-box;
  text-align: center;
  font-weight: 700;
  letter-spacing: .02em;
}
.cb-rate-data-message {
  border: 1px dashed rgba(176,149,226,.22);
  border-radius: 10px;
  background: rgba(255,255,255,.018);
}
@media (max-width: 900px) {
  #cb-fed-rate-source-wrap {
    order: -1;
  }
  .cb-rate-source-toggle label {
    min-width: 38px;
    padding: 5px 9px;
  }
}


/* ==========================================================================
   Currency page informational modals — Profiles V2 + consolidated Alerts
   ========================================================================== */
.currency-info-modal-shell {
  --currency-modal-accent: #f5d10f;
  --currency-modal-accent-rgb: 245, 209, 15;
  width: min(1180px, 94vw) !important;
  max-height: 90dvh !important;
  padding: 16px;
  box-sizing: border-box;
  overflow: hidden;
}
.currency-info-modal-shell > * { position: relative; z-index: 1; }
.currency-info-modal-overlay {
  box-sizing: border-box;
  padding: 20px;
}
.currency-info-modal-header {
  flex: 0 0 auto;
  min-height: 44px;
  margin: 0 0 12px !important;
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.currency-info-modal-header h3 { font-size: 21px !important; }
.currency-info-modal-shell .modal-close-btn {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  font-size: 26px;
}
.currency-info-modal-shell .modal-close-btn:hover,
.currency-info-modal-shell .modal-close-btn:focus-visible {
  background: rgba(255,255,255,.07);
  outline: 1px solid rgba(var(--currency-modal-accent-rgb),.45);
}
.currency-modal-scroll-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 2px 5px 10px 1px;
}
.currency-profile-selector-wrap {
  flex: 0 0 auto;
  position: relative;
  z-index: 10050 !important;
  overflow: visible !important;
  padding: 0 0 12px;
  margin: 0 !important;
}
#currency-profile-selector {
  position: relative;
  z-index: 10051 !important;
  width: min(320px, 100%) !important;
  pointer-events: auto !important;
}
#currency-profile-selector .Select__control,
#currency-profile-selector .Select-control {
  background: #171717 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  cursor: pointer;
}
#currency-profile-selector .Select__menu,
#currency-profile-selector .Select-menu-outer {
  z-index: 10060 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: 10px !important;
  background: #121212 !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.72) !important;
  color: #f4f4f5 !important;
  pointer-events: auto !important;
}
#currency-profile-selector .Select__menu-list,
#currency-profile-selector .Select-menu {
  max-height: min(42dvh, 320px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  background: #121212 !important;
  pointer-events: auto !important;
}
#currency-profile-selector .Select__option,
#currency-profile-selector .Select-option,
#currency-profile-selector .VirtualizedSelectOption {
  min-height: 40px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 9px 12px !important;
  border-bottom: 1px solid rgba(255,255,255,.055);
  background: #121212 !important;
  color: #e8e8ea !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
#currency-profile-selector .Select__option--is-focused,
#currency-profile-selector .Select__option--is-selected,
#currency-profile-selector .Select-option.is-focused,
#currency-profile-selector .Select-option.is-selected,
#currency-profile-selector .VirtualizedSelectFocusedOption {
  background: rgba(var(--currency-modal-accent-rgb),.16) !important;
  color: #fff !important;
}
#currency-profile-selector .Select__menu-list::-webkit-scrollbar,
#currency-profile-selector .Select-menu::-webkit-scrollbar { width: 8px; }
#currency-profile-selector .Select__menu-list::-webkit-scrollbar-thumb,
#currency-profile-selector .Select-menu::-webkit-scrollbar-thumb {
  border: 2px solid #121212;
  border-radius: 999px;
  background: rgba(255,255,255,.28);
}
.currency-profile-scroll-body { z-index: 1 !important; }

/* Profile identity and educational content */
.currency-profile-v2 { color: #e7e9ee; }
.currency-profile-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 16px;
  margin-bottom: 12px;
  border: 1px solid rgba(var(--currency-modal-accent-rgb),.24);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(var(--currency-modal-accent-rgb),.09), rgba(255,255,255,.025));
}
.currency-profile-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
}
.currency-profile-code {
  flex: 0 0 auto;
  min-width: 60px;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(var(--currency-modal-accent-rgb),.14);
  color: var(--currency-modal-accent);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
}
.currency-profile-identity h4 {
  margin: 0 0 4px;
  color: #fff;
  font-size: 19px;
}
.currency-profile-headline {
  color: #b9bec8;
  font-size: 13px;
  line-height: 1.45;
}
.currency-profile-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.currency-profile-tags span,
.currency-profile-expected {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  color: #c8cbd2;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 4px 8px;
}
.currency-profile-overview-grid {
  display: grid;
  grid-template-columns: minmax(210px,.8fr) minmax(300px,1.45fr) minmax(230px,1fr);
  gap: 12px;
  align-items: stretch;
}
.currency-profile-metrics,
.currency-profile-narrative,
.currency-profile-driver-card,
.currency-profile-relationships,
.currency-profile-knowledge-card {
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 11px;
  background: rgba(255,255,255,.025);
}
.currency-profile-metrics,
.currency-profile-narrative,
.currency-profile-driver-card { padding: 13px 14px; }
.currency-profile-meter + .currency-profile-meter { margin-top: 17px; }
.currency-profile-meter-label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #cdd0d7;
  font-size: 11px;
}
.currency-profile-meter-label strong {
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.currency-profile-meter-track {
  height: 7px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}
.currency-profile-meter-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(var(--currency-modal-accent-rgb),.45), var(--currency-modal-accent));
}
.currency-profile-meter-note,
.currency-profile-metric-disclaimer {
  margin-top: 5px;
  color: #858b96;
  font-size: 10px;
  line-height: 1.4;
}
.currency-profile-metric-disclaimer {
  margin-top: 17px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.currency-profile-section-kicker,
.currency-profile-card-title {
  margin-bottom: 8px;
  color: var(--currency-modal-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.currency-profile-narrative p {
  margin: 0 0 8px;
  color: #d4d7dd;
  font-size: 12px;
  line-height: 1.55;
}
.currency-profile-narrative p:last-child { margin-bottom: 0; }
.currency-profile-bullets {
  margin: 0;
  padding-left: 17px;
  color: #d4d7dd;
}
.currency-profile-bullets li {
  margin-bottom: 6px;
  font-size: 11.5px;
  line-height: 1.45;
}
.currency-profile-bullets li:last-child { margin-bottom: 0; }

.currency-profile-relationships {
  margin-top: 12px;
  padding: 14px;
}
.currency-profile-section-title,
.currency-alert-section-title {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.currency-profile-section-subtitle,
.currency-alert-section-subtitle {
  margin: 3px 0 11px;
  color: #8f95a0;
  font-size: 11px;
  line-height: 1.4;
}
.currency-profile-relationship-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}
.currency-profile-relationship-card {
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  background: rgba(0,0,0,.20);
}
.currency-profile-relationship-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.currency-profile-relationship-name {
  color: #f1f2f4;
  font-size: 12px;
  font-weight: 700;
}
.currency-profile-state {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.currency-profile-state.is-confirming { color:#74e6a3; background:rgba(52,211,153,.12); }
.currency-profile-state.is-moderate { color:#8fc8ff; background:rgba(96,165,250,.12); }
.currency-profile-state.is-diverging { color:#ff9b9b; background:rgba(248,113,113,.12); }
.currency-profile-state.is-weak,
.currency-profile-state.is-unavailable { color:#a7abb3; background:rgba(255,255,255,.06); }
.currency-profile-expected {
  display: inline-block;
  margin-bottom: 9px;
  padding: 3px 7px;
  font-size: 9px;
}
.currency-profile-corr-row {
  display: grid;
  grid-template-columns: 28px minmax(80px,1fr) 38px;
  align-items: center;
  gap: 7px;
  min-height: 22px;
}
.currency-profile-corr-period,
.currency-profile-corr-value,
.currency-profile-corr-empty {
  color: #949aa5;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.currency-profile-corr-value { color:#e7e9ee; text-align:right; }
.currency-profile-corr-track {
  position: relative;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  overflow: hidden;
}
.currency-profile-corr-zero {
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: rgba(255,255,255,.30);
  z-index: 2;
}
.currency-profile-corr-fill {
  position: absolute;
  top: 0;
  height: 100%;
}
.currency-profile-corr-fill.is-positive { background:#50d890; }
.currency-profile-corr-fill.is-negative { background:#ef7777; }
.currency-profile-relationship-why {
  margin-top: 8px;
  color: #969ca7;
  font-size: 10px;
  line-height: 1.45;
}
.currency-profile-corr-footnote {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  margin-top: 10px;
  color: #747b86;
  font-size: 9.5px;
}
.currency-profile-knowledge-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
  margin-top: 12px;
}
.currency-profile-knowledge-card { padding: 12px; }
.currency-profile-knowledge-card.is-positive { border-top-color:rgba(52,211,153,.42); }
.currency-profile-knowledge-card.is-negative { border-top-color:rgba(248,113,113,.42); }
.currency-profile-knowledge-card.is-warning { border-top-color:rgba(245,158,11,.46); }
.currency-profile-empty,
.currency-alert-empty {
  padding: 14px;
  border: 1px dashed rgba(255,255,255,.10);
  border-radius: 9px;
  color: #979da8;
  font-size: 11px;
  line-height: 1.45;
}
.currency-alert-empty.is-error { color:#ff9b9b; border-color:rgba(248,113,113,.25); }

/* Consolidated alerts */
.currency-alert-summary {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 8px;
  margin-bottom: 15px;
}
.currency-alert-summary-pill {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 9px;
  background: rgba(255,255,255,.025);
  color: #aeb3bd;
  font-size: 10px;
}
.currency-alert-summary-pill strong {
  color: #fff;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.currency-alert-summary-pill.is-setup { border-color:rgba(52,211,153,.28); }
.currency-alert-summary-pill.is-watch { border-color:rgba(96,165,250,.28); }
.currency-alert-summary-pill.is-risk { border-color:rgba(245,158,11,.30); }
.currency-alert-model-section,
.alerts-options-section {
  padding: 13px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 11px;
  background: rgba(255,255,255,.02);
}
.alerts-options-section { margin-top: 12px; }
.currency-model-alert-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(360px,100%),1fr));
  gap: 10px;
}
.currency-model-alert-group {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 10px;
  background: rgba(0,0,0,.18);
}
.currency-model-group-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #f1f2f4;
  font-size: 11px;
  font-weight: 700;
}
.currency-model-group-head strong {
  color: var(--currency-modal-accent);
  font-size: 12px;
}
.currency-model-group-description {
  min-height: 0;
  margin: 4px 0 9px;
  color: #858b96;
  font-size: 9.5px;
  line-height: 1.4;
}
.currency-model-alert-list {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:8px;
}
.currency-model-alert-card {
  padding: 10px;
  border: 1px solid rgba(255,255,255,.07);
  border-left: 2px solid #7f8794;
  border-radius: 9px;
  background: rgba(255,255,255,.025);
}
.currency-model-alert-card.is-bullish { border-left-color:#45d58a; }
.currency-model-alert-card.is-bearish { border-left-color:#ef7777; }
.currency-model-alert-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
}
.currency-model-alert-identity { display:grid; gap:2px; min-width:0; }
.currency-model-alert-identity strong { color:#fff; font-size:13px; letter-spacing:.03em; }
.currency-model-alert-identity span { color:#aab0ba; font-size:9.5px; line-height:1.35; }
.currency-model-alert-status {
  flex:0 0 auto;
  padding:3px 6px;
  border-radius:999px;
  color:#c8cbd2;
  background:rgba(255,255,255,.06);
  font-size:8.5px;
  font-weight:700;
  text-transform:uppercase;
}
.currency-model-alert-status.is-bullish { color:#74e6a3; background:rgba(52,211,153,.12); }
.currency-model-alert-status.is-bearish { color:#ff9b9b; background:rgba(248,113,113,.12); }
.currency-model-alert-metrics {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  margin-top:9px;
}
.currency-model-alert-metrics > div { display:grid; gap:2px; }
.currency-model-alert-metrics span { color:#747b86; font-size:8.5px; text-transform:uppercase; }
.currency-model-alert-metrics strong {
  overflow:hidden;
  color:#d8dbe1;
  font-size:9.5px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.currency-model-alert-context { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.currency-model-alert-context-badge {
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:3px 7px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:rgba(255,255,255,.035);
  color:#9da3ad;
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.025em;
  text-transform:uppercase;
}
.currency-model-alert-context-badge.is-counter-trend {
  border-color:rgba(245,158,11,.28);
  background:rgba(245,158,11,.09);
  color:#f2bd62;
}
.currency-model-empty-summary {
  margin:9px 0 10px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.065);
  border-radius:8px;
  background:rgba(255,255,255,.018);
  color:#8f95a0;
  font-size:9.5px;
}
.currency-model-alerts-empty { grid-column:1 / -1; }
.currency-model-alert-footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-top:9px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.055);
  color:#747b86;
  font-size:8.5px;
}
.currency-alert-open-pair {
  min-height:34px;
  padding:5px 9px;
  border:1px solid rgba(var(--currency-modal-accent-rgb),.30);
  border-radius:8px;
  background:rgba(var(--currency-modal-accent-rgb),.08);
  color:var(--currency-modal-accent);
  cursor:pointer;
  font-size:9.5px;
  font-weight:700;
}
.currency-alert-open-pair:hover,
.currency-alert-open-pair:focus-visible { background:rgba(var(--currency-modal-accent-rgb),.15); }
.alerts-options-section table { width:100%; }
.alerts-options-section > div:last-child > div:nth-child(2) {
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
.alerts-options-section > div:last-child > div:nth-child(2) > div > div:last-child {
  max-height:none !important;
  overflow:visible !important;
}

/* FX Intelligence opportunity hub inside the existing Currency Alerts modal. */
.fxi-alert-tabs {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
  margin-bottom:10px;
  padding:5px;
  border:1px solid var(--fm-border-subtle);
  border-radius:11px;
  background:var(--fm-surface-2);
}
.fxi-alert-tab,
.fxi-performance-toggle {
  min-height:38px;
  padding:7px 10px;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:var(--fm-text-secondary);
  cursor:pointer;
  font-size:10px;
  font-weight:700;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease;
}
.fxi-alert-tab:hover,
.fxi-alert-tab:focus-visible,
.fxi-performance-toggle:hover,
.fxi-performance-toggle:focus-visible {
  border-color:var(--fm-border-strong);
  color:var(--fm-text-primary);
}
.fxi-alert-tab.is-active,
.fxi-performance-toggle.is-active {
  border-color:rgba(var(--currency-modal-accent-rgb),.40);
  background:rgba(var(--currency-modal-accent-rgb),.14);
  color:var(--currency-modal-accent);
}
.fxi-performance-toggles {
  justify-content:flex-end;
  gap:6px;
  margin:-2px 0 10px;
}
.fxi-performance-toggle { min-height:34px; }
.fxi-options-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
.fxi-signals-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }
.fxi-opportunity-summary .currency-alert-summary-pill,
.fxi-options-summary .currency-alert-summary-pill,
.fxi-signals-summary .currency-alert-summary-pill {
  border-color:var(--fm-border-subtle);
  background:var(--fm-surface-2);
  color:var(--fm-text-secondary);
}
.fxi-opportunity-summary .currency-alert-summary-pill strong,
.fxi-options-summary .currency-alert-summary-pill strong,
.fxi-signals-summary .currency-alert-summary-pill strong { color:var(--fm-text-primary); }
.fxi-opportunity-intro,
.fxi-performance-view {
  padding:13px;
  border:1px solid var(--fm-border-subtle);
  border-radius:11px;
  background:var(--fm-surface-2);
}
.fxi-opportunity-intro { margin-bottom:10px; }
.fxi-opportunity-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.fxi-opportunity-card {
  min-width:0;
  padding:13px;
  border:1px solid var(--fm-border-subtle);
  border-radius:11px;
  background:var(--fm-surface-2);
  box-shadow:var(--fm-shadow);
}
.fxi-opportunity-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
.fxi-opportunity-head > div:first-child { display:grid; gap:6px; min-width:0; }
.fxi-opportunity-head > div:first-child > strong {
  color:var(--fm-text-primary);
  font-size:16px;
  letter-spacing:.04em;
}
.fxi-opportunity-badges { display:flex; flex-wrap:wrap; gap:5px; }
.fxi-opportunity-direction,
.fxi-opportunity-family,
.fxi-opportunity-adoption-badge,
.fxi-opportunity-status {
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:3px 7px;
  border:1px solid var(--fm-border-subtle);
  border-radius:999px;
  background:var(--fm-surface-3);
  color:var(--fm-text-secondary);
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.035em;
  text-transform:uppercase;
}
.fxi-opportunity-direction { color:var(--fm-text-primary); }
.fxi-opportunity-adoption-badge {
  border-color:rgba(var(--currency-modal-accent-rgb),.30);
  color:var(--currency-modal-accent);
}
.fxi-opportunity-status {
  flex:0 0 auto;
  border-color:rgba(52,211,153,.28);
  background:rgba(52,211,153,.09);
  color:var(--fm-positive);
}
.fxi-opportunity-metrics {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  margin-top:12px;
}
.fxi-opportunity-metric {
  display:grid;
  gap:3px;
  min-width:0;
  padding:8px;
  border:1px solid var(--fm-border-subtle);
  border-radius:8px;
  background:var(--fm-surface-3);
}
.fxi-opportunity-metric span,
.fxi-opportunity-dates span,
.fxi-performance-kpi span {
  color:var(--fm-text-tertiary);
  font-size:8px;
  font-weight:700;
  letter-spacing:.035em;
  text-transform:uppercase;
}
.fxi-opportunity-metric strong,
.fxi-opportunity-dates strong,
.fxi-performance-kpi strong {
  overflow:hidden;
  color:var(--fm-text-primary);
  font-size:11px;
  font-variant-numeric:tabular-nums;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.fxi-opportunity-metric.is-positive strong { color:var(--fm-positive); }
.fxi-opportunity-metric.is-negative strong { color:var(--fm-negative); }
.fxi-opportunity-dates {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:11px;
  padding-top:10px;
  border-top:1px solid var(--fm-border-subtle);
}
.fxi-opportunity-dates > div { display:grid; gap:3px; min-width:0; }
.fxi-opportunity-dates strong { font-size:9px; }
.fxi-opportunity-rule-row {
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:10px;
  padding:8px 9px;
  border:1px solid var(--fm-border-subtle);
  border-radius:8px;
  background:var(--fm-surface-3);
  color:var(--fm-text-secondary);
  font-size:9.5px;
}
.fxi-opportunity-rule-row.is-hit { border-color:rgba(52,211,153,.28); }
.fxi-opportunity-rule-row strong { color:var(--fm-text-primary); }
.fxi-opportunity-actions {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:10px;
  color:var(--fm-text-tertiary);
  font-size:8.5px;
}
.fxi-performance-kpis {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin:12px 0;
}
.fxi-performance-kpi {
  display:grid;
  gap:4px;
  padding:9px 10px;
  border:1px solid var(--fm-border-subtle);
  border-radius:9px;
  background:var(--fm-surface-3);
}
.fxi-performance-kpi strong { font-size:13px; }
.fxi-performance-kpi-value.is-positive,
.fxi-performance-value.is-positive { color:var(--fm-positive); }
.fxi-performance-kpi-value.is-negative,
.fxi-performance-value.is-negative { color:var(--fm-negative); }
.fxi-performance-kpi-value.is-neutral,
.fxi-performance-value-separator { color:var(--fm-text-primary); }
.fxi-performance-table-wrap {
  max-width:100%;
  overflow-x:auto;
  border:1px solid var(--fm-border-subtle);
  border-radius:9px;
}
.fxi-performance-table-wrap table {
  width:100%;
  min-width:900px;
  border-collapse:collapse;
  color:var(--fm-text-secondary);
  font-size:9.5px;
}
.fxi-performance-table-wrap th,
.fxi-performance-table-wrap td {
  padding:8px 9px;
  border-bottom:1px solid var(--fm-border-subtle);
  text-align:left;
  white-space:nowrap;
}
.fxi-performance-table-wrap th {
  position:sticky;
  top:0;
  z-index:1;
  background:var(--fm-surface-raised);
  color:var(--fm-text-tertiary);
  font-size:8px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.fxi-performance-table-wrap tbody tr:last-child td { border-bottom:0; }
.fxi-performance-table-wrap tbody tr:hover { background:var(--fm-selection-bg); }

/* Alerts hub refinements: glossary, horizontal records, and one performance view. */
.alerts-modal-shell { overflow:visible; }
.currency-info-modal-header {
  position:relative;
  z-index:100;
  overflow:visible;
}
.fxi-alert-header-actions {
  position:relative;
  z-index:101;
  display:flex;
  align-items:center;
  gap:8px;
}
.fxi-alert-faq {
  position:relative;
  z-index:102;
}
.fxi-alert-faq summary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:6px 11px;
  border:1px solid var(--fm-border-strong);
  border-radius:8px;
  background:var(--fm-surface-2);
  color:var(--fm-text-primary);
  cursor:pointer;
  font-size:10px;
  font-weight:700;
  list-style:none;
}
.fxi-alert-faq summary::-webkit-details-marker { display:none; }
.fxi-alert-faq[open] summary {
  border-color:rgba(var(--currency-modal-accent-rgb),.45);
  color:var(--currency-modal-accent);
}
.fxi-alert-faq-panel {
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:min(520px,82vw);
  max-height:min(62vh,620px);
  z-index:103;
  overflow:auto;
  padding:14px;
  border:1px solid var(--fm-border-strong);
  border-radius:11px;
  background:var(--fm-surface-raised);
  box-shadow:0 18px 45px rgba(0,0,0,.38);
}
.fxi-alert-tabs,
.alerts-modal-body {
  position:relative;
  z-index:1;
}
.fxi-alert-faq-panel h4 {
  margin:0 0 5px;
  color:var(--fm-text-primary);
  font-size:13px;
}
.fxi-alert-faq-panel > p {
  margin:0 0 10px;
  color:var(--fm-text-secondary);
  font-size:9.5px;
  line-height:1.45;
}
.fxi-alert-faq-panel > div {
  display:grid;
  grid-template-columns:minmax(110px,.35fr) minmax(0,1fr);
  gap:5px 10px;
  padding:7px 0;
  border-top:1px solid var(--fm-border-subtle);
  font-size:9.5px;
  line-height:1.45;
}
.fxi-alert-faq-panel strong { color:var(--fm-text-primary); }
.fxi-alert-faq-panel span { color:var(--fm-text-secondary); }

.currency-model-alert-groups,
.currency-model-alert-list,
.fxi-opportunity-grid {
  grid-template-columns:minmax(0,1fr);
}
.currency-model-alert-card {
  display:grid;
  grid-template-columns:minmax(200px,.85fr) minmax(280px,1.25fr) minmax(175px,.65fr);
  align-items:center;
  gap:8px 16px;
}
.currency-model-alert-head {
  grid-column:1;
  grid-row:1;
}
.currency-model-alert-context {
  grid-column:1;
  grid-row:2;
  margin-top:0;
}
.currency-model-alert-metrics {
  grid-column:2;
  grid-row:1 / span 2;
  margin-top:0;
}
.currency-model-alert-footer {
  grid-column:3;
  grid-row:1 / span 2;
  flex-direction:column;
  align-items:flex-end;
  margin-top:0;
  padding-top:0;
  border-top:0;
  text-align:right;
}

.fxi-opportunity-card {
  display:grid;
  grid-template-columns:minmax(170px,.7fr) minmax(330px,1.35fr) minmax(260px,1fr);
  align-items:center;
  gap:8px 14px;
}
.fxi-opportunity-head {
  grid-column:1;
  grid-row:1 / span 2;
}
.fxi-opportunity-metrics {
  grid-column:2;
  grid-row:1 / span 2;
  margin-top:0;
}
.fxi-opportunity-dates {
  grid-column:3;
  grid-row:1;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:0;
  padding-top:0;
  border-top:0;
}
.fxi-opportunity-rule-row {
  grid-column:3;
  grid-row:2;
  margin-top:0;
}
.fxi-opportunity-actions {
  grid-column:1 / -1;
  grid-row:3;
  padding-top:9px;
  border-top:1px solid var(--fm-border-subtle);
}
.fxi-opportunity-family.is-reversal-risk {
  border-color:rgba(245,158,11,.34);
  background:rgba(245,158,11,.10);
  color:#f2bd62;
}
.fxi-opportunity-family.is-directional {
  border-color:rgba(96,165,250,.34);
  background:rgba(96,165,250,.10);
  color:#7db8ff;
}
.fxi-historical-performance {
  display:grid;
  gap:10px;
}
.fxi-performance-intro { margin:0; }
.fxi-performance-return { font-weight:700; }
.fxi-performance-return.is-positive { color:var(--fm-positive); }
.fxi-performance-return.is-negative { color:var(--fm-negative); }
.fxi-performance-return.is-neutral { color:var(--fm-text-secondary); }

@media (max-width:900px) {
  .currency-model-alert-card,
  .fxi-opportunity-card { display:block; }
  .currency-model-alert-metrics,
  .fxi-opportunity-metrics { margin-top:9px; }
  .currency-model-alert-context { margin-top:8px; }
  .currency-model-alert-footer {
    flex-direction:row;
    align-items:center;
    margin-top:9px;
    padding-top:8px;
    border-top:1px solid var(--fm-border-subtle);
    text-align:left;
  }
  .fxi-opportunity-dates {
    grid-template-columns:repeat(4,minmax(0,1fr));
    margin-top:11px;
    padding-top:10px;
    border-top:1px solid var(--fm-border-subtle);
  }
  .fxi-opportunity-rule-row,
  .fxi-opportunity-actions { margin-top:10px; }
}

@media (max-width:640px) {
  .fxi-alert-header-actions { gap:5px; }
  .fxi-alert-faq summary {
    min-height:32px;
    padding:5px 8px;
  }
  .fxi-alert-faq-panel {
    position:fixed;
    top:72px;
    right:3vw;
    width:94vw;
    max-height:72vh;
    box-sizing:border-box;
  }
  .fxi-alert-faq-panel > div {
    grid-template-columns:minmax(90px,.4fr) minmax(0,1fr);
  }
  .fxi-opportunity-dates { grid-template-columns:repeat(2,minmax(0,1fr)); }
}


@media (max-width: 900px) {
  .currency-profile-overview-grid { grid-template-columns:minmax(200px,.8fr) minmax(0,1.4fr); }
  .currency-profile-driver-card { grid-column:1 / -1; }
  .currency-profile-relationship-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .currency-profile-knowledge-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .currency-model-alert-groups { grid-template-columns:minmax(0,1fr); }
  .currency-model-group-description { min-height:0; }
  .fxi-opportunity-grid { grid-template-columns:minmax(0,1fr); }
  .fxi-performance-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 640px) {
  .currency-info-modal-overlay { padding:0 !important; align-items:center !important; }
  .currency-info-modal-shell {
    width:96vw !important;
    height:92dvh !important;
    max-height:92dvh !important;
    padding:12px;
    border-radius:12px;
  }
  .currency-info-modal-header { padding-bottom:8px; margin-bottom:9px !important; }
  .currency-info-modal-header h3 { font-size:18px !important; }
  .currency-profile-selector-wrap { padding-bottom:10px; }
  #currency-profile-selector { width:100% !important; }
  .currency-profile-hero { display:grid; padding:12px; }
  .currency-profile-tags { justify-content:flex-start; }
  .currency-profile-overview-grid,
  .currency-profile-relationship-grid,
  .currency-profile-knowledge-grid { grid-template-columns:minmax(0,1fr); }
  .currency-profile-driver-card { grid-column:auto; }
  .currency-profile-code { min-width:52px; font-size:15px; }
  .currency-profile-identity h4 { font-size:16px; }
  .currency-profile-relationships { padding:11px; }
  .currency-alert-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .currency-alert-summary-pill:first-child { grid-column:1 / -1; }
  .fxi-alert-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fxi-performance-toggles { justify-content:stretch; }
  .fxi-performance-toggle { flex:1 1 0; }
  .fxi-opportunity-summary .currency-alert-summary-pill:first-child,
  .fxi-signals-summary .currency-alert-summary-pill:first-child,
  .fxi-options-summary .currency-alert-summary-pill:first-child { grid-column:auto; }
  .fxi-opportunity-metrics,
  .fxi-opportunity-dates { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fxi-opportunity-actions { align-items:flex-end; }
  .currency-alert-model-section,
  .alerts-options-section { padding:10px; }
  .alerts-options-section > div:last-child > div:nth-child(2) {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:10px !important;
  }
  .alerts-options-section table,
  .alerts-options-section thead,
  .alerts-options-section tbody,
  .alerts-options-section tr,
  .alerts-options-section td { display:block; width:100%; box-sizing:border-box; }
  .alerts-options-section thead { display:none; }
  .alerts-options-section tbody tr {
    margin-bottom:8px;
    padding:7px 9px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:9px;
    background:rgba(0,0,0,.18);
  }
  .alerts-options-section tbody td {
    display:grid !important;
    grid-template-columns:86px minmax(0,1fr);
    gap:10px;
    padding:5px 0 !important;
    border-bottom:1px solid rgba(255,255,255,.045) !important;
    text-align:right !important;
    white-space:normal !important;
    font-size:10px !important;
  }
  .alerts-options-section tbody td:last-child { border-bottom:0 !important; }
  .alerts-options-section tbody td::before {
    color:#747b86;
    font-size:8.5px;
    font-weight:700;
    letter-spacing:.04em;
    text-align:left;
    text-transform:uppercase;
  }
  .alerts-options-section tbody td:nth-child(1)::before { content:"Pair"; }
  .alerts-options-section tbody td:nth-child(2)::before { content:"Date"; }
  .alerts-options-section tbody td:nth-child(3)::before { content:"Direction"; }
  .alerts-options-section tbody td:nth-child(4)::before { content:"Value"; }
  .alerts-options-section tbody td:nth-child(5)::before { content:"Band low"; }
  .alerts-options-section tbody td:nth-child(6)::before { content:"Band high"; }
  .alerts-options-section table + * { margin-top:0; }
  .alerts-options-section div[style*="max-height"],
  .alerts-options-section div[style*="maxHeight"] {
    max-height:none !important;
    overflow:visible !important;
  }
}

@media (max-width: 420px) {
  .currency-profile-identity { align-items:flex-start; }
  .currency-profile-corr-row { grid-template-columns:27px minmax(70px,1fr) 34px; gap:5px; }
  .currency-model-alert-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .currency-model-alert-footer { align-items:flex-end; }
  .currency-alert-open-pair { min-height:38px; }
}

/* ========================================================================== 
   MOBILE CHART CONTAINMENT — Central Banks and shared expanded chart modals
   ========================================================================== */
@media (max-width: 640px) {
  /* Give the controls and the plot separate, usable vertical space. */
  .cb-page-grid--bank #tile-5,
  .cb-page-grid--bank #tile-6 {
    height: auto !important;
    min-height: 500px !important;
  }

  .cb-page-grid--bank #cb-policy-rate-controls,
  #cb-policy-rate-modal-controls[style*="display: flex"] {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) 68px;
    grid-template-rows: auto auto;
    align-items: center !important;
    gap: 7px !important;
    padding: 7px !important;
  }

  .cb-policy-rate-controls > .positioning-series-label:first-child {
    grid-column: 1;
    grid-row: 1;
  }

  .cb-policy-rate-controls > .positioning-series-toggle {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
  }

  .cb-policy-rate-controls > .cb-policy-rate-history-label {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin-left: 0 !important;
  }

  .cb-policy-rate-controls > .cb-policy-rate-lookback {
    grid-column: 3;
    grid-row: 1;
  }

  #tile-5 > div:has(> #policy-rate-chart),
  #tile-6 > div:has(> #curve-comparison-chart) {
    flex: 1 1 auto !important;
    min-height: 320px !important;
    overflow: hidden !important;
  }

  #policy-rate-chart,
  #curve-comparison-chart {
    width: 100% !important;
    height: 100% !important;
    min-height: 320px !important;
  }

  /* Chart modals fill the usable dynamic viewport and contain Plotly fully. */
  .modal-overlay:has(.js-plotly-plot) {
    padding: 0 !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  .modal-overlay:has(.js-plotly-plot) > .modal-shell {
    width: 96vw !important;
    max-width: 96vw !important;
    min-width: 0 !important;
    height: 92dvh !important;
    max-height: 92dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  .modal-overlay:has(.js-plotly-plot) .modal-header {
    flex: 0 0 auto !important;
    gap: 8px !important;
    padding: 8px 10px !important;
  }

  .modal-overlay:has(.js-plotly-plot) .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 8px !important;
  }

  .modal-overlay:has(.js-plotly-plot) .modal-body > div:has(> .dash-graph) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .modal-overlay:has(.js-plotly-plot) .dash-graph,
  .modal-overlay:has(.js-plotly-plot) .js-plotly-plot,
  .modal-overlay:has(.js-plotly-plot) .plot-container,
  .modal-overlay:has(.js-plotly-plot) .svg-container {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }
}
/* Unified Earnings > Stocks page */
.stocks-page-shell {
    flex: 1;
    min-width: 0;
    min-height: 100vh;
    padding: 20px 20px 28px;
    overflow-x: hidden;
    box-sizing: border-box;
}

.stocks-page-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
}

.stocks-page-tile {
    padding: 16px;
    border-radius: 18px;
    box-sizing: border-box;
    overflow: visible;
}

.stocks-page-header,
.stocks-toolbar-row,
.stocks-help-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.stocks-page-title {
    margin: 0;
    color: #f8fafc;
    font-size: 22px;
    font-weight: 700;
}

.stocks-page-copy,
.stocks-report-chart-copy {
    margin: 5px 0 0;
    color: rgba(226,232,240,0.66);
    font-size: 12px;
    line-height: 1.5;
}

.stocks-asof-label,
.stocks-result-count {
    color: rgba(226,232,240,0.7);
    font-size: 11px;
    line-height: 1.4;
}

.stocks-filter-grid {
    display: grid;
    grid-template-columns: minmax(240px, 1.5fr) repeat(2, minmax(170px, 1fr));
    gap: 10px;
    margin-top: 15px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    background: rgba(255,255,255,0.025);
    position: relative;
    z-index: 20;
}

.stocks-control,
.stocks-control .Select-control,
.stocks-search {
    min-height: 40px;
    width: 100%;
    box-sizing: border-box;
}

.stocks-search {
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 9px;
    background: #111827;
    color: #f8fafc;
    padding: 0 12px;
    outline: none;
}

.stocks-toolbar-row {
    align-items: center;
    margin: 11px 0;
}

.stocks-faq-button {
    min-width: 74px;
}

.stocks-composition-panel {
    margin: 10px 0 14px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 13px;
    background: rgba(255,255,255,0.022);
    overflow: hidden;
}

.stocks-composition-panel > summary {
    padding: 11px 13px;
    color: #e2e8f0;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    list-style-position: inside;
}

.stocks-chart-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 0 10px 10px;
}

.stocks-desktop-grid-wrap {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 13px;
    overflow: hidden;
}

.stocks-desktop-grid {
    --ag-background-color: #030303;
    --ag-foreground-color: rgba(255,255,255,0.92);
    --ag-header-background-color: #0a0a0a;
    --ag-header-foreground-color: #f8fafc;
    --ag-odd-row-background-color: #070707;
    --ag-row-hover-color: rgba(200,182,255,0.10);
    --ag-selected-row-background-color: rgba(56,189,248,0.14);
    --ag-border-color: rgba(255,255,255,0.08);
    --ag-font-family: "Plus Jakarta Sans", sans-serif;
    --ag-font-size: 11px;
}

.stocks-desktop-grid .ag-body-horizontal-scroll {
    position: sticky !important;
    bottom: 0;
    z-index: 5;
    min-height: 16px !important;
}

.stocks-mobile-list {
    display: none;
}

.stocks-selected-panel {
    display: grid;
    grid-template-columns: minmax(240px, 0.8fr) auto minmax(0, 1.2fr);
    align-items: start;
    gap: 14px;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    background: rgba(255,255,255,0.025);
}

.stocks-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.stocks-detail-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 8px;
}

.stocks-detail-notes {
    grid-column: 1 / -1;
}

.stocks-help-modal-shell {
    width: min(860px, 94vw);
    height: min(820px, 88dvh);
    max-height: 88dvh;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(200,182,255,0.26);
    border-radius: 18px;
    background: #090b10;
    box-shadow: 0 28px 90px rgba(0,0,0,0.62);
}

.stocks-help-header {
    flex: 0 0 auto;
    align-items: flex-start;
    padding: 20px 22px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(135deg, rgba(200,182,255,0.11), rgba(56,189,248,0.035));
}

.stocks-faq-search {
    width: 100%;
    min-height: 42px;
    flex: 0 0 auto;
    width: calc(100% - 44px);
    margin: 14px 22px 0;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 9px;
    background: #111827;
    color: #f8fafc;
    box-sizing: border-box;
}

#stocks-help-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 22px 22px;
    scrollbar-width: thin;
    scrollbar-color: rgba(200,182,255,0.55) rgba(255,255,255,0.05);
}

.stocks-help-header h3 {
    margin: 0;
    color: #f8fafc;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.stocks-faq-intro {
    max-width: 620px;
    margin: 6px 0 0;
    color: #94a3b8;
    font-size: 11.5px;
    line-height: 1.5;
}

.stocks-help-content {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.stocks-faq-section {
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 13px;
    background: rgba(255,255,255,0.025);
}

.stocks-faq-section-title {
    margin: 0 0 11px !important;
    color: #ddd6fe !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
}

.stocks-faq-entry {
    display: grid;
    grid-template-columns: minmax(110px, 0.28fr) minmax(0, 1fr);
    gap: 18px;
    padding: 10px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.stocks-faq-entry:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.stocks-faq-entry:last-child {
    padding-bottom: 0;
}

.stocks-help-content h4,
.stocks-help-content p {
    margin: 0;
}

.stocks-help-content h4 {
    color: #f8fafc;
    font-size: 11.5px;
    line-height: 1.4;
}

.stocks-help-content p {
    margin-top: 0;
    color: #b9c3cf;
    font-size: 11.5px;
    line-height: 1.5;
}

.stocks-report-chart-block {
    margin-bottom: 18px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    background: rgba(2,6,23,0.62);
}

.stocks-report-chart-title {
    color: #f8fafc;
    font-size: 14px;
    font-weight: 700;
}

.stocks-empty-state {
    padding: 18px;
    color: #94a3b8;
    text-align: center;
}

@media (max-width: 1100px) {
    .stocks-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .stocks-chart-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .stocks-page-shell {
        padding: 12px 10px 22px;
    }

    .stocks-page-tile {
        padding: 12px;
    }

    .stocks-page-header,
    .stocks-toolbar-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .stocks-filter-grid {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .stocks-faq-button {
        justify-self: start;
        min-height: 44px;
    }

    .stocks-chart-strip {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    .stocks-chart-strip > div {
        flex: 0 0 calc(100vw - 70px);
        min-width: 0;
        scroll-snap-align: start;
    }

    .stocks-desktop-grid-wrap,
    .stocks-selected-panel {
        display: none;
    }

    .stocks-mobile-list {
        display: grid;
        gap: 9px;
    }

    .stocks-mobile-limit-note {
        padding: 10px 11px;
        border: 1px solid rgba(200,182,255,0.18);
        border-radius: 10px;
        background: rgba(200,182,255,0.06);
        color: #cbd5e1;
        font-size: 10.5px;
        line-height: 1.45;
    }

    .stocks-help-modal-shell {
        width: calc(100vw - 16px);
        height: calc(100dvh - 16px);
        max-height: calc(100dvh - 16px);
    }

    .stocks-help-header {
        padding: 16px 16px 12px;
    }

    .stocks-faq-search {
        width: calc(100% - 32px);
        margin: 12px 16px 0;
    }

    #stocks-help-body {
        padding: 0 16px 16px;
    }

    .stocks-faq-entry {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .stocks-mobile-card {
        border: 1px solid rgba(255,255,255,0.09);
        border-radius: 13px;
        background: rgba(255,255,255,0.028);
        overflow: hidden;
    }

    .stocks-mobile-card-header,
    .stocks-mobile-scan,
    .stocks-mobile-card > details > summary {
        margin-left: 13px;
        margin-right: 13px;
    }

    .stocks-mobile-card-header {
        padding-top: 13px;
    }

    .stocks-mobile-card > details > summary {
        padding: 12px 0;
        cursor: pointer;
        color: #cbd5e1;
        font-size: 10.5px;
        font-weight: 700;
    }

    .stocks-mobile-company-link {
        display: flex;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        padding: 0;
        border: 0;
        background: transparent;
        color: #bfdbfe;
        font: inherit;
        font-size: 13px;
        text-align: left;
        cursor: pointer;
    }

    .stocks-mobile-company-link span,
    .stocks-mobile-sector {
        color: #94a3b8;
        font-size: 10px;
    }

    .stocks-mobile-sector {
        margin-top: 3px;
    }

    .stocks-mobile-indexes {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        margin-top: 9px;
    }

    .stocks-index-badge {
        padding: 4px 7px;
        border-radius: 999px;
        background: rgba(200,182,255,0.12);
        border: 1px solid rgba(200,182,255,0.24);
        color: #ddd6fe;
        font-size: 9.5px;
        font-weight: 700;
    }

    .stocks-index-badge.muted {
        color: #94a3b8;
        border-color: rgba(148,163,184,0.18);
        background: rgba(148,163,184,0.08);
    }

    .stocks-mobile-scan,
    .stocks-mobile-detail-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin-top: 10px;
    }

    .stocks-mobile-metric {
        min-width: 0;
        padding: 8px;
        border-radius: 9px;
        background: rgba(255,255,255,0.035);
    }

    .stocks-mobile-metric span,
    .stocks-mobile-metric strong {
        display: block;
    }

    .stocks-mobile-metric span {
        color: #7f8a9a;
        font-size: 8.5px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .stocks-mobile-metric strong {
        margin-top: 3px;
        color: #f1f5f9;
        font-size: 10.5px;
        overflow-wrap: anywhere;
    }

    .stocks-mobile-expanded {
        padding: 0 13px 13px;
        border-top: 1px solid rgba(255,255,255,0.06);
    }

    .stocks-mobile-section-title {
        margin-top: 12px;
        color: var(--fxi-accent, #FFD700);
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
    }

    #earnings-fundamental-report-modal {
        padding: 6px !important;
    }

    #earnings-fundamental-report-modal-shell {
        width: 96vw !important;
        max-height: 94dvh !important;
        padding: 12px !important;
    }

    #earnings-fundamental-report-body {
        padding: 10px !important;
    }

    .stocks-report-chart {
        min-height: 340px;
    }
}
/* =========================================================
   Calendar V2 — Unified Analysis panel (Dashboard 1 port)
   ========================================================= */
#cal2-grid .cal2-risk-action-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 5px;
}

#cal2-grid .cal2-risk-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 78px;
  height: 24px;
  margin: 0;
  padding: 0 9px;
  border: 1px solid rgba(176, 149, 226, .38);
  border-radius: 7px;
  color: #e9e1ff;
  background: rgba(139, 92, 246, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  font: inherit;
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease;
}

#cal2-grid .cal2-risk-action-btn:hover {
  color: #ffffff;
  border-color: rgba(196, 181, 253, .82);
  background: rgba(139, 92, 246, .24);
  transform: translateY(-1px);
}

#cal2-grid .cal2-risk-action-btn:focus-visible {
  outline: 2px solid #c4b5fd;
  outline-offset: 2px;
}

#cal2-grid .cal2-risk-action-btn:active {
  transform: translateY(0);
}

.cal2-mobile-indicator-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.cal2-mobile-indicator-static {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.cal2-mobile-analysis-cell {
  text-align: center;
  vertical-align: middle;
}

.cal2-mobile-risk-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(176, 149, 226, .34);
  border-radius: 999px;
  padding: 5px 9px;
  color: #d8c8ff;
  background: rgba(139, 92, 246, .11);
  font: inherit;
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.cal2-mobile-risk-btn:active {
  transform: translateY(1px);
}

.offcanvas.cal2-risk-preview-panel,
.cal2-risk-preview-panel.offcanvas {
  width: min(660px, 44vw) !important;
  color: #f4f4f5;
  background:
    radial-gradient(circle at 92% 2%, rgba(139, 92, 246, .13), transparent 28%),
    linear-gradient(180deg, #111113 0%, #09090b 100%);
  border-left: 1px solid rgba(176, 149, 226, .28);
  box-shadow: -24px 0 70px rgba(0, 0, 0, .58);
}

.calendar-v2-page .cal2-main {
  min-width: 0;
  transition: margin-right 180ms ease;
}

@media (min-width: 761px) {
  .calendar-v2-page .cal2-main.cal2-analysis-open {
    margin-right: min(660px, 44vw);
  }
}

.cal2-risk-preview-panel .offcanvas-header {
  display: none;
}

.cal2-risk-preview-panel .offcanvas-body {
  padding: 0;
  overflow-x: hidden;
}

.cal2-event-panel-tabs {
  position: sticky;
  z-index: 5;
  top: 92px;
  padding: 10px 18px 0;
  background: rgba(12, 12, 14, .96);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.cal2-event-panel-tabs .nav-link {
  margin-right: 6px;
  padding: 9px 13px;
  border: 1px solid transparent !important;
  border-radius: 9px 9px 0 0 !important;
  color: #a1a1aa !important;
  background: transparent !important;
  font-size: 12px;
  font-weight: 750;
}

.cal2-event-panel-tabs .nav-link:hover {
  color: #ede9fe !important;
  border-color: rgba(176, 149, 226, .24) !important;
}

.cal2-event-panel-tabs .nav-link.active {
  color: #f5f3ff !important;
  border-color: rgba(176, 149, 226, .48) !important;
  border-bottom-color: #111113 !important;
  background: rgba(139, 92, 246, .15) !important;
}

.cal2-event-tab-content {
  padding: 18px;
}

.cal2-risk-preview-panel .cal2-forecast-two-panel {
  grid-template-columns: minmax(0, 1fr) !important;
}

.risk-preview-tab-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.risk-preview-tab-title {
  margin: 3px 0 4px;
  color: #f4f4f5;
  font-size: 18px;
  font-weight: 800;
}

.risk-preview-header {
  position: sticky;
  z-index: 6;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 22px 17px;
  background: rgba(12, 12, 14, .94);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(18px);
}

.risk-preview-kicker {
  margin-bottom: 5px;
  color: #bda6f0;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .15em;
}

.risk-preview-title {
  margin: 0;
  color: #fafafa;
  font-size: clamp(20px, 2.2vw, 27px);
  font-weight: 780;
  line-height: 1.12;
}

.risk-preview-subtitle {
  margin-top: 7px;
  color: #a1a1aa;
  font-size: 11px;
  line-height: 1.45;
}

.risk-preview-header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
  flex: 0 0 auto;
}

.risk-preview-close {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  padding: 5px 10px;
  color: #d4d4d8;
  background: rgba(255, 255, 255, .04);
  font-size: 10px;
  font-weight: 700;
}

.risk-preview-state {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(176, 149, 226, .30);
  border-radius: 999px;
  padding: 5px 9px;
  color: #ddd0ff;
  background: rgba(139, 92, 246, .12);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.risk-preview-state--waiting,
.risk-preview-state--partial {
  color: #fde68a;
  border-color: rgba(250, 204, 21, .30);
  background: rgba(250, 204, 21, .10);
}

.risk-preview-state--live,
.risk-preview-state--updated {
  color: #bbf7d0;
  border-color: rgba(74, 222, 128, .30);
  background: rgba(74, 222, 128, .10);
}

.risk-preview-state--unavailable {
  color: #fecdd3;
  border-color: rgba(251, 113, 133, .30);
  background: rgba(251, 113, 133, .10);
}

.risk-preview-controls {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  padding: 14px 22px;
  background: rgba(10, 10, 12, .93);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  backdrop-filter: blur(18px);
}

/* These two compact lists deliberately use native selects.  The browser owns
   the popup surface, so it remains fully opaque and clickable above the panel. */
.risk-preview-native-select.form-select {
  width: 100%;
  min-height: 36px;
  padding: 7px 34px 7px 11px;
  color: #f4f4f5 !important;
  color-scheme: dark;
  background-color: #18181b !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 9px;
  box-shadow: none !important;
  cursor: pointer;
}

.risk-preview-native-select.form-select:focus {
  border-color: rgba(176, 149, 226, .68) !important;
  box-shadow: 0 0 0 2px rgba(176, 149, 226, .14) !important;
}

.risk-preview-native-select.form-select option,
.risk-preview-native-select.form-select optgroup {
  color: #f4f4f5 !important;
  background-color: #18181b !important;
}

.risk-preview-control label {
  display: block;
  margin-bottom: 5px;
  color: #a1a1aa;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.risk-preview-select .Select-control,
.risk-preview-select .select__control {
  min-height: 36px;
  color: #f4f4f5;
  background: #18181b !important;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 9px;
}

.risk-preview-select .Select-menu-outer,
.risk-preview-select .select__menu {
  z-index: 10050 !important;
  color: #f4f4f5;
  background: #18181b !important;
  border: 1px solid rgba(176, 149, 226, .24);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .55);
}

.risk-preview-control:focus-within {
  position: relative;
  z-index: 10040;
}

.risk-preview-select .Select-menu,
.risk-preview-select .Select-option,
.risk-preview-select .VirtualizedSelectOption,
.risk-preview-select .select__menu-list,
.risk-preview-select .select__option {
  color: #e4e4e7 !important;
  background: #18181b !important;
  cursor: pointer;
}

.risk-preview-select .Select-option.is-focused,
.risk-preview-select .Select-option.is-selected,
.risk-preview-select .VirtualizedSelectFocusedOption,
.risk-preview-select .select__option--is-focused,
.risk-preview-select .select__option--is-selected {
  color: #fff !important;
  background: #332653 !important;
}

.risk-preview-select .Select-value-label,
.risk-preview-select .Select-placeholder,
.risk-preview-select .Select-input > input,
.risk-preview-select .select__single-value,
.risk-preview-select .select__placeholder,
.risk-preview-select .select__input-container {
  color: #f4f4f5 !important;
}

.risk-preview-content {
  min-height: 280px;
}

.risk-preview-body {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 16px 18px 28px;
}

.risk-preview-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.risk-preview-summary-card {
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(245, 209, 15, .20);
  border-radius: 10px;
  background: rgba(255, 255, 255, .025);
}

.risk-preview-summary-label,
.risk-preview-summary-value {
  display: block;
}

.risk-preview-summary-label {
  margin-bottom: 5px;
  color: #8f8f9a;
  font-size: 8.5px;
  line-height: 1.3;
}

.risk-preview-summary-value {
  overflow: hidden;
  color: #f5f3ff;
  font-size: 13px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-preview-section {
  min-width: 0;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.018));
}

.risk-preview-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 11px;
}

.risk-preview-section-title {
  margin: 0;
  color: #f4f4f5;
  font-size: 14px;
  font-weight: 780;
}

.risk-preview-section-note {
  color: #8b8b96;
  font-size: 9.5px;
  line-height: 1.35;
  text-align: right;
}

.risk-preview-table-scroll {
  overflow-x: auto;
  scrollbar-color: rgba(176, 149, 226, .45) transparent;
}

.risk-preview-component-table {
  width: 100%;
  min-width: 790px;
  border-collapse: collapse;
  font-size: 10.5px;
}

.risk-preview-component-table th,
.risk-preview-component-table td {
  padding: 9px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  text-align: right;
  vertical-align: middle;
  white-space: nowrap;
}

.risk-preview-component-table th:first-child,
.risk-preview-component-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 188px;
  text-align: left;
  background: #151517;
}

.risk-preview-component-table th {
  color: #8f8f9a;
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.risk-preview-component-name {
  overflow: hidden;
  max-width: 190px;
  color: #e4e4e7;
  font-weight: 720;
  text-overflow: ellipsis;
}

.risk-preview-metric-guide {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  padding: 10px 11px;
  border-radius: 8px;
  color: #a9a9b2;
  background: rgba(255, 255, 255, .025);
  font-size: 9.5px;
  line-height: 1.45;
}

.risk-preview-metric-guide p {
  margin: 0;
}

.risk-preview-metric-guide strong {
  color: #d8c8ff;
}

.risk-preview-component-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.risk-preview-role {
  border-radius: 999px;
  padding: 2px 5px;
  color: #c4b5fd;
  background: rgba(139, 92, 246, .14);
  font-size: 8px;
  text-transform: uppercase;
}

.risk-preview-role--secondary {
  color: #a1a1aa;
  background: rgba(161, 161, 170, .10);
}

.risk-preview-ric {
  color: #71717a;
  font-size: 8.5px;
}

.risk-preview-scenario-name {
  color: #d8c8ff;
  font-size: 17px;
  font-weight: 790;
}

.risk-preview-scenario-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.risk-preview-confidence-block {
  display: flex;
  min-width: 0;
  align-items: flex-end;
  flex-direction: column;
  gap: 5px;
}

.risk-preview-confidence {
  display: inline-flex;
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 8.5px;
  font-weight: 850;
  letter-spacing: .045em;
  white-space: nowrap;
}

.risk-preview-confidence--high { color: #86efac; background: rgba(34, 197, 94, .10); }
.risk-preview-confidence--medium { color: #fde68a; background: rgba(234, 179, 8, .10); }
.risk-preview-confidence--low { color: #fda4af; background: rgba(244, 63, 94, .10); }

.risk-preview-confidence-message {
  max-width: 300px;
  margin: 0;
  color: #aaaab4;
  font-size: 9.5px;
  line-height: 1.4;
  text-align: right;
}

.risk-preview-scenario-copy,
.risk-preview-takeaway {
  margin: 6px 0 0;
  color: #d4d4d8;
  font-size: 12px;
  line-height: 1.55;
}

.risk-preview-scenario-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.risk-preview-scenario-stats span {
  border-radius: 999px;
  padding: 4px 8px;
  color: #a1a1aa;
  background: rgba(255, 255, 255, .045);
  font-size: 9.5px;
}

.risk-preview-asset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.risk-preview-asset-card {
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 10px;
  background: rgba(0, 0, 0, .18);
}

.risk-preview-asset-card.is-selected {
  border-color: rgba(176, 149, 226, .42);
  box-shadow: 0 0 0 1px rgba(176, 149, 226, .08) inset;
}

.risk-preview-asset-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.risk-preview-asset-class {
  overflow: hidden;
  color: #71717a;
  font-size: 8.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-preview-asset-move {
  margin: 7px 0;
  color: #cbd5e1;
  font-size: 19px;
  font-weight: 820;
}

.risk-preview-asset-move--positive { color: #4ade80; }
.risk-preview-asset-move--negative { color: #fb7185; }

.risk-preview-asset-stats {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #9696a0;
  font-size: 9px;
  line-height: 1.35;
}

.risk-preview-chart {
  overflow: hidden;
  border-radius: 9px;
}

.risk-preview-chart-selector-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.risk-preview-chart-selector-label {
  color: #8f8f9a;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.risk-preview-chart-selector {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.risk-preview-chart-selector-option {
  margin: 0 !important;
  border: 1px solid rgba(176, 149, 226, .24);
  border-radius: 7px;
  padding: 5px 8px;
  color: #d8c8ff;
  background: rgba(139, 92, 246, .08);
  font-size: 9px;
  cursor: pointer;
}

.risk-preview-chart-selector-option:has(input:checked) {
  color: #fff;
  border-color: rgba(196, 181, 253, .70);
  background: rgba(139, 92, 246, .30);
}

.risk-preview-chart-selector-input {
  margin-right: 5px;
  accent-color: #a78bfa;
}

.risk-preview-insight {
  display: grid;
  gap: 0;
}

.risk-preview-insight-row {
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.risk-preview-insight-row:last-child {
  border-bottom: 0;
}

.risk-preview-insight-label {
  display: block;
  margin-bottom: 4px;
  color: #bda6f0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.risk-preview-insight-copy,
.risk-preview-cross-asset-list {
  margin: 0;
  color: #d4d4d8;
  font-size: 11px;
  line-height: 1.55;
}

.risk-preview-cross-asset-list {
  padding-left: 17px;
}

.risk-preview-cross-asset-list li + li {
  margin-top: 4px;
}

.risk-preview-analogue {
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.risk-preview-analogue:last-child { border-bottom: 0; }

.risk-preview-analogue-head,
.risk-preview-analogue-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.risk-preview-analogue-head span,
.risk-preview-analogue-stats {
  color: #92929c;
  font-size: 9.5px;
}

.risk-preview-analogue-stats {
  margin-top: 5px;
}

.risk-preview-sample-block {
  margin-top: 10px;
  padding: 11px;
  border: 1px solid rgba(176, 149, 226, .18);
  border-radius: 10px;
  background: rgba(245, 209, 15, .05);
}

.risk-preview-sample-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.risk-preview-sample-metrics > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.risk-preview-sample-metrics span {
  color: #8f8f9a;
  font-size: 8.5px;
  text-transform: uppercase;
}

.risk-preview-sample-metrics strong {
  color: #f4f4f5;
  font-size: 11px;
}

.risk-preview-sample-block .risk-preview-confidence-message {
  max-width: none;
  margin-top: 9px;
  text-align: left;
}

.risk-preview-sample-empty {
  color: #e4e4e7;
  font-size: 11px;
  font-weight: 720;
}

.risk-preview-scenario-definition {
  margin-top: 11px;
  padding-left: 10px;
  border-left: 2px solid rgba(245, 209, 15, .60);
}

.risk-preview-component-details,
.risk-preview-release-detail {
  margin-top: 11px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 9px;
  background: rgba(0, 0, 0, .14);
}

.risk-preview-component-details > summary,
.risk-preview-release-detail > summary {
  padding: 10px 11px;
  color: #d4d4d8;
  font-size: 10px;
  font-weight: 720;
  cursor: pointer;
}

.risk-preview-release-detail > summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.risk-preview-release-detail > summary span:last-child {
  color: #8f8f9a;
  font-size: 9px;
  font-weight: 600;
}

.risk-preview-release-list {
  display: grid;
  gap: 7px;
}

.risk-preview-release-table,
.risk-preview-horizon-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 9.5px;
}

.risk-preview-release-table th,
.risk-preview-release-table td,
.risk-preview-horizon-table th,
.risk-preview-horizon-table td {
  padding: 8px;
  border-top: 1px solid rgba(255, 255, 255, .055);
  text-align: right;
  white-space: nowrap;
}

.risk-preview-release-table th:first-child,
.risk-preview-release-table td:first-child,
.risk-preview-horizon-table th:first-child,
.risk-preview-horizon-table td:first-child {
  text-align: left;
}

.risk-preview-release-table th,
.risk-preview-horizon-table th {
  color: #8f8f9a;
  font-size: 8.5px;
  text-transform: uppercase;
}

.risk-preview-horizon-wrap {
  margin-top: 11px;
}

.risk-preview-horizon--positive { color: #4ade80; }
.risk-preview-horizon--negative { color: #fb7185; }
.risk-preview-horizon--neutral { color: #a1a1aa; }

.risk-preview-primary-intro {
  margin: 0 0 9px;
  text-align: left;
}

.risk-preview-primary-select {
  margin-bottom: 10px;
}

.risk-preview-primary-panel {
  padding: 11px;
  border: 1px solid rgba(245, 209, 15, .16);
  border-radius: 10px;
  background: rgba(0, 0, 0, .13);
}

.risk-preview-primary-title {
  color: #f5d10f;
  font-size: 13px;
  font-weight: 780;
}

.risk-preview-primary-criteria {
  margin: 5px 0 0;
  color: #b5b5bd;
  font-size: 10.5px;
  line-height: 1.5;
}

.risk-preview-primary-subtitle {
  margin-top: 13px;
  color: #d4d4d8;
  font-size: 10px;
  font-weight: 760;
}

.risk-preview-caveat-list {
  margin: 0;
  padding-left: 18px;
  color: #b5b5bd;
  font-size: 10.5px;
  line-height: 1.55;
}

.risk-preview-empty,
.risk-preview-unavailable {
  margin: 18px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  color: #a1a1aa;
  background: rgba(255, 255, 255, .025);
  font-size: 12px;
  line-height: 1.55;
}

@media (max-width: 760px) {
  .offcanvas.cal2-risk-preview-panel,
  .cal2-risk-preview-panel.offcanvas {
    width: 100vw !important;
    max-width: 100vw;
    border-left: 0;
  }

  .risk-preview-header {
    padding: 16px 14px 13px;
  }

  .risk-preview-header-actions {
    gap: 7px;
  }

  .risk-preview-sample-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cal2-event-panel-tabs {
    top: 82px;
    overflow-x: auto;
    padding: 8px 10px 0;
    white-space: nowrap;
  }

  .cal2-event-panel-tabs .nav {
    flex-wrap: nowrap;
  }

  .cal2-event-tab-content {
    padding: 12px 10px 22px;
  }

  .risk-preview-tab-summary {
    padding: 14px;
  }

  .risk-preview-controls {
    grid-template-columns: 1fr;
    padding: 11px 14px;
  }

  .risk-preview-body {
    padding: 12px 10px 24px;
  }

  .risk-preview-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .risk-preview-scenario-heading,
  .risk-preview-chart-selector-wrap {
    align-items: flex-start;
    flex-direction: column;
  }

  .risk-preview-confidence-block {
    align-items: flex-start;
  }

  .risk-preview-confidence-message {
    text-align: left;
  }

  .risk-preview-chart-selector {
    justify-content: flex-start;
  }

  .risk-preview-section {
    padding: 12px;
  }

  .risk-preview-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .risk-preview-section-note {
    text-align: left;
  }

  .risk-preview-asset-grid {
    grid-template-columns: 1fr;
  }

  .risk-preview-analogue-stats {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
}

/* Final cascade lock: keep the shared theme authoritative over legacy rules. */
:root[data-theme] body,
:root[data-theme] #react-entry-point,
:root[data-theme] #_dash-app-content,
:root[data-theme] .app-bg,
:root[data-theme] .dashboard-page-shell {
  background: var(--fm-page-bg) !important;
  color: var(--fm-text-primary) !important;
}

:root[data-theme] .sidebar.sidebar-shell {
  background: var(--fm-sidebar-bg) !important;
  border-right-color: var(--fm-border-subtle) !important;
}

:root[data-theme] .sidebar .nav-item.nav-item-row,
:root[data-theme] .sidebar .nav-item.nav-item-row .nav-item-label,
:root[data-theme] .sidebar .nav-item.nav-item-row .nav-item-icon i,
:root[data-theme] .sidebar-theme-btn,
:root[data-theme] .sidebar-theme-btn .nav-item-label,
:root[data-theme] .sidebar-theme-btn .nav-item-icon i,
:root[data-theme] .sidebar-logout-btn,
:root[data-theme] .sidebar-logout-btn .nav-item-label,
:root[data-theme] .sidebar-logout-btn .nav-item-icon i {
  color: var(--fm-text-primary) !important;
}

:root[data-theme] .sidebar .nav-item.nav-item-row:hover,
:root[data-theme] .sidebar-theme-btn:hover,
:root[data-theme] .sidebar-logout-btn:hover {
  background: var(--fm-hover-bg) !important;
}

:root[data-theme] .sidebar .nav-item.nav-item-row.active {
  background: var(--fm-selection-bg) !important;
  color: var(--fm-selection-text) !important;
}

:root[data-theme] .sidebar .nav-item.nav-item-row.active .nav-item-label,
:root[data-theme] .sidebar .nav-item.nav-item-row.active .nav-item-icon i {
  color: var(--fm-selection-text) !important;
}

:root[data-theme] .sidebar-theme-btn {
  margin-top: auto !important;
  width: calc(100% + 22px) !important;
  min-height: 30px;
  margin-left: -12px !important;
  margin-right: -10px !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 6px 12px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
}

:root[data-theme] .sidebar-logout-btn {
  margin-top: 3px !important;
}

:root[data-theme="dark"] .theme-icon-dark,
:root[data-theme="dark"] .theme-label-dark,
:root[data-theme="light"] .theme-icon-light,
:root[data-theme="light"] .theme-label-light {
  display: none !important;
}

:root[data-theme="dark"] .theme-icon-light,
:root[data-theme="dark"] .theme-label-light,
:root[data-theme="light"] .theme-icon-dark,
:root[data-theme="light"] .theme-label-dark {
  display: inline-flex !important;
}

:root[data-theme] .sidebar-collapse-toggle {
  background: var(--fm-surface-raised) !important;
  border-color: var(--fm-border-strong) !important;
  color: var(--fm-focus-ring) !important;
}

:root[data-theme] .home-tile,
:root[data-theme] .tile,
:root[data-theme] .glass,
:root[data-theme] .cb-tile,
:root[data-theme] .country-page-tile,
:root[data-theme] .crossassetvol-page-tile,
:root[data-theme] .sentiment-tile,
:root[data-theme] .positioning-context-card,
:root[data-theme] .correlation-summary-card,
:root[data-theme] .risk-pro-card,
:root[data-theme] .risk-pro-driver-card,
:root[data-theme] .risk-preview-section,
:root[data-theme] .risk-preview-tab-summary,
:root[data-theme] .cal2-risk-preview-panel,
:root[data-theme] .cal2-event-tab-content,
:root[data-theme] .currency-profile-hero,
:root[data-theme] .currency-profile-driver-card,
:root[data-theme] .currency-profile-knowledge-card,
:root[data-theme] .currency-profile-relationship-card,
:root[data-theme] .currency-model-alert-card,
:root[data-theme] .fxi-tile,
:root[data-theme] .fxi-panel,
:root[data-theme] .fxi-call-card,
:root[data-theme] .fxi-composite-card,
:root[data-theme] .fxi-evidence-card,
:root[data-theme] .fxi-detail-card,
:root[data-theme] .fundamental-report-content,
:root[data-theme] .modal-shell,
:root[data-theme] .modal-content,
:root[data-theme] .offcanvas,
:root[data-theme] .currency-info-modal-shell,
:root[data-theme] .fxi-modal-shell {
  background-color: var(--fm-surface-1) !important;
  border-color: var(--fm-border-subtle) !important;
  color: var(--fm-text-primary);
}

:root[data-theme] .home-tile,
:root[data-theme] .cb-tile,
:root[data-theme] .country-page-tile,
:root[data-theme] .crossassetvol-page-tile {
  border: 1px solid transparent !important;
  background: linear-gradient(var(--fm-surface-1), var(--fm-surface-1)) padding-box,
              var(--fm-brand-gradient) border-box !important;
}

:root[data-theme] .modal-overlay,
:root[data-theme] .modal-backdrop,
:root[data-theme] .offcanvas-backdrop,
:root[data-theme] .currency-info-modal-overlay {
  background-color: var(--fm-overlay) !important;
}

:root[data-theme] .Select-control,
:root[data-theme] .Select-menu-outer,
:root[data-theme] .Select-menu,
:root[data-theme] .Select-option,
:root[data-theme] .VirtualizedSelectOption,
:root[data-theme] .DateInput,
:root[data-theme] .DateInput_input,
:root[data-theme] .DateRangePickerInput,
:root[data-theme] .DateRangePicker_picker,
:root[data-theme] .CalendarMonth,
:root[data-theme] .CalendarMonthGrid,
:root[data-theme] .DayPicker,
:root[data-theme] .form-control,
:root[data-theme] .form-select {
  background: var(--fm-surface-2) !important;
  border-color: var(--fm-border-subtle) !important;
  color: var(--fm-text-primary) !important;
}

:root[data-theme] .Select-menu-outer,
:root[data-theme] .DateRangePicker_picker {
  z-index: 10050 !important;
  box-shadow: 0 14px 34px var(--fm-shadow) !important;
}

:root[data-theme] .Select-option:hover,
:root[data-theme] .Select-option.is-focused,
:root[data-theme] .VirtualizedSelectFocusedOption {
  background: var(--fm-hover-bg) !important;
  color: var(--fm-text-primary) !important;
}

:root[data-theme] .Select-option.is-selected,
:root[data-theme] .VirtualizedSelectSelectedOption,
:root[data-theme] .CalendarDay__selected {
  background: var(--fm-selection-bg) !important;
  color: var(--fm-selection-text) !important;
}

:root[data-theme] .ag-theme-alpine,
:root[data-theme] .ag-theme-alpine-dark,
:root[data-theme] .ag-theme-quartz,
:root[data-theme] .ag-theme-quartz-dark {
  --ag-background-color: var(--fm-surface-1);
  --ag-foreground-color: var(--fm-text-primary);
  --ag-header-background-color: var(--fm-surface-2);
  --ag-header-foreground-color: var(--fm-text-secondary);
  --ag-row-hover-color: var(--fm-hover-bg);
  --ag-selected-row-background-color: var(--fm-selection-bg);
  --ag-border-color: var(--fm-border-subtle);
  --ag-row-border-color: var(--fm-border-subtle);
  --ag-menu-background-color: var(--fm-surface-raised);
  --ag-tooltip-background-color: var(--fm-surface-raised);
}

:root[data-theme] .ag-root-wrapper,
:root[data-theme] .ag-root,
:root[data-theme] .ag-body-viewport,
:root[data-theme] .ag-center-cols-viewport,
:root[data-theme] .ag-center-cols-container,
:root[data-theme] .ag-row,
:root[data-theme] .ag-cell {
  background-color: var(--fm-surface-1) !important;
  border-color: var(--fm-border-subtle) !important;
  color: var(--fm-text-primary);
}

:root[data-theme] .ag-header,
:root[data-theme] .ag-header-viewport,
:root[data-theme] .ag-header-container,
:root[data-theme] .ag-header-cell {
  background-color: var(--fm-surface-2) !important;
  border-color: var(--fm-border-subtle) !important;
  color: var(--fm-text-secondary) !important;
}

:root[data-theme] .ag-row-hover {
  background-color: var(--fm-hover-bg) !important;
}

:root[data-theme] .ag-row-selected {
  background-color: var(--fm-selection-bg) !important;
}

:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] h4,
:root[data-theme="light"] h5,
:root[data-theme="light"] h6,
:root[data-theme="light"] label,
:root[data-theme="light"] .tile-title,
:root[data-theme="light"] .country-tile-title,
:root[data-theme="light"] .currency-profile-section-title,
:root[data-theme="light"] .fxi-detail-name,
:root[data-theme="light"] .fxi-detail-card-title {
  color: var(--fm-text-primary) !important;
}

:root[data-theme] .js-plotly-plot .bg {
  fill: var(--fm-surface-1) !important;
}

:root[data-theme] .js-plotly-plot .gridlayer path {
  stroke: var(--fm-chart-grid) !important;
}

:root[data-theme] .js-plotly-plot .zerolinelayer path {
  stroke: var(--fm-chart-reference) !important;
}

:root[data-theme] .js-plotly-plot .xtick text,
:root[data-theme] .js-plotly-plot .ytick text,
:root[data-theme] .js-plotly-plot .legendtext,
:root[data-theme] .js-plotly-plot .gtitle {
  fill: var(--fm-text-secondary) !important;
}

:root[data-theme] .cal2-forecast-blue,
:root[data-theme] .cal2-link-forecast,
:root[data-theme] .cal2-clickable-forecast,
:root[data-theme] .has-value.cal2-forecast-panel-cell {
  color: var(--fm-information) !important;
}

:root[data-theme] .cal2-actual-green,
:root[data-theme] .cal2-rev-green,
:root[data-theme] .risk-pro-value-up {
  color: var(--fm-positive) !important;
}

:root[data-theme] .cal2-actual-red,
:root[data-theme] .cal2-rev-red,
:root[data-theme] .risk-pro-value-down,
:root[data-theme] .cal2-impact-h {
  color: var(--fm-negative) !important;
}

:root[data-theme] .cal2-yellow,
:root[data-theme] .cal2-impact-m,
:root[data-theme] .risk-pro-value-flat {
  color: var(--fm-warning) !important;
}

/* ========================================================================== 
   LIGHT MODE CORRECTION PASS V2
   This is deliberately the final authority in the external stylesheet.  The
   application also contains late index-string CSS, so every legacy override
   below is scoped to light mode and uses !important where the cascade needs it.
   Analytical/semantic colours are restored at the end of the block.
   ========================================================================== */

:root[data-theme="light"] {
  --fm-chart-violet: #5F0CC7;
  --fm-chart-cobalt: #1300C2;
  --fm-chart-neutral: #596184;
  --fm-soft-positive: #E7F6EF;
  --fm-soft-negative: #FCEAEF;
  --fm-soft-warning: #FFF4D6;
  --fm-soft-information: #EAF1FF;
}

/* Neutral inline text from legacy Python layouts and modal builders. */
:root[data-theme="light"] body [style*="color: white"],
:root[data-theme="light"] body [style*="color: #fff"],
:root[data-theme="light"] body [style*="color: #FFF"],
:root[data-theme="light"] body [style*="color: #ffffff"],
:root[data-theme="light"] body [style*="color: #FFFFFF"],
:root[data-theme="light"] body [style*="color: rgb(255, 255, 255)"],
:root[data-theme="light"] body [style*="color: #fafafa"],
:root[data-theme="light"] body [style*="color: #FAFAFA"],
:root[data-theme="light"] body [style*="color: #f8fafc"],
:root[data-theme="light"] body [style*="color: #F8FAFC"],
:root[data-theme="light"] body [style*="color: #f4f4f5"],
:root[data-theme="light"] body [style*="color: #F4F4F5"],
:root[data-theme="light"] body [style*="color: #f3f4f6"],
:root[data-theme="light"] body [style*="color: #e7e9ed"],
:root[data-theme="light"] body [style*="color: #E7E9ED"],
:root[data-theme="light"] body [style*="color: #e4e4e7"],
:root[data-theme="light"] body [style*="color: #E4E4E7"] {
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] body [style*="color: rgba(255, 255, 255"],
:root[data-theme="light"] body [style*="color: rgba(255,255,255"],
:root[data-theme="light"] body [style*="color: #cfcfcf"],
:root[data-theme="light"] body [style*="color: #CFCFCF"],
:root[data-theme="light"] body [style*="color: #c9cbd1"],
:root[data-theme="light"] body [style*="color: #C9CBD1"],
:root[data-theme="light"] body [style*="color: #c9c9c9"],
:root[data-theme="light"] body [style*="color: #d4d4d8"],
:root[data-theme="light"] body [style*="color: #D4D4D8"],
:root[data-theme="light"] body [style*="color: #d1d5db"],
:root[data-theme="light"] body [style*="color: #D1D5DB"],
:root[data-theme="light"] body [style*="color: #cbd5e1"],
:root[data-theme="light"] body [style*="color: #CBD5E1"],
:root[data-theme="light"] body [style*="color: #bbb"],
:root[data-theme="light"] body [style*="color: #BBBBBB"],
:root[data-theme="light"] body [style*="color: #aaa"],
:root[data-theme="light"] body [style*="color: #AAAAAA"],
:root[data-theme="light"] body [style*="color: #9ca3af"],
:root[data-theme="light"] body [style*="color: #9CA3AF"],
:root[data-theme="light"] body [style*="color: #94a3b8"],
:root[data-theme="light"] body [style*="color: #94A3B8"],
:root[data-theme="light"] body [style*="color: #8f8f8f"],
:root[data-theme="light"] body [style*="color: #8F8F8F"] {
  color: var(--fm-text-secondary) !important;
}

/* Convert common translucent dark-mode inline cards into visible light cards. */
:root[data-theme="light"] body [style*="background: rgba(255, 255, 255, 0.03)"],
:root[data-theme="light"] body [style*="background: rgba(255,255,255,0.03)"],
:root[data-theme="light"] body [style*="background: rgba(255, 255, 255, 0.025)"],
:root[data-theme="light"] body [style*="background: rgba(255,255,255,0.025)"],
:root[data-theme="light"] body [style*="background: rgba(255, 255, 255, 0.04)"],
:root[data-theme="light"] body [style*="background: rgba(255,255,255,0.04)"],
:root[data-theme="light"] body [style*="background: rgba(255, 255, 255, 0.05)"],
:root[data-theme="light"] body [style*="background: rgba(255,255,255,0.05)"],
:root[data-theme="light"] body [style*="background: rgba(255, 255, 255, 0.055)"],
:root[data-theme="light"] body [style*="background: rgba(255,255,255,0.055)"] {
  background: var(--fm-surface-2) !important;
  border-color: var(--fm-border-subtle) !important;
}

/* Shared modal, drawer, table and control surfaces. */
:root[data-theme="light"] .modal-shell,
:root[data-theme="light"] .modal-content,
:root[data-theme="light"] .modal-header,
:root[data-theme="light"] .modal-body,
:root[data-theme="light"] .modal-footer,
:root[data-theme="light"] .offcanvas,
:root[data-theme="light"] .offcanvas-header,
:root[data-theme="light"] .offcanvas-body,
:root[data-theme="light"] .currency-info-modal-shell,
:root[data-theme="light"] .fxi-modal-shell,
:root[data-theme="light"] .fundamental-report-content {
  background: var(--fm-surface-1) !important;
  border-color: var(--fm-border-subtle) !important;
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .modal-title,
:root[data-theme="light"] .modal-body,
:root[data-theme="light"] .offcanvas-title,
:root[data-theme="light"] .offcanvas-body,
:root[data-theme="light"] .modal-shell p,
:root[data-theme="light"] .modal-shell li,
:root[data-theme="light"] .modal-shell td,
:root[data-theme="light"] .modal-shell strong {
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .dashboard-page-shell table,
:root[data-theme="light"] .dashboard-page-shell tbody,
:root[data-theme="light"] .dashboard-page-shell tr,
:root[data-theme="light"] .dashboard-page-shell td {
  border-color: var(--fm-border-subtle) !important;
}

:root[data-theme="light"] .dashboard-page-shell th {
  background: var(--fm-surface-2) !important;
  color: var(--fm-text-secondary) !important;
}

/* Buttons, tabs and pills: pale inactive controls, brand-active controls. */
:root[data-theme="light"] .btn:not(.btn-danger):not(.btn-success),
:root[data-theme="light"] .btn-secondary,
:root[data-theme="light"] .btn-ghost,
:root[data-theme="light"] .pill-btn,
:root[data-theme="light"] .curve-pill,
:root[data-theme="light"] .curve-badge,
:root[data-theme="light"] .cb-tab,
:root[data-theme="light"] .mms-tab,
:root[data-theme="light"] .core-markets-pill,
:root[data-theme="light"] .sentiment-tile-collapse-btn,
:root[data-theme="light"] .positioning-tile-collapse-btn,
:root[data-theme="light"] .tile-help-icon,
:root[data-theme="light"] .risk-preview-close,
:root[data-theme="light"] .pill-group .pill-txt {
  background: var(--fm-surface-2) !important;
  border-color: var(--fm-border-strong) !important;
  color: var(--fm-text-primary) !important;
  box-shadow: none !important;
}

:root[data-theme="light"] .btn:hover,
:root[data-theme="light"] .pill-btn:hover,
:root[data-theme="light"] .curve-pill:hover,
:root[data-theme="light"] .curve-badge:hover,
:root[data-theme="light"] .cb-tab:hover,
:root[data-theme="light"] .mms-tab:hover,
:root[data-theme="light"] .core-markets-pill:hover,
:root[data-theme="light"] .sentiment-tile-collapse-btn:hover,
:root[data-theme="light"] .positioning-tile-collapse-btn:hover,
:root[data-theme="light"] .pill-group label:hover .pill-txt {
  background: var(--fm-hover-bg) !important;
  border-color: var(--fm-action) !important;
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .active-pill,
:root[data-theme="light"] .active-filter,
:root[data-theme="light"] .pill-btn.active-pill,
:root[data-theme="light"] .curve-badge-selected,
:root[data-theme="light"] .cb-tab--selected,
:root[data-theme="light"] .mms-tab--selected,
:root[data-theme="light"] .core-markets-pill--active,
:root[data-theme="light"] label.curve-pill:has(input[type="checkbox"]:checked),
:root[data-theme="light"] .curve-pill.active,
:root[data-theme="light"] .pill-group input[type="radio"]:checked + .pill-txt,
:root[data-theme="light"] .nav-tabs .nav-link.active {
  background: var(--fm-action) !important;
  border-color: var(--fm-action) !important;
  color: var(--fm-action-text) !important;
  box-shadow: none !important;
}

/* News feed and Morning Market Summary. */
:root[data-theme="light"] #news-feed-wrapper .news-item,
:root[data-theme="light"] #news-feed-wrapper .news-cluster-members .news-item {
  background: transparent !important;
  border-color: var(--fm-border-subtle) !important;
}

:root[data-theme="light"] #news-feed-wrapper .news-item:hover,
:root[data-theme="light"] #news-feed-wrapper .news-cluster-members .news-item:hover {
  background: var(--fm-hover-bg) !important;
}

:root[data-theme="light"] #news-feed-wrapper .news-headline,
:root[data-theme="light"] #news-feed-wrapper .home-news-primary-row .news-headline,
:root[data-theme="light"] #tile-3 .news-headline {
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] #news-feed-wrapper .date,
:root[data-theme="light"] #news-feed-wrapper .time,
:root[data-theme="light"] #news-feed-wrapper .news-timezone-label,
:root[data-theme="light"] .mms-meta,
:root[data-theme="light"] .mms-updated {
  color: var(--fm-text-secondary) !important;
}

:root[data-theme="light"] #news-feed-wrapper .news-timestamp {
  border-color: var(--fm-border-subtle) !important;
}

:root[data-theme="light"] #news-feed-wrapper .news-cluster-badge {
  background: var(--fm-selection-bg) !important;
  border-color: #B99AEC !important;
  color: var(--fm-action) !important;
}

:root[data-theme="light"] #news-feed-wrapper .news-analysis-badge {
  background: var(--fm-soft-information) !important;
  border-color: #93B6EF !important;
  color: var(--fm-information) !important;
}

:root[data-theme="light"] #news-feed-wrapper .news-item.news-importance-level-3,
:root[data-theme="light"] #news-feed-wrapper .news-item.news-importance-level-3:hover {
  background: var(--fm-soft-negative) !important;
}

:root[data-theme="light"] .mms-meta,
:root[data-theme="light"] .mms-body,
:root[data-theme="light"] .mms-current-document,
:root[data-theme="light"] .mms-current-sections,
:root[data-theme="light"] .mms-wrap-drivers,
:root[data-theme="light"] .mms-weekly-wrap,
:root[data-theme="light"] .mms-story-wrap,
:root[data-theme="light"] .mms-weekly-summary,
:root[data-theme="light"] .mms-story-summary,
:root[data-theme="light"] .mms-weekly-card-body,
:root[data-theme="light"] .mms-weekly-section-body,
:root[data-theme="light"] .mms-story-card-body,
:root[data-theme="light"] .mms-day-body,
:root[data-theme="light"] #morning-summary-modal-body {
  background: transparent !important;
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .mms-body strong,
:root[data-theme="light"] .mms-body b {
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .mms-wrap-headline,
:root[data-theme="light"] .mms-weekly-headline,
:root[data-theme="light"] .mms-story-headline,
:root[data-theme="light"] .mms-weekly-card-title,
:root[data-theme="light"] .mms-weekly-section-title,
:root[data-theme="light"] .mms-story-card-title,
:root[data-theme="light"] .mms-day-title,
:root[data-theme="light"] .mms-day-strip-label {
  color: var(--fm-action) !important;
}

:root[data-theme="light"] .mms-weekly-note {
  color: var(--fm-text-secondary) !important;
}

/* Major Asset Performance and professional Risk Sentiment cards. */
:root[data-theme="light"] .perf-header-row,
:root[data-theme="light"] .perf-sort-button,
:root[data-theme="light"] .perf-symbol {
  color: var(--fm-text-primary) !important;
  border-color: var(--fm-border-subtle) !important;
}

:root[data-theme="light"] .perf-header-row {
  color: var(--fm-text-secondary) !important;
  border-color: var(--fm-border-strong) !important;
}

:root[data-theme="light"] .perf-sort-button i {
  color: var(--fm-action) !important;
}

:root[data-theme="light"] .perf-bar {
  background: #E4E7F0 !important;
}

:root[data-theme="light"] .perf-bar::before {
  background: #8A92AD !important;
}

:root[data-theme="light"] .risk-pro-card,
:root[data-theme="light"] .risk-pro-driver-card {
  background: var(--fm-surface-1) !important;
  border-color: var(--fm-border-subtle) !important;
  box-shadow: 0 8px 22px var(--fm-shadow) !important;
}

:root[data-theme="light"] .risk-pro-metric,
:root[data-theme="light"] .risk-pro-driver-rank,
:root[data-theme="light"] .asset-sentiment-modal-metric {
  background: var(--fm-surface-2) !important;
  border-color: var(--fm-border-subtle) !important;
}

:root[data-theme="light"] .risk-pro-score,
:root[data-theme="light"] .risk-pro-overview-copy,
:root[data-theme="light"] .risk-pro-driver-title {
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .risk-pro-eyebrow,
:root[data-theme="light"] .risk-pro-score-unit,
:root[data-theme="light"] .risk-pro-zone-label,
:root[data-theme="light"] .risk-pro-metric-label,
:root[data-theme="light"] .risk-pro-spectrum-labels,
:root[data-theme="light"] .risk-pro-snapshot,
:root[data-theme="light"] .risk-pro-ranked-label,
:root[data-theme="light"] .risk-pro-driver-description,
:root[data-theme="light"] .risk-pro-empty,
:root[data-theme="light"] .asset-sentiment-modal-metric-label {
  color: var(--fm-text-secondary) !important;
}

:root[data-theme="light"] .risk-pro-mini-pill,
:root[data-theme="light"] .risk-pro-count-pill {
  background: var(--fm-surface-3) !important;
  border-color: var(--fm-border-strong) !important;
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .risk-pro-divider,
:root[data-theme="light"] .risk-pro-metrics-grid {
  border-color: var(--fm-border-subtle) !important;
}

/* Calendar page, AG Grid and Risk Event Analysis drawer. */
:root[data-theme="light"] .calendar-v2-page,
:root[data-theme="light"] .calendar-v2-page .cal2-main {
  background: var(--fm-page-bg) !important;
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] #cal2-grid .ag-root-wrapper,
:root[data-theme="light"] #cal2-grid .ag-root,
:root[data-theme="light"] #cal2-grid .ag-body-viewport,
:root[data-theme="light"] #cal2-grid .ag-center-cols-viewport,
:root[data-theme="light"] #cal2-grid .ag-center-cols-container,
:root[data-theme="light"] #cal2-grid .ag-row,
:root[data-theme="light"] #cal2-grid .ag-cell {
  background: var(--fm-surface-1) !important;
  border-color: var(--fm-border-subtle) !important;
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] #cal2-grid .ag-header,
:root[data-theme="light"] #cal2-grid .ag-header-cell {
  background: var(--fm-surface-2) !important;
  color: var(--fm-text-secondary) !important;
}

:root[data-theme="light"] #cal2-grid .ag-row-hover .ag-cell {
  background: var(--fm-hover-bg) !important;
}

:root[data-theme="light"] #cal2-grid .ag-row-selected .ag-cell {
  background: var(--fm-selection-bg) !important;
}

:root[data-theme="light"] .offcanvas.cal2-risk-preview-panel,
:root[data-theme="light"] .cal2-risk-preview-panel.offcanvas,
:root[data-theme="light"] .risk-preview-header,
:root[data-theme="light"] .risk-preview-controls,
:root[data-theme="light"] .cal2-event-panel-tabs,
:root[data-theme="light"] .cal2-event-tab-content,
:root[data-theme="light"] .risk-preview-tab-summary {
  background: var(--fm-surface-1) !important;
  border-color: var(--fm-border-subtle) !important;
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .cal2-event-panel-tabs .nav-link {
  background: transparent !important;
  color: var(--fm-text-secondary) !important;
  border-color: transparent !important;
}

:root[data-theme="light"] .cal2-event-panel-tabs .nav-link:hover {
  background: var(--fm-hover-bg) !important;
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .cal2-event-panel-tabs .nav-link.active {
  background: var(--fm-selection-bg) !important;
  color: var(--fm-action) !important;
  border-color: #B99AEC !important;
  border-bottom-color: var(--fm-surface-1) !important;
}

:root[data-theme="light"] .risk-preview-native-select.form-select,
:root[data-theme="light"] .risk-preview-native-select.form-select option,
:root[data-theme="light"] .risk-preview-native-select.form-select optgroup,
:root[data-theme="light"] .risk-preview-select .Select-control,
:root[data-theme="light"] .risk-preview-select .select__control,
:root[data-theme="light"] .risk-preview-select .Select-menu-outer,
:root[data-theme="light"] .risk-preview-select .select__menu,
:root[data-theme="light"] .risk-preview-select .Select-menu,
:root[data-theme="light"] .risk-preview-select .Select-option,
:root[data-theme="light"] .risk-preview-select .VirtualizedSelectOption,
:root[data-theme="light"] .risk-preview-select .select__menu-list,
:root[data-theme="light"] .risk-preview-select .select__option {
  color-scheme: light !important;
  background: var(--fm-surface-2) !important;
  border-color: var(--fm-border-subtle) !important;
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .risk-preview-select .Select-option.is-focused,
:root[data-theme="light"] .risk-preview-select .Select-option.is-selected,
:root[data-theme="light"] .risk-preview-select .VirtualizedSelectFocusedOption,
:root[data-theme="light"] .risk-preview-select .select__option--is-focused,
:root[data-theme="light"] .risk-preview-select .select__option--is-selected {
  background: var(--fm-selection-bg) !important;
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .risk-preview-select .Select-value-label,
:root[data-theme="light"] .risk-preview-select .Select-placeholder,
:root[data-theme="light"] .risk-preview-select .Select-input > input,
:root[data-theme="light"] .risk-preview-select .select__single-value,
:root[data-theme="light"] .risk-preview-select .select__placeholder,
:root[data-theme="light"] .risk-preview-select .select__input-container {
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .risk-preview-summary-card,
:root[data-theme="light"] .risk-preview-section,
:root[data-theme="light"] .risk-preview-metric-guide,
:root[data-theme="light"] .risk-preview-asset-card,
:root[data-theme="light"] .risk-preview-sample-block,
:root[data-theme="light"] .risk-preview-component-details,
:root[data-theme="light"] .risk-preview-release-detail,
:root[data-theme="light"] .risk-preview-primary-panel,
:root[data-theme="light"] .risk-preview-empty,
:root[data-theme="light"] .risk-preview-unavailable {
  background: var(--fm-surface-2) !important;
  border-color: var(--fm-border-subtle) !important;
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .risk-preview-title,
:root[data-theme="light"] .risk-preview-tab-title,
:root[data-theme="light"] .risk-preview-summary-value,
:root[data-theme="light"] .risk-preview-section-title,
:root[data-theme="light"] .risk-preview-component-name,
:root[data-theme="light"] .risk-preview-scenario-copy,
:root[data-theme="light"] .risk-preview-takeaway,
:root[data-theme="light"] .risk-preview-asset-move,
:root[data-theme="light"] .risk-preview-insight-copy,
:root[data-theme="light"] .risk-preview-cross-asset-list,
:root[data-theme="light"] .risk-preview-sample-metrics strong,
:root[data-theme="light"] .risk-preview-sample-empty,
:root[data-theme="light"] .risk-preview-component-details > summary,
:root[data-theme="light"] .risk-preview-release-detail > summary,
:root[data-theme="light"] .risk-preview-primary-subtitle {
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .risk-preview-subtitle,
:root[data-theme="light"] .risk-preview-control label,
:root[data-theme="light"] .risk-preview-summary-label,
:root[data-theme="light"] .risk-preview-section-note,
:root[data-theme="light"] .risk-preview-component-table th,
:root[data-theme="light"] .risk-preview-metric-guide,
:root[data-theme="light"] .risk-preview-ric,
:root[data-theme="light"] .risk-preview-confidence-message,
:root[data-theme="light"] .risk-preview-scenario-stats span,
:root[data-theme="light"] .risk-preview-asset-class,
:root[data-theme="light"] .risk-preview-asset-stats,
:root[data-theme="light"] .risk-preview-chart-selector-label,
:root[data-theme="light"] .risk-preview-analogue-head span,
:root[data-theme="light"] .risk-preview-analogue-stats,
:root[data-theme="light"] .risk-preview-sample-metrics span,
:root[data-theme="light"] .risk-preview-release-detail > summary span:last-child,
:root[data-theme="light"] .risk-preview-release-table th,
:root[data-theme="light"] .risk-preview-horizon-table th,
:root[data-theme="light"] .risk-preview-primary-criteria,
:root[data-theme="light"] .risk-preview-caveat-list {
  color: var(--fm-text-secondary) !important;
}

:root[data-theme="light"] .risk-preview-kicker,
:root[data-theme="light"] .risk-preview-scenario-name,
:root[data-theme="light"] .risk-preview-metric-guide strong,
:root[data-theme="light"] .risk-preview-insight-label,
:root[data-theme="light"] .risk-preview-primary-title {
  color: var(--fm-action) !important;
}

:root[data-theme="light"] .risk-preview-component-table th:first-child,
:root[data-theme="light"] .risk-preview-component-table td:first-child {
  background: var(--fm-surface-2) !important;
}

:root[data-theme="light"] .risk-preview-chart-selector-option {
  background: var(--fm-surface-3) !important;
  border-color: #B99AEC !important;
  color: var(--fm-action) !important;
}

:root[data-theme="light"] .risk-preview-chart-selector-option:has(input:checked) {
  background: var(--fm-action) !important;
  color: var(--fm-action-text) !important;
}

/* Central Banks, Positioning and Retail Sentiment. */
:root[data-theme="light"] .rate-card.rate-card--glassy tbody tr,
:root[data-theme="light"] .cb-tile .rate-card tbody tr,
:root[data-theme="light"] #positioning-table .positioning-overview-table td {
  background: var(--fm-surface-1) !important;
  color: var(--fm-text-primary) !important;
  border-color: var(--fm-border-subtle) !important;
  box-shadow: none !important;
}

:root[data-theme="light"] .rate-card.rate-card--glassy tbody tr:nth-child(even),
:root[data-theme="light"] .cb-tile .rate-card tbody tr:nth-child(even),
:root[data-theme="light"] #positioning-table .positioning-overview-row:nth-child(even) td {
  background: var(--fm-surface-2) !important;
}

:root[data-theme="light"] .rate-card.rate-card--glassy tbody tr:hover,
:root[data-theme="light"] .cb-tile .rate-card tbody tr:hover,
:root[data-theme="light"] #positioning-table .positioning-overview-row:hover td {
  background: var(--fm-hover-bg) !important;
}

:root[data-theme="light"] .cb-tile .rate-card thead th,
:root[data-theme="light"] #positioning-table .positioning-overview-table th {
  background: var(--fm-surface-2) !important;
  color: var(--fm-text-secondary) !important;
  border-color: var(--fm-border-subtle) !important;
}

:root[data-theme="light"] #cb-news-modal .modal-shell,
:root[data-theme="light"] #cb-news-modal .cb-news-body,
:root[data-theme="light"] #cb-news-modal #cb-news-modal-body {
  background: var(--fm-surface-1) !important;
  color: var(--fm-text-primary) !important;
  border-color: var(--fm-border-subtle) !important;
}

:root[data-theme="light"] .cb-news-row,
:root[data-theme="light"] .cb-news-row .news-headline,
:root[data-theme="light"] .cb-news-body .news-headline,
:root[data-theme="light"] #tile-3 .news-headline {
  color: var(--fm-text-primary) !important;
  border-color: var(--fm-border-subtle) !important;
}

:root[data-theme="light"] #positioning-table .positioning-asset-cell,
:root[data-theme="light"] #positioning-table .positioning-open-interest,
:root[data-theme="light"] .positioning-context-name,
:root[data-theme="light"] .positioning-context-metric-value,
:root[data-theme="light"] .positioning-context-flow-value,
:root[data-theme="light"] .positioning-context-narrative {
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .positioning-context-hero,
:root[data-theme="light"] .positioning-context-section,
:root[data-theme="light"] .positioning-context-metric,
:root[data-theme="light"] .positioning-context-rationale {
  background: var(--fm-surface-2) !important;
  border-color: var(--fm-border-subtle) !important;
  box-shadow: none !important;
}

:root[data-theme="light"] .positioning-context-kicker,
:root[data-theme="light"] .positioning-context-date,
:root[data-theme="light"] .positioning-context-metric-label,
:root[data-theme="light"] .positioning-context-section-title,
:root[data-theme="light"] .positioning-context-section-note,
:root[data-theme="light"] .positioning-context-flow-name,
:root[data-theme="light"] .positioning-context-percentile-row,
:root[data-theme="light"] .positioning-context-rationale-label,
:root[data-theme="light"] .positioning-context-reason,
:root[data-theme="light"] .positioning-previous-value,
:root[data-theme="light"] .positioning-percentile-value {
  color: var(--fm-text-secondary) !important;
}

:root[data-theme="light"] .positioning-context-chip {
  background: var(--fm-selection-bg) !important;
  border-color: #B99AEC !important;
  color: var(--fm-action) !important;
}

:root[data-theme="light"] #retail-sentiment-tile-1,
:root[data-theme="light"] #retail-sentiment-tile-2,
:root[data-theme="light"] #retail-sentiment-tile-3,
:root[data-theme="light"] #retail-sentiment-tile-3-body,
:root[data-theme="light"] #retail-sentiment-tile-3-body .tile-inner,
:root[data-theme="light"] #retail-sentiment-tile-3-body .tile-inner-strong,
:root[data-theme="light"] #retail-sentiment-tile-3-body .tile-card {
  background: var(--fm-surface-1) !important;
  border-color: var(--fm-border-subtle) !important;
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] #retail-sentiment-tile-3-body td,
:root[data-theme="light"] #retail-sentiment-tile-3-body th,
:root[data-theme="light"] #retail-sentiment-tile-3-body li,
:root[data-theme="light"] #retail-sentiment-tile-3-body p,
:root[data-theme="light"] #retail-sentiment-tile-3-body strong {
  color: var(--fm-text-primary) !important;
  border-color: var(--fm-border-subtle) !important;
}

/* Plotly chrome plus exact remaps for pale dark-mode traces.  Heatmaps, risk
   gauges, red/green semantics and relative-performance bars are untouched. */
:root[data-theme="light"] .js-plotly-plot .main-svg,
:root[data-theme="light"] .js-plotly-plot .bg {
  background: transparent !important;
  fill: var(--fm-surface-1) !important;
}

:root[data-theme="light"] .js-plotly-plot .scatterlayer path[style*="stroke: rgb(255, 255, 255)"],
:root[data-theme="light"] .js-plotly-plot .scatterlayer path[style*="stroke: rgb(248, 250, 252)"],
:root[data-theme="light"] .js-plotly-plot .scatterlayer path[style*="stroke: rgb(229, 231, 235)"],
:root[data-theme="light"] .js-plotly-plot .scatterlayer path[style*="stroke: rgb(203, 213, 225)"] {
  stroke: var(--fm-chart-neutral) !important;
}

:root[data-theme="light"] .js-plotly-plot .scatterlayer path[style*="stroke: rgb(200, 182, 255)"],
:root[data-theme="light"] .js-plotly-plot .scatterlayer path[style*="stroke: rgb(218, 195, 255)"],
:root[data-theme="light"] .js-plotly-plot .scatterlayer path[style*="stroke: rgb(176, 149, 226)"],
:root[data-theme="light"] .js-plotly-plot .scatterlayer path[style*="stroke: rgb(167, 139, 250)"],
:root[data-theme="light"] .js-plotly-plot .scatterlayer path[style*="stroke: rgb(196, 181, 253)"] {
  stroke: var(--fm-chart-violet) !important;
}

:root[data-theme="light"] .js-plotly-plot .scatterlayer path[style*="fill: rgb(200, 182, 255)"],
:root[data-theme="light"] .js-plotly-plot .scatterlayer path[style*="fill: rgb(218, 195, 255)"],
:root[data-theme="light"] .js-plotly-plot .scatterlayer path[style*="fill: rgb(176, 149, 226)"],
:root[data-theme="light"] .js-plotly-plot .scatterlayer path[style*="fill: rgb(167, 139, 250)"] {
  fill: var(--fm-chart-violet) !important;
}

:root[data-theme="light"] .js-plotly-plot .xtick text,
:root[data-theme="light"] .js-plotly-plot .ytick text,
:root[data-theme="light"] .js-plotly-plot .legendtext,
:root[data-theme="light"] .js-plotly-plot .gtitle,
:root[data-theme="light"] .js-plotly-plot .xtitle,
:root[data-theme="light"] .js-plotly-plot .ytitle,
:root[data-theme="light"] .js-plotly-plot .annotation-text {
  fill: var(--fm-text-secondary) !important;
  color: var(--fm-text-secondary) !important;
}

/* Reassert analytical semantics after all neutral-light corrections. */
:root[data-theme="light"] .is-positive,
:root[data-theme="light"] .is-bullish,
:root[data-theme="light"] .cal2-actual-green,
:root[data-theme="light"] .cal2-rev-green,
:root[data-theme="light"] .risk-pro-value-up,
:root[data-theme="light"] .risk-preview-asset-move--positive,
:root[data-theme="light"] .risk-preview-horizon--positive,
:root[data-theme="light"] .positioning-context-up,
:root[data-theme="light"] .positioning-signal-positive,
:root[data-theme="light"] .fxi-tone--bullish {
  color: var(--fm-positive) !important;
}

:root[data-theme="light"] .is-negative,
:root[data-theme="light"] .is-bearish,
:root[data-theme="light"] .cal2-actual-red,
:root[data-theme="light"] .cal2-rev-red,
:root[data-theme="light"] .cal2-impact-h,
:root[data-theme="light"] .risk-pro-value-down,
:root[data-theme="light"] .risk-preview-asset-move--negative,
:root[data-theme="light"] .risk-preview-horizon--negative,
:root[data-theme="light"] .positioning-context-down,
:root[data-theme="light"] .positioning-signal-negative,
:root[data-theme="light"] .fxi-tone--bearish {
  color: var(--fm-negative) !important;
}

:root[data-theme="light"] .is-warning,
:root[data-theme="light"] .cal2-yellow,
:root[data-theme="light"] .cal2-impact-m,
:root[data-theme="light"] .risk-pro-value-flat,
:root[data-theme="light"] .positioning-context-neutral {
  color: var(--fm-warning) !important;
}

:root[data-theme="light"] .cal2-forecast-blue,
:root[data-theme="light"] .cal2-link-forecast,
:root[data-theme="light"] .cal2-clickable-forecast,
:root[data-theme="light"] .has-value.cal2-forecast-panel-cell {
  color: var(--fm-information) !important;
}

:root[data-theme="light"] .risk-preview-state--live,
:root[data-theme="light"] .risk-preview-state--updated,
:root[data-theme="light"] .risk-preview-confidence--high {
  background: var(--fm-soft-positive) !important;
  color: var(--fm-positive) !important;
}

:root[data-theme="light"] .risk-preview-state--waiting,
:root[data-theme="light"] .risk-preview-state--partial,
:root[data-theme="light"] .risk-preview-confidence--medium {
  background: var(--fm-soft-warning) !important;
  color: var(--fm-warning) !important;
}

:root[data-theme="light"] .risk-preview-state--unavailable,
:root[data-theme="light"] .risk-preview-confidence--low {
  background: var(--fm-soft-negative) !important;
  color: var(--fm-negative) !important;
}

/* Remaining mapped component families: exact selectors beat their legacy
   high-specificity !important rules without changing the dark theme. */
:root[data-theme="light"] .pill-search-input,
:root[data-theme="light"] .pill-dd .Select-control,
:root[data-theme="light"] .pill-dropdown .Select__control,
:root[data-theme="light"] .pill-dropdown .Select__menu,
:root[data-theme="light"] .news-tag-filter-dropdown .Select-control,
:root[data-theme="light"] .news-tag-filter-dropdown .Select--multi .Select-control,
:root[data-theme="light"] .news-tag-filter-dropdown .Select-menu-outer,
:root[data-theme="light"] .news-tag-filter-dropdown .Select-option,
:root[data-theme="light"] .earnings-multi-filter .Select-control,
:root[data-theme="light"] .earnings-multi-filter .Select--multi .Select-control,
:root[data-theme="light"] .earnings-multi-filter .Select-menu-outer,
:root[data-theme="light"] .earnings-multi-filter .Select-option,
:root[data-theme="light"] #retail-sentiment-tile1-asset-dd .Select-control,
:root[data-theme="light"] #retail-sentiment-asset-dd .Select-control,
:root[data-theme="light"] #retail-sentiment-tile1-asset-dd .Select-menu-outer,
:root[data-theme="light"] #retail-sentiment-asset-dd .Select-menu-outer,
:root[data-theme="light"] #retail-sentiment-tile1-asset-dd .Select-option,
:root[data-theme="light"] #retail-sentiment-asset-dd .Select-option,
:root[data-theme="light"] #seasonality-asset-dropdown .Select-control,
:root[data-theme="light"] #seasonality-asset-dropdown .Select-menu-outer,
:root[data-theme="light"] #seasonality-asset-dropdown .Select-menu,
:root[data-theme="light"] #seasonality-asset-dropdown .Select-option,
:root[data-theme="light"] #seasonality-asset-dropdown .VirtualizedSelectOption,
:root[data-theme="light"] #cb-news-dropdown .Select-control,
:root[data-theme="light"] #cb-news-dropdown .Select-menu-outer,
:root[data-theme="light"] #cb-news-dropdown .VirtualizedSelectOption,
:root[data-theme="light"] #currency-pair-search .Select-control,
:root[data-theme="light"] #currency-pair-search .Select-menu-outer,
:root[data-theme="light"] #currency-profile-selector .Select__control,
:root[data-theme="light"] #currency-profile-selector .Select-control,
:root[data-theme="light"] #currency-profile-selector .Select__menu,
:root[data-theme="light"] #currency-profile-selector .Select-menu-outer,
:root[data-theme="light"] #currency-profile-selector .Select__menu-list,
:root[data-theme="light"] #currency-profile-selector .Select-menu,
:root[data-theme="light"] #currency-profile-selector .Select__option,
:root[data-theme="light"] #currency-profile-selector .Select-option,
:root[data-theme="light"] #currency-profile-selector .VirtualizedSelectOption,
:root[data-theme="light"] #calendar-event-filter,
:root[data-theme="light"] .calendar-single-date .SingleDatePickerInput,
:root[data-theme="light"] .calendar-single-date .SingleDatePickerInput input {
  background: var(--fm-surface-2) !important;
  border-color: var(--fm-border-subtle) !important;
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .news-tag-filter-dropdown .Select-option.is-focused,
:root[data-theme="light"] .earnings-multi-filter .Select-option.is-focused,
:root[data-theme="light"] #retail-sentiment-tile1-asset-dd .Select-option.is-focused,
:root[data-theme="light"] #retail-sentiment-asset-dd .Select-option.is-focused,
:root[data-theme="light"] #seasonality-asset-dropdown .Select-option.is-focused,
:root[data-theme="light"] #seasonality-asset-dropdown .Select-option.is-selected,
:root[data-theme="light"] #seasonality-asset-dropdown .VirtualizedSelectFocusedOption,
:root[data-theme="light"] #currency-profile-selector .Select__option--is-focused,
:root[data-theme="light"] #currency-profile-selector .Select__option--is-selected,
:root[data-theme="light"] #currency-profile-selector .Select-option.is-focused,
:root[data-theme="light"] #currency-profile-selector .Select-option.is-selected,
:root[data-theme="light"] #currency-profile-selector .VirtualizedSelectFocusedOption {
  background: var(--fm-selection-bg) !important;
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .news-tag-filter-dropdown .Select-placeholder,
:root[data-theme="light"] .news-tag-filter-dropdown .Select-input > input,
:root[data-theme="light"] .news-tag-filter-dropdown .Select-value-label,
:root[data-theme="light"] .earnings-multi-filter .Select-placeholder,
:root[data-theme="light"] .earnings-multi-filter .Select-input > input,
:root[data-theme="light"] .earnings-multi-filter .Select-value-label,
:root[data-theme="light"] #retail-sentiment-tile1-asset-dd .Select-placeholder,
:root[data-theme="light"] #retail-sentiment-asset-dd .Select-placeholder,
:root[data-theme="light"] #retail-sentiment-tile1-asset-dd .Select-value-label,
:root[data-theme="light"] #retail-sentiment-asset-dd .Select-value-label,
:root[data-theme="light"] #retail-sentiment-tile1-asset-dd .Select-input > input,
:root[data-theme="light"] #retail-sentiment-asset-dd .Select-input > input,
:root[data-theme="light"] #seasonality-asset-dropdown .Select-value-label,
:root[data-theme="light"] #seasonality-asset-dropdown .Select-placeholder,
:root[data-theme="light"] #seasonality-asset-dropdown .Select-input > input,
:root[data-theme="light"] #cb-news-dropdown .Select-placeholder,
:root[data-theme="light"] #cb-news-dropdown .Select-value-label,
:root[data-theme="light"] #currency-pair-search .Select-placeholder,
:root[data-theme="light"] #currency-pair-search .Select-value-label,
:root[data-theme="light"] #currency-pair-search .Select-input > input,
:root[data-theme="light"] #currency-profile-selector .Select__single-value,
:root[data-theme="light"] #currency-profile-selector .Select__placeholder,
:root[data-theme="light"] .pill-dd .Select-value-label,
:root[data-theme="light"] .pill-dropdown .Select__single-value,
:root[data-theme="light"] .pill-dropdown .Select__placeholder,
:root[data-theme="light"] .pill-search-input,
:root[data-theme="light"] .pill-search-input::placeholder {
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .calendar-preset,
:root[data-theme="light"] .ivol-tile-collapse-btn,
:root[data-theme="light"] .save-btn,
:root[data-theme="light"] .snapshot-button,
:root[data-theme="light"] .video-tabs .video-tab,
:root[data-theme="light"] .stocks-faq-button,
:root[data-theme="light"] .stocks-composition-panel > summary {
  background: var(--fm-surface-2) !important;
  border-color: var(--fm-border-strong) !important;
  color: var(--fm-text-primary) !important;
  box-shadow: none !important;
}

:root[data-theme="light"] .calendar-preset:hover,
:root[data-theme="light"] .ivol-tile-collapse-btn:hover,
:root[data-theme="light"] .video-tabs .video-tab:hover {
  background: var(--fm-hover-bg) !important;
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .video-tabs .video-tab--selected {
  background: var(--fm-action) !important;
  border-color: var(--fm-action) !important;
  color: var(--fm-action-text) !important;
}

/* Earnings/fundamentals, momentum and other report modals. */
:root[data-theme="light"] .quarterly-report-content,
:root[data-theme="light"] .quarterly-report-cover,
:root[data-theme="light"] .quarterly-trend-section,
:root[data-theme="light"] .quarterly-kpi-card,
:root[data-theme="light"] .quarterly-chart-panel,
:root[data-theme="light"] .quarterly-history-details,
:root[data-theme="light"] .quarterly-history-empty,
:root[data-theme="light"] .report-overview-panel,
:root[data-theme="light"] .report-bottom-line-panel,
:root[data-theme="light"] .momentum-stat-card {
  background: var(--fm-surface-2) !important;
  border-color: var(--fm-border-subtle) !important;
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .quarterly-kpi-value,
:root[data-theme="light"] .quarterly-section-heading,
:root[data-theme="light"] .quarterly-chart-title,
:root[data-theme="light"] .quarterly-history-details > summary,
:root[data-theme="light"] .quarterly-history-table td,
:root[data-theme="light"] .fundamental-report-company,
:root[data-theme="light"] .fundamental-report-badge-value,
:root[data-theme="light"] .fundamental-report-markdown h2,
:root[data-theme="light"] .fundamental-report-markdown strong,
:root[data-theme="light"] .momentum-stat-value,
:root[data-theme="light"] .momentum-help-title,
:root[data-theme="light"] .momentum-detail-copy {
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .quarterly-kpi-label,
:root[data-theme="light"] .quarterly-kpi-caption,
:root[data-theme="light"] .quarterly-chart-subtitle,
:root[data-theme="light"] .quarterly-history-table th,
:root[data-theme="light"] .quarterly-history-empty,
:root[data-theme="light"] .fundamental-report-meta,
:root[data-theme="light"] .momentum-stat-label,
:root[data-theme="light"] .momentum-stat-note,
:root[data-theme="light"] .momentum-help-copy,
:root[data-theme="light"] .momentum-help-item,
:root[data-theme="light"] .momentum-note-line {
  color: var(--fm-text-secondary) !important;
}

:root[data-theme="light"] .quarterly-history-table th {
  background: var(--fm-surface-3) !important;
}

:root[data-theme="light"] .momentum-badge--neutral {
  background: var(--fm-surface-3) !important;
  border-color: var(--fm-border-strong) !important;
  color: var(--fm-text-primary) !important;
}

/* Implied volatility overview/history tables and explanatory cards. */
:root[data-theme="light"] #ivol-tile-1 .ivol-table-scroll,
:root[data-theme="light"] #ivol-table .ivol-overview-table,
:root[data-theme="light"] #ivol-table .ivol-overview-table td,
:root[data-theme="light"] #ivol-table .ivol-overview-table td.ivol-date-cell,
:root[data-theme="light"] #ivol-table .ivol-overview-table td.ivol-asset-cell {
  background: var(--fm-surface-1) !important;
  border-color: var(--fm-border-subtle) !important;
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] #ivol-table .ivol-overview-table th,
:root[data-theme="light"] #ivol-table .ivol-overview-table th.ivol-date-cell,
:root[data-theme="light"] #ivol-table .ivol-overview-table th.ivol-asset-cell {
  background: var(--fm-surface-2) !important;
  border-color: var(--fm-border-subtle) !important;
  color: var(--fm-text-secondary) !important;
}

:root[data-theme="light"] #ivol-table .ivol-overview-table .ivol-overview-row:nth-child(even) td,
:root[data-theme="light"] #ivol-table .ivol-overview-table .ivol-history-row:nth-child(even) td,
:root[data-theme="light"] #ivol-table .ivol-overview-table .ivol-overview-row:nth-child(even) td.ivol-date-cell,
:root[data-theme="light"] #ivol-table .ivol-overview-table .ivol-overview-row:nth-child(even) td.ivol-asset-cell {
  background: var(--fm-surface-2) !important;
}

:root[data-theme="light"] #ivol-table .ivol-overview-table .ivol-overview-row:hover td,
:root[data-theme="light"] #ivol-table .ivol-overview-table .ivol-history-row:hover td,
:root[data-theme="light"] #ivol-table .ivol-overview-table .ivol-overview-row:hover td.ivol-date-cell,
:root[data-theme="light"] #ivol-table .ivol-overview-table .ivol-overview-row:hover td.ivol-asset-cell {
  background: var(--fm-hover-bg) !important;
}

:root[data-theme="light"] .ivol-check-method,
:root[data-theme="light"] .ivol-check-guide-item,
:root[data-theme="light"] .ivol-check-example,
:root[data-theme="light"] .ivol-check-summary-card,
:root[data-theme="light"] .ivol-chart-wrap {
  background: var(--fm-surface-2) !important;
  border-color: var(--fm-border-subtle) !important;
}

:root[data-theme="light"] .ivol-check-method strong,
:root[data-theme="light"] .ivol-check-timeline-step strong,
:root[data-theme="light"] .ivol-check-primary,
:root[data-theme="light"] .ivol-check-primary strong,
:root[data-theme="light"] .ivol-check-summary-card strong,
:root[data-theme="light"] .ivol-check-secondary strong {
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .ivol-check-timeline-step div > span,
:root[data-theme="light"] .ivol-check-guide-item span,
:root[data-theme="light"] .ivol-check-reading-note,
:root[data-theme="light"] .ivol-check-metric-label,
:root[data-theme="light"] .ivol-check-count,
:root[data-theme="light"] .ivol-check-secondary,
:root[data-theme="light"] .ivol-sessions-cell,
:root[data-theme="light"] .ivol-empty-state {
  color: var(--fm-text-secondary) !important;
}

/* Currency profile/alert cards. */
:root[data-theme="light"] .currency-profile-v2,
:root[data-theme="light"] .currency-profile-identity h4,
:root[data-theme="light"] .currency-profile-meter-label strong,
:root[data-theme="light"] .currency-profile-section-title,
:root[data-theme="light"] .currency-alert-section-title,
:root[data-theme="light"] .currency-profile-relationship-name,
:root[data-theme="light"] .currency-profile-corr-value,
:root[data-theme="light"] .currency-alert-summary-pill strong {
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .currency-profile-metrics,
:root[data-theme="light"] .currency-profile-narrative,
:root[data-theme="light"] .currency-profile-relationships,
:root[data-theme="light"] .currency-alert-summary-pill,
:root[data-theme="light"] .currency-alert-model-section {
  background: var(--fm-surface-2) !important;
  border-color: var(--fm-border-subtle) !important;
}

:root[data-theme="light"] .currency-profile-headline,
:root[data-theme="light"] .currency-profile-meter-note,
:root[data-theme="light"] .currency-profile-metric-disclaimer,
:root[data-theme="light"] .currency-profile-section-subtitle,
:root[data-theme="light"] .currency-alert-section-subtitle,
:root[data-theme="light"] .currency-profile-corr-period,
:root[data-theme="light"] .currency-profile-corr-empty,
:root[data-theme="light"] .currency-profile-relationship-why,
:root[data-theme="light"] .currency-profile-corr-footnote {
  color: var(--fm-text-secondary) !important;
}

/* Video, stocks and generic analytical panels. */
:root[data-theme="light"] .video-list .video-card,
:root[data-theme="light"] #video-commentary-page-tile .video-card,
:root[data-theme="light"] .stocks-page-tile,
:root[data-theme="light"] .stocks-composition-panel,
:root[data-theme="light"] .stocks-selected-panel,
:root[data-theme="light"] .stocks-detail-cards,
:root[data-theme="light"] .stocks-detail-notes,
:root[data-theme="light"] .stocks-help-modal-shell,
:root[data-theme="light"] .stocks-faq-section,
:root[data-theme="light"] .stocks-faq-entry,
:root[data-theme="light"] .stocks-report-chart-block,
:root[data-theme="light"] .stocks-mobile-card,
:root[data-theme="light"] .stocks-mobile-metric {
  background: var(--fm-surface-1) !important;
  border-color: var(--fm-border-subtle) !important;
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .video-title,
:root[data-theme="light"] #video-commentary-page-tile .video-title,
:root[data-theme="light"] .stocks-page-title,
:root[data-theme="light"] .stocks-help-header h3,
:root[data-theme="light"] .stocks-help-content h4,
:root[data-theme="light"] .stocks-report-chart-title,
:root[data-theme="light"] .stocks-mobile-company-link span,
:root[data-theme="light"] .stocks-mobile-card > details > summary,
:root[data-theme="light"] .stocks-mobile-metric strong {
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .video-date,
:root[data-theme="light"] #video-commentary-page-tile .video-date,
:root[data-theme="light"] .stocks-page-copy,
:root[data-theme="light"] .stocks-report-chart-copy,
:root[data-theme="light"] .stocks-asof-label,
:root[data-theme="light"] .stocks-result-count,
:root[data-theme="light"] .stocks-faq-intro,
:root[data-theme="light"] .stocks-help-content p,
:root[data-theme="light"] .stocks-empty-state,
:root[data-theme="light"] .stocks-mobile-limit-note,
:root[data-theme="light"] .stocks-mobile-sector,
:root[data-theme="light"] .stocks-mobile-metric span {
  color: var(--fm-text-secondary) !important;
}

:root[data-theme="light"] .play-btn {
  background: var(--fm-action) !important;
  border-color: var(--fm-action) !important;
  color: var(--fm-action-text) !important;
}

/* Dash DataTable selections and chart expansion surfaces. */
:root[data-theme="light"] .dash-cell.cell--selected,
:root[data-theme="light"] #seasonality-monthly-table .dash-cell.cell--selected .dash-cell-value,
:root[data-theme="light"] #seasonality-monthly-table td.focused,
:root[data-theme="light"] #seasonality-monthly-table td.cell--selected,
:root[data-theme="light"] #seasonality-monthly-table td.focused .dash-cell-value,
:root[data-theme="light"] #seasonality-monthly-table td.cell--selected .dash-cell-value {
  background: var(--fm-selection-bg) !important;
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] #cb-curve-modal-graph,
:root[data-theme="light"] #cb-policy-rate-modal-graph,
:root[data-theme="light"] #ivol-tile2-modal-graph,
:root[data-theme="light"] #ivol-tile3-modal-graph,
:root[data-theme="light"] #crossassetvol-modal-graph-1,
:root[data-theme="light"] #crossassetvol-modal-graph-2,
:root[data-theme="light"] #crossassetvol-modal-graph-3,
:root[data-theme="light"] #crossassetvol-modal-graph-4,
:root[data-theme="light"] #correlation-matrix-modal-graph,
:root[data-theme="light"] #correlation-rolling-modal-graph,
:root[data-theme="light"] #positioning-netpct-modal-graph,
:root[data-theme="light"] #morning-summary-content {
  background: var(--fm-surface-1) !important;
  color: var(--fm-text-primary) !important;
}

/* Modal builders also use standalone close controls rather than .btn. */
:root[data-theme="light"] .modal-close-btn,
:root[data-theme="light"] .btn-close,
:root[data-theme="light"] button[id*="modal-close"],
:root[data-theme="light"] button[id="cal2-risk-preview-close"] {
  background-color: var(--fm-surface-2) !important;
  border-color: var(--fm-border-strong) !important;
  color: var(--fm-text-primary) !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

:root[data-theme="light"] .modal-close-btn:hover,
:root[data-theme="light"] .btn-close:hover,
:root[data-theme="light"] button[id*="modal-close"]:hover,
:root[data-theme="light"] button[id="cal2-risk-preview-close"]:hover {
  background-color: var(--fm-hover-bg) !important;
  border-color: var(--fm-action) !important;
  color: var(--fm-action) !important;
}

/* ========================================================================== 
   LIGHT MODE REFINEMENT PASS V3
   Stronger canvas/control contrast, semantic pills, calendar/news hierarchy,
   chart surfaces and expanded-chart modal coverage.
   ========================================================================== */

/* All compact controls use one visible light-mode treatment. */
:root[data-theme="light"] .news-tile-collapse-btn,
:root[data-theme="light"] .sentiment-tile-collapse-btn,
:root[data-theme="light"] .positioning-tile-collapse-btn,
:root[data-theme="light"] .country-tile-collapse-btn,
:root[data-theme="light"] .crossassetvol-tile-collapse-btn,
:root[data-theme="light"] .ivol-tile-collapse-btn,
:root[data-theme="light"] .pill-btn,
:root[data-theme="light"] .curve-pill,
:root[data-theme="light"] .curve-badge,
:root[data-theme="light"] .cb-tab,
:root[data-theme="light"] .mms-tab,
:root[data-theme="light"] .core-markets-pill,
:root[data-theme="light"] .calendar-preset,
:root[data-theme="light"] .save-btn,
:root[data-theme="light"] .snapshot-button {
  background: var(--fm-control-bg) !important;
  border-color: var(--fm-border-strong) !important;
  color: var(--fm-text-primary) !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

:root[data-theme="light"] .news-tile-collapse-btn:hover,
:root[data-theme="light"] .sentiment-tile-collapse-btn:hover,
:root[data-theme="light"] .positioning-tile-collapse-btn:hover,
:root[data-theme="light"] .country-tile-collapse-btn:hover,
:root[data-theme="light"] .crossassetvol-tile-collapse-btn:hover,
:root[data-theme="light"] .ivol-tile-collapse-btn:hover,
:root[data-theme="light"] .pill-btn:hover,
:root[data-theme="light"] .curve-pill:hover,
:root[data-theme="light"] .curve-badge:hover,
:root[data-theme="light"] .cb-tab:hover,
:root[data-theme="light"] .mms-tab:hover {
  background: var(--fm-control-hover) !important;
  border-color: var(--fm-action) !important;
  color: var(--fm-action) !important;
}

:root[data-theme="light"] .active-pill,
:root[data-theme="light"] .active-filter,
:root[data-theme="light"] .curve-badge-selected,
:root[data-theme="light"] .cb-tab--selected,
:root[data-theme="light"] .mms-tab--selected,
:root[data-theme="light"] .core-markets-pill--active,
:root[data-theme="light"] .video-tabs .video-tab--selected,
:root[data-theme="light"] .nav-tabs .nav-link.active {
  background: var(--fm-action) !important;
  border-color: var(--fm-action) !important;
  color: var(--fm-action-text) !important;
}

/* Legacy React Select controls need their own high-specificity foreground. */
:root[data-theme="light"] .pill-dd .Select-control,
:root[data-theme="light"] .pill-dropdown .Select-control,
:root[data-theme="light"] .pill-dropdown .Select__control,
:root[data-theme="light"] #country-dropdown .Select-control,
:root[data-theme="light"] #country-dropdown .Select__control,
:root[data-theme="light"] .country-page-content .Select-control,
:root[data-theme="light"] .country-page-content .Select__control {
  background: var(--fm-control-bg) !important;
  border-color: var(--fm-border-strong) !important;
  color: var(--fm-text-primary) !important;
  opacity: 1 !important;
}

:root[data-theme="light"] .pill-dd .Select-value-label,
:root[data-theme="light"] .pill-dd .Select-placeholder,
:root[data-theme="light"] .pill-dd .Select-input > input,
:root[data-theme="light"] .pill-dropdown .Select-value-label,
:root[data-theme="light"] .pill-dropdown .Select-placeholder,
:root[data-theme="light"] .pill-dropdown .Select-input > input,
:root[data-theme="light"] .pill-dropdown .Select__single-value,
:root[data-theme="light"] .pill-dropdown .Select__placeholder,
:root[data-theme="light"] #country-dropdown .Select-value-label,
:root[data-theme="light"] #country-dropdown .Select-placeholder,
:root[data-theme="light"] #country-dropdown .Select__single-value,
:root[data-theme="light"] #country-dropdown .Select__placeholder,
:root[data-theme="light"] .country-page-content .Select-value-label,
:root[data-theme="light"] .country-page-content .Select-placeholder,
:root[data-theme="light"] .country-page-content .Select__single-value,
:root[data-theme="light"] .country-page-content .Select__placeholder {
  color: var(--fm-text-primary) !important;
  opacity: 1 !important;
}

:root[data-theme="light"] .pill-dd .Select-arrow,
:root[data-theme="light"] .pill-dropdown .Select-arrow,
:root[data-theme="light"] #country-dropdown .Select-arrow,
:root[data-theme="light"] .country-page-content .Select-arrow {
  border-top-color: var(--fm-text-primary) !important;
  opacity: 0.9 !important;
}

/* Add rhythm to the two densest data surfaces without changing semantics. */
:root[data-theme="light"] #news-feed-wrapper .news-item,
:root[data-theme="light"] #news-feed-wrapper .news-cluster-members .news-item {
  background: #FCFCFE !important;
  border-color: var(--fm-border-subtle) !important;
}

:root[data-theme="light"] #news-feed-wrapper .news-item:nth-child(even),
:root[data-theme="light"] #news-feed-wrapper .news-cluster-members .news-item:nth-child(even) {
  background: #F1F3F8 !important;
}

:root[data-theme="light"] #news-feed-wrapper .news-item:hover,
:root[data-theme="light"] #news-feed-wrapper .news-cluster-members .news-item:hover {
  background: var(--fm-hover-bg) !important;
}

:root[data-theme="light"] #cal2-grid .ag-row-even .ag-cell {
  background: #FCFCFE !important;
}

:root[data-theme="light"] #cal2-grid .ag-row-odd .ag-cell {
  background: #F1F3F8 !important;
}

:root[data-theme="light"] #cal2-grid .ag-row-hover .ag-cell {
  background: var(--fm-hover-bg) !important;
}

:root[data-theme="light"] #cal2-grid .ag-row-selected .ag-cell {
  background: var(--fm-selection-bg) !important;
}

/* Forecast retains the information blue; consensus Low/High use the darker
   accessible derivative of Fusion magenta so all three fields stand out. */
:root[data-theme="light"] #cal2-grid .ag-cell.cal2-forecast-blue,
:root[data-theme="light"] #cal2-grid .ag-cell.cal2-forecast-blue *,
:root[data-theme="light"] .cal2-forecast-blue,
:root[data-theme="light"] .cal2-link-forecast,
:root[data-theme="light"] .cal2-clickable-forecast,
:root[data-theme="light"] .has-value.cal2-forecast-panel-cell {
  color: var(--fm-information) !important;
  font-weight: 700 !important;
}

:root[data-theme="light"] #cal2-grid .ag-cell.cal2-yellow,
:root[data-theme="light"] #cal2-grid .ag-cell.cal2-yellow *,
:root[data-theme="light"] .cal2-yellow,
:root[data-theme="light"] .cal2-mobile-consensus {
  color: var(--fm-calendar-range) !important;
  font-weight: 700 !important;
}

/* Give Plotly a deliberate grey light surface and strengthen pale traces. */
:root[data-theme="light"] .js-plotly-plot,
:root[data-theme="light"] .js-plotly-plot .plot-container,
:root[data-theme="light"] .js-plotly-plot .svg-container,
:root[data-theme="light"] .js-plotly-plot .main-svg {
  background: var(--fm-chart-paper) !important;
}

:root[data-theme="light"] .js-plotly-plot .bg {
  fill: var(--fm-chart-plot) !important;
}

:root[data-theme="light"] .js-plotly-plot .scatterlayer path.js-line {
  stroke-opacity: 1 !important;
  stroke-width: 2.25px !important;
}

:root[data-theme="light"] .js-plotly-plot .barlayer .point path {
  fill-opacity: 0.94 !important;
  stroke-opacity: 1 !important;
}

:root[data-theme="light"] .js-plotly-plot .scatterlayer path[style*="stroke: rgb(185, 173, 188)"],
:root[data-theme="light"] .js-plotly-plot .scatterlayer path[style*="stroke: rgb(207, 207, 207)"],
:root[data-theme="light"] .js-plotly-plot .scatterlayer path[style*="stroke: rgb(201, 203, 209)"],
:root[data-theme="light"] .js-plotly-plot .scatterlayer path[style*="stroke: rgb(148, 163, 184)"],
:root[data-theme="light"] .js-plotly-plot .scatterlayer path[style*="stroke: rgb(156, 163, 175)"] {
  stroke: #596184 !important;
}

:root[data-theme="light"] .js-plotly-plot .barlayer path[style*="fill: rgb(218, 195, 255)"],
:root[data-theme="light"] .js-plotly-plot .barlayer path[style*="fill: rgb(200, 182, 255)"],
:root[data-theme="light"] .js-plotly-plot .barlayer path[style*="fill: rgb(196, 181, 253)"],
:root[data-theme="light"] .js-plotly-plot .barlayer path[style*="fill: rgb(176, 149, 226)"] {
  fill: #8B5BD6 !important;
}

/* Expanded graphs must inherit the active theme instead of their original
   black figure background, and country graphs must fill the modal body. */
:root[data-theme="light"] .modal-shell .modal-body,
:root[data-theme="light"] .modal-shell .dash-graph,
:root[data-theme="light"] .modal-shell .js-plotly-plot,
:root[data-theme="light"] .modal-shell .plot-container,
:root[data-theme="light"] .modal-shell .svg-container,
:root[data-theme="light"] .modal-shell .main-svg {
  background: var(--fm-chart-paper) !important;
  background-color: var(--fm-chart-paper) !important;
}

:root[data-theme="light"] .modal-shell .js-plotly-plot .bg {
  fill: var(--fm-chart-plot) !important;
}

:root[data-theme="light"] [id^="country-"][id$="-modal"] .modal-body {
  overflow: hidden !important;
}

:root[data-theme="light"] [id^="country-"][id$="-modal"] .modal-body > div,
:root[data-theme="light"] [id^="country-"][id$="-modal"] [id$="-modal-graph"] {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

/* ========================================================================== 
   LIGHT MODE REFINEMENT PASS V4
   Correct Plotly layer stacking and close the remaining page-specific gaps.
   ========================================================================== */

/* Plotly creates several sibling main-svg layers.  Only the plot .bg rect may
   be opaque; painting every SVG hides traces drawn in the lower layers. */
:root[data-theme="light"] .js-plotly-plot,
:root[data-theme="light"] .js-plotly-plot .plot-container,
:root[data-theme="light"] .js-plotly-plot .svg-container,
:root[data-theme="light"] .modal-shell .dash-graph,
:root[data-theme="light"] .modal-shell .js-plotly-plot,
:root[data-theme="light"] .modal-shell .plot-container,
:root[data-theme="light"] .modal-shell .svg-container {
  background: var(--fm-chart-paper) !important;
  background-color: var(--fm-chart-paper) !important;
}

:root[data-theme="light"] .js-plotly-plot .main-svg,
:root[data-theme="light"] .modal-shell .main-svg {
  background: transparent !important;
  background-color: transparent !important;
}

:root[data-theme="light"] .js-plotly-plot .main-svg .bg,
:root[data-theme="light"] .modal-shell .js-plotly-plot .main-svg .bg {
  fill: var(--fm-chart-plot) !important;
}

/* A threaded headline is wrapped in .news-cluster, so stripe the wrapper's
   primary row according to its position in the feed. */
:root[data-theme="light"] #news-feed-wrapper > .news-cluster:nth-child(odd) > .news-item {
  background: #FCFCFE !important;
}

:root[data-theme="light"] #news-feed-wrapper > .news-cluster:nth-child(even) > .news-item {
  background: #F1F3F8 !important;
}

:root[data-theme="light"] #news-feed-wrapper > .news-cluster > .news-item:hover {
  background: var(--fm-hover-bg) !important;
}

/* Calendar rows use one stable surface.  Elapsed events get a deliberately
   darker state in both themes without weakening the numeric colour rules. */
#cal2-grid .ag-row:not(.cal2-row-cbspeak):not(.cal2-row-holiday) .ag-cell {
  background: var(--fm-surface-2) !important;
}

:root[data-theme="dark"] #cal2-grid .cal2-row-past .ag-cell {
  background: #100C12 !important;
}

:root[data-theme="light"] #cal2-grid .cal2-row-past .ag-cell {
  background: var(--fm-surface-3) !important;
}

#cal2-grid .ag-row-hover .ag-cell {
  background: var(--fm-hover-bg) !important;
}

#cal2-grid .ag-row-selected .ag-cell {
  background: var(--fm-selection-bg) !important;
}

:root[data-theme="light"] #cal2-grid .ag-cell.cal2-actual-green,
:root[data-theme="light"] #cal2-grid .ag-cell.cal2-actual-green * {
  color: var(--fm-positive) !important;
  font-weight: 700 !important;
}

:root[data-theme="light"] #cal2-grid .ag-cell.cal2-actual-red,
:root[data-theme="light"] #cal2-grid .ag-cell.cal2-actual-red * {
  color: var(--fm-negative) !important;
  font-weight: 700 !important;
}

/* Asset-bias modal copy was unclassed and retained its pale dark-mode text. */
:root[data-theme="light"] #sentiment-modal-body,
:root[data-theme="light"] .asset-sentiment-modal-copy {
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .asset-sentiment-modal-updated,
:root[data-theme="light"] .asset-sentiment-modal-explainer {
  color: var(--fm-text-secondary) !important;
}

/* Seasonality's DataTable injects its own cell CSS, so override the complete
   table surface rather than only selected cells. */
:root[data-theme="light"] #seasonality-monthly-table,
:root[data-theme="light"] #seasonality-monthly-table table,
:root[data-theme="light"] #seasonality-monthly-table tbody,
:root[data-theme="light"] #seasonality-monthly-table tr,
:root[data-theme="light"] #seasonality-monthly-table td,
:root[data-theme="light"] #seasonality-monthly-table th,
:root[data-theme="light"] #seasonality-monthly-table .dash-cell-value {
  color: var(--fm-text-primary) !important;
  border-color: var(--fm-border-subtle) !important;
}

:root[data-theme="light"] #seasonality-monthly-table td {
  background: var(--fm-surface-1);
}

:root[data-theme="light"] #seasonality-monthly-table th {
  background: var(--fm-surface-2) !important;
}

/* FX Intelligence: readable copy plus decisive semantic pressure colours. */
:root[data-theme="light"] .fxi-tile,
:root[data-theme="light"] .fxi-modal-shell,
:root[data-theme="light"] .fxi-panel {
  --fxi-bull: var(--fm-positive);
  --fxi-bear: var(--fm-negative);
  --fxi-neutral: var(--fm-text-secondary);
  --fxi-accent: var(--fm-action);
}

:root[data-theme="light"] .fxi-modal-shell,
:root[data-theme="light"] .fxi-modal-shell .fxi-panel,
:root[data-theme="light"] .fxi-modal-shell .fxi-call-card,
:root[data-theme="light"] .fxi-modal-shell .fxi-composite-card,
:root[data-theme="light"] .fxi-modal-shell .fxi-evidence-card,
:root[data-theme="light"] .fxi-modal-shell .fxi-structure,
:root[data-theme="light"] .fxi-modal-shell .fxi-detail-card {
  color: var(--fm-text-primary) !important;
  border-color: var(--fm-border-subtle) !important;
}

:root[data-theme="light"] .fxi-driver-name,
:root[data-theme="light"] .fxi-detail-name,
:root[data-theme="light"] .fxi-detail-card-title h4,
:root[data-theme="light"] .fxi-structure-cell strong,
:root[data-theme="light"] .fxi-posture,
:root[data-theme="light"] .fxi-call-regime {
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .fxi-snapshot-meta,
:root[data-theme="light"] .fxi-section-heading,
:root[data-theme="light"] .fxi-eyebrow,
:root[data-theme="light"] .fxi-driver-detail,
:root[data-theme="light"] .fxi-detail-header,
:root[data-theme="light"] .fxi-structure-cell > span,
:root[data-theme="light"] .fxi-structure-cell small,
:root[data-theme="light"] .fxi-axis-label,
:root[data-theme="light"] .fxi-evidence-copy span {
  color: var(--fm-text-secondary) !important;
}

:root[data-theme="light"] .fxi-pressure-negative-zone {
  background: color-mix(in srgb, var(--fm-negative) 34%, transparent) !important;
}

:root[data-theme="light"] .fxi-pressure-positive-zone {
  background: color-mix(in srgb, var(--fm-positive) 34%, transparent) !important;
}

:root[data-theme="light"] .fxi-pressure-fill--bullish {
  background: linear-gradient(90deg, #087A49, #21A866) !important;
}

:root[data-theme="light"] .fxi-pressure-fill--bearish {
  background: linear-gradient(90deg, #D94B63, #A61F3A) !important;
}

/* Gold uses inline values from its original dark-only theme.  Scope the
   remap to this page so directional green/red values stay untouched. */
:root[data-theme="light"] .gold-dashboard-page [style*="color: white"],
:root[data-theme="light"] .gold-dashboard-page [style*="color: #F1EBFB"],
:root[data-theme="light"] .gold-dashboard-page [style*="color: #f1ebfb"],
:root[data-theme="light"] .gold-dashboard-page [style*="color: rgb(241, 235, 251)"],
:root[data-theme="light"] .gold-dashboard-page [style*="color: #9DA4D1"],
:root[data-theme="light"] .gold-dashboard-page [style*="color: #9da4d1"],
:root[data-theme="light"] .gold-dashboard-page [style*="color: rgb(157, 164, 209)"] {
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .gold-dashboard-page th,
:root[data-theme="light"] .gold-dashboard-page .gold-macro-driver-row {
  color: var(--fm-text-primary) !important;
}

.gold-macro-driver-bar {
  background: var(--fm-surface-3) !important;
}

.gold-macro-driver-zone--outer {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--fm-negative) 48%, transparent) 0%,
    color-mix(in srgb, var(--fm-negative) 12%, transparent) 48%,
    color-mix(in srgb, var(--fm-positive) 12%, transparent) 52%,
    color-mix(in srgb, var(--fm-positive) 48%, transparent) 100%) !important;
}

.gold-macro-driver-zone--inner {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--fm-negative) 72%, transparent) 0%,
    color-mix(in srgb, var(--fm-negative) 20%, transparent) 46%,
    color-mix(in srgb, var(--fm-positive) 20%, transparent) 54%,
    color-mix(in srgb, var(--fm-positive) 72%, transparent) 100%) !important;
}

.gold-macro-driver-median {
  background: var(--fm-chart-reference) !important;
}

:root[data-theme] #cal2-grid .ag-row-hover .ag-cell {
  background: var(--fm-hover-bg) !important;
}

:root[data-theme] #cal2-grid .ag-row-selected .ag-cell {
  background: var(--fm-selection-bg) !important;
}

:root[data-theme="light"] .gold-dashboard-page {
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .gold-dashboard-page [style*="color: #DAC3FF"],
:root[data-theme="light"] .gold-dashboard-page [style*="color: #dac3ff"],
:root[data-theme="light"] .gold-dashboard-page [style*="color: rgb(218, 195, 255)"] {
  color: var(--fm-action) !important;
}

:root[data-theme="light"] .gold-dashboard-page [style*="color: #86efac"],
:root[data-theme="light"] .gold-dashboard-page [style*="color: rgb(134, 239, 172)"],
:root[data-theme="light"] .gold-dashboard-page [style*="color: #34d399"],
:root[data-theme="light"] .gold-dashboard-page [style*="color: rgb(52, 211, 153)"] {
  color: var(--fm-positive) !important;
}

:root[data-theme="light"] .gold-dashboard-page [style*="color: #fca5a5"],
:root[data-theme="light"] .gold-dashboard-page [style*="color: rgb(252, 165, 165)"],
:root[data-theme="light"] .gold-dashboard-page [style*="color: #f87171"],
:root[data-theme="light"] .gold-dashboard-page [style*="color: rgb(248, 113, 113)"] {
  color: var(--fm-negative) !important;
}

.gold-macro-driver-marker {
  box-shadow: 0 0 0 2px var(--fm-surface-1) !important;
}
 
/* ========================================================================== 
   THEME REFINEMENT PASS V5
   Darker neutral surfaces, Calendar drawer parity and Central Bank chart polish.
   ========================================================================== */

/* Threaded headlines are intentionally darker than ordinary feed rows. */
:root[data-theme="light"] #news-feed-wrapper > .news-cluster > .news-item {
  background: #E1E5EF !important;
  border-color: var(--fm-border-strong) !important;
}

:root[data-theme="light"] #news-feed-wrapper > .news-cluster > .news-item:hover {
  background: #D8DDEA !important;
}

/* Upcoming Calendar rows remain lighter than the elapsed-event state. */
:root[data-theme="light"] #cal2-grid .ag-row:not(.cal2-row-past):not(.cal2-row-cbspeak):not(.cal2-row-holiday) .ag-cell {
  background: #F2F3F7 !important;
}

:root[data-theme="light"] #cal2-grid .cal2-row-past .ag-cell {
  background: var(--fm-surface-3) !important;
}

/* Calendar drawer cards use the same solid Context-card hierarchy as Positioning. */
:root[data-theme="light"] #cal2-event-indicator-pane [style*="linear-gradient"],
:root[data-theme="light"] #cal2-event-indicator-pane [style*="rgba(0, 0, 0"],
:root[data-theme="light"] #cal2-event-indicator-content > div {
  background: var(--fm-surface-2) !important;
  background-image: none !important;
  border-color: var(--fm-border-subtle) !important;
  color: var(--fm-text-primary) !important;
  box-shadow: 0 8px 22px var(--fm-shadow) !important;
}

:root[data-theme="light"] #cal2-event-indicator-pane [style*="color: white"],
:root[data-theme="light"] #cal2-event-forecast-pane [style*="color: white"],
:root[data-theme="light"] #cal2-event-indicator-pane [style*="color: rgb(255, 255, 255)"],
:root[data-theme="light"] #cal2-event-forecast-pane [style*="color: rgb(255, 255, 255)"] {
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] #cal2-event-indicator-pane .js-plotly-plot,
:root[data-theme="light"] #cal2-event-indicator-pane .plot-container,
:root[data-theme="light"] #cal2-event-indicator-pane .svg-container,
:root[data-theme="light"] #cal2-event-forecast-pane .js-plotly-plot,
:root[data-theme="light"] #cal2-event-forecast-pane .plot-container,
:root[data-theme="light"] #cal2-event-forecast-pane .svg-container {
  background: var(--fm-chart-paper) !important;
  background-color: var(--fm-chart-paper) !important;
}

:root[data-theme="light"] #cal2-event-indicator-pane .main-svg .bg,
:root[data-theme="light"] #cal2-event-forecast-pane .main-svg .bg {
  fill: var(--fm-chart-plot) !important;
}

/* Keep the selected timezone readable in both old and current React Select markup. */
:root[data-theme="light"] #cal2-timezone .Select-value-label,
:root[data-theme="light"] #cal2-timezone .Select__single-value,
:root[data-theme="light"] #cal2-timezone .Select-placeholder,
:root[data-theme="light"] #cal2-timezone .Select__placeholder {
  color: var(--fm-text-primary) !important;
  opacity: 1 !important;
}

/* Central Bank probability semantics: brand track and accessible values. */
:root[data-theme="light"] .cb-tile .rate-card .prob-bar {
  background: #C7CDDC !important;
  box-shadow: inset 0 0 0 1px #AEB6CC !important;
}

:root[data-theme="light"] .cb-tile .rate-card .prob-bar.cut .prob-fill {
  background: linear-gradient(90deg, #720FEB, #DF00FF) !important;
}

:root[data-theme="light"] .cb-tile .rate-card .prob-bar.hold .prob-fill {
  background: linear-gradient(90deg, #A56A00, #D59618) !important;
}

:root[data-theme="light"] .cb-tile .rate-card .prob-bar.hike .prob-fill {
  background: linear-gradient(90deg, #075C38, #0F9560) !important;
}

:root[data-theme="light"] .cb-tile .rate-card .badge-cut {
  background: #EEE4FF !important;
  color: #5D0BC1 !important;
  border-color: #720FEB !important;
}

:root[data-theme="light"] .cb-tile .rate-card .badge-hold {
  background: #F4E8C9 !important;
  color: #6F4900 !important;
  border-color: #B77B00 !important;
}

:root[data-theme="light"] .cb-tile .rate-card .badge-hike {
  background: #CDEEDC !important;
  color: #075C38 !important;
  border-color: #39A66F !important;
}

:root[data-theme="light"] .cb-tile .rate-card .bsp.pos { color: #087A49 !important; }
:root[data-theme="light"] .cb-tile .rate-card .bsp.neg { color: #C8324E !important; }

/* Bank Intelligence rows mirror the light/dark news hierarchy. */
:root[data-theme="light"] #tile-3-news .news-item:nth-child(odd) { background: #F7F8FB !important; }
:root[data-theme="light"] #tile-3-news .news-item:nth-child(even) { background: #E7EAF2 !important; }
:root[data-theme="light"] #tile-3-news .news-item:hover { background: var(--fm-hover-bg) !important; }

:root[data-theme="light"] #tile-3-news .cb-news-bank-pill,
:root[data-theme="light"] .cb-news-list .cb-news-bank-pill {
  background: #1300C2 !important;
  border-color: #1300C2 !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* Boxed external chart legends used by the Central Bank charts. */
.cb-chart-legend-toolbar {
  margin: 0 10px 8px !important;
  width: calc(100% - 20px) !important;
}

.cb-chart-legend-toolbar .positioning-series-toggle label {
  background: var(--fm-control-bg) !important;
  border: 1px solid var(--fm-border-strong) !important;
  border-radius: 8px !important;
  color: var(--fm-text-primary) !important;
  padding: 4px 8px !important;
}

.cb-chart-legend-toolbar .positioning-series-toggle label:has(input:checked) {
  background: var(--fm-selection-bg) !important;
  border-color: var(--fm-action) !important;
}

/* Expanded CB graphs must never retain their legacy black modal paint. */
:root[data-theme="light"] :is(#cb-curve-modal, #cb-policy-rate-modal, #cb-yearend-modal, #cb-curve-comparison-modal) .modal-body,
:root[data-theme="light"] :is(#cb-curve-modal-graph, #cb-policy-rate-modal-graph, #cb-yearend-modal-graph, #cb-curve-comparison-modal-graph),
:root[data-theme="light"] :is(#cb-curve-modal-graph, #cb-policy-rate-modal-graph, #cb-yearend-modal-graph, #cb-curve-comparison-modal-graph) .plot-container,
:root[data-theme="light"] :is(#cb-curve-modal-graph, #cb-policy-rate-modal-graph, #cb-yearend-modal-graph, #cb-curve-comparison-modal-graph) .svg-container {
  background: var(--fm-chart-paper) !important;
  background-color: var(--fm-chart-paper) !important;
}

:root[data-theme="light"] :is(#cb-curve-modal-graph, #cb-policy-rate-modal-graph, #cb-yearend-modal-graph, #cb-curve-comparison-modal-graph) .main-svg .bg {
  fill: var(--fm-chart-plot) !important;
}

:root[data-theme="light"] #tile-2 .js-plotly-plot .textpoint text,
:root[data-theme="light"] #cb-yearend-modal-graph .textpoint text {
  fill: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .fxi-composite-label,
:root[data-theme="light"] .fxi-detail-header,
:root[data-theme="light"] .fxi-driver-detail,
:root[data-theme="light"] .fxi-empty-state {
  color: var(--fm-text-secondary) !important;
}

:root[data-theme="light"] .fxi-detail-row,
:root[data-theme="light"] .fxi-evidence-copy strong,
:root[data-theme="light"] .fxi-empty-title {
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .fxi-modal-section-title,
:root[data-theme="light"] .fxi-detail-card-title > span {
  color: var(--fm-action) !important;
}

:root[data-theme="light"] .fxi-pressure-track {
  background: var(--fm-surface-3) !important;
}

:root[data-theme="light"] .fxi-pressure-negative-zone,
:root[data-theme="light"] .fxi-pressure-positive-zone {
  opacity: 1 !important;
}

:root[data-theme="light"] .fxi-pressure-centre {
  background: var(--fm-chart-reference) !important;
}

:root[data-theme="light"] .fxi-evidence-ring::after {
  background: var(--fm-surface-1) !important;
}

:root[data-theme="light"] .fxi-driver-help {
  background: var(--fm-surface-3) !important;
  border-color: var(--fm-border-strong) !important;
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .fxi-call-pill--bullish,
:root[data-theme="light"] .fxi-bias-pill--bullish {
  background: var(--fm-positive-pill-bg) !important;
  border-color: var(--fm-positive-pill-border) !important;
  color: var(--fm-positive-pill-text) !important;
}

:root[data-theme="light"] .fxi-call-pill--bearish,
:root[data-theme="light"] .fxi-bias-pill--bearish {
  background: var(--fm-negative-pill-bg) !important;
  border-color: var(--fm-negative-pill-border) !important;
  color: var(--fm-negative-pill-text) !important;
}

:root[data-theme="light"] .fxi-call-pill--neutral,
:root[data-theme="light"] .fxi-bias-pill--neutral {
  background: var(--fm-neutral-pill-bg) !important;
  border-color: var(--fm-neutral-pill-border) !important;
  color: var(--fm-neutral-pill-text) !important;
}

:root[data-theme="light"] .fxi-tone--neutral {
  color: var(--fm-neutral-pill-text) !important;
}


/* Central Bank legend controls behave as compact, colour-keyed toggle boxes. */
.cb-chart-legend-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.cb-chart-legend-toolbar .positioning-series-toggle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.cb-chart-legend-toolbar .positioning-series-toggle label {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  margin: 0 !important;
  cursor: pointer;
}

:is(#cb-curve-series-select, #cb-curve-modal-series-select) label:nth-child(1) input { accent-color: #1300C2; }
:is(#cb-curve-series-select, #cb-curve-modal-series-select) label:nth-child(2) input { accent-color: #DF00FF; }
:is(#cb-curve-series-select, #cb-curve-modal-series-select) label:nth-child(3) input { accent-color: #0D1350; }

:root[data-theme="dark"] :is(#curve-comparison-chart, #cb-curve-comparison-modal-graph, #policy-rate-chart, #cb-policy-rate-modal-graph)
  .scatterlayer path[style*="stroke: rgb(13, 19, 80)"] {
  stroke: #C8B6FF !important;
}

:root[data-theme="dark"] :is(#curve-comparison-chart, #cb-curve-comparison-modal-graph, #policy-rate-chart, #cb-policy-rate-modal-graph)
  .scatterlayer path[style*="fill: rgb(13, 19, 80)"] {
  fill: #C8B6FF !important;
}

:root[data-theme="dark"] :is(#tile-2, #cb-yearend-modal-graph)
  .barlayer path[style*="fill: rgb(13, 19, 80)"] {
  fill: #6F57E8 !important;
}


:root[data-theme="light"] #tile-2 .bartext,
:root[data-theme="light"] #cb-yearend-modal-graph .bartext {
  fill: var(--fm-text-primary) !important;
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] #policy-rate-modal-bank-filter .curve-pill,
:root[data-theme="light"] #cb-policy-rate-overview-bank-filter .curve-pill {
  background: var(--fm-control-bg) !important;
  color: var(--fm-text-primary) !important;
  border-color: var(--fm-border-strong) !important;
}

:root[data-theme="light"] #policy-rate-modal-bank-filter label.curve-pill:has(input:checked),
:root[data-theme="light"] #cb-policy-rate-overview-bank-filter label.curve-pill:has(input:checked) {
  background: var(--fm-selection-bg) !important;
  color: var(--fm-action) !important;
  border-color: var(--fm-action) !important;
}
 
/* ==========================================================================
   THEME REFINEMENT PASS V6
   Cross-dashboard interaction, modal, Calendar and contrast consistency.
   ========================================================================== */

/* Dark mode now uses near-black neutral surfaces; violet is reserved for action. */
:root[data-theme="dark"] {
  --fm-page-bg: #050407;
  --fm-sidebar-bg: #070608;
  --fm-surface-1: #0A090C;
  --fm-surface-2: #0F0D12;
  --fm-surface-3: #151119;
  --fm-surface-raised: #1B1620;
  --fm-control-bg: #17131B;
  --fm-chart-paper: #000000;
  --fm-chart-plot: #000000;
}

/* Active navigation uses the Fusion brand gradient in both themes. */
:root[data-theme] .sidebar .nav-item.nav-item-row.active,
:root[data-theme] .sidebar .nav-item.active,
:root[data-theme] .sidebar a.active {
  background: var(--fm-brand-gradient) !important;
  color: #FFFFFF !important;
  box-shadow: 0 7px 18px rgba(114, 15, 235, 0.24) !important;
}
:root[data-theme] .sidebar .nav-item.nav-item-row.active *,
:root[data-theme] .sidebar .nav-item.active *,
:root[data-theme] .sidebar a.active * {
  color: #FFFFFF !important;
}

/* Morning Summary section labels use a bright, fully opaque violet in light mode. */
:root[data-theme="light"] #morning-summary-content .mms-section-header,
:root[data-theme="light"] #morning-summary-content [style*="text-transform: uppercase"] {
  color: #720FEB !important;
  -webkit-text-fill-color: #720FEB !important;
  font-weight: 800 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Sentiment cards follow the solid Context-card hierarchy. */
:root[data-theme="light"] :is(.risk-pro-card, .risk-pro-driver-card, .risk-pro-metric) {
  background: var(--fm-surface-2) !important;
  background-image: none !important;
  border-color: var(--fm-border-subtle) !important;
  box-shadow: 0 8px 20px var(--fm-shadow) !important;
}

/* News sentiment remains a full-fill state badge; Momentum is plain text. */
.perf-sentiment-dot > span {
  border-radius: 999px !important;
  border-width: 1px !important;
  color: #FFFFFF !important;
  font-weight: 750 !important;
}
.perf-sentiment--bullish > span,
.perf-sentiment--mildly-bullish > span {
  background: #168A50 !important;
  border-color: #0F6C3E !important;
}
.perf-sentiment--bearish > span,
.perf-sentiment--mildly-bearish > span {
  background: #C8324E !important;
  border-color: #A9233C !important;
}
.perf-sentiment--neutral > span {
  background: #667085 !important;
  border-color: #4B5565 !important;
}
.perf-momentum-label {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.perf-momentum-label--bullish { color: var(--fm-positive) !important; }
.perf-momentum-label--bearish { color: var(--fm-negative) !important; }
.perf-momentum-label--neutral { color: var(--fm-text-secondary) !important; }

/* Calendar Indicator Info is always a single readable column. */
.cal2-indicator-layout,
.cal2-indicator-layout--single {
  grid-template-columns: minmax(0, 1fr) !important;
}
.cal2-indicator-comments {
  width: 100% !important;
  box-sizing: border-box !important;
  background: var(--fm-surface-3) !important;
  background-image: none !important;
  border-color: var(--fm-border-subtle) !important;
  color: var(--fm-text-primary) !important;
  box-shadow: 0 8px 22px var(--fm-shadow) !important;
}
.cal2-indicator-comments-title { color: var(--fm-text-primary) !important; }

/* Calendar toggle labels are vertically centered inside their pills. */
.cal2-date-scope,
.cal2-date-scope label { align-items: center !important; }
.cal2-date-scope label {
  height: 28px !important;
  min-height: 28px !important;
  line-height: 28px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Light Calendar charts use the same paint as the cards that contain them. */
:root[data-theme="light"] #cal2-event-forecast-pane :is(.js-plotly-plot, .plot-container, .svg-container),
:root[data-theme="light"] #cal2-event-indicator-pane :is(.js-plotly-plot, .plot-container, .svg-container) {
  background: var(--fm-surface-2) !important;
  background-color: var(--fm-surface-2) !important;
}
:root[data-theme="light"] #cal2-event-forecast-pane .main-svg .bg,
:root[data-theme="light"] #cal2-event-indicator-pane .main-svg .bg {
  fill: var(--fm-surface-2) !important;
}
:root[data-theme="light"] #cal2-event-forecast-pane .bartext,
:root[data-theme="light"] #cal2-event-indicator-pane .bartext {
  fill: var(--fm-text-primary) !important;
  color: var(--fm-text-primary) !important;
}
:root[data-theme="light"] #cal2-event-forecast-pane .textpoint text,
:root[data-theme="light"] #cal2-event-indicator-pane .textpoint text {
  fill: var(--fm-text-primary) !important;
}

/* In dark Calendar mode, upcoming rows carry emphasis; elapsed rows recede. */
:root[data-theme="dark"] #cal2-grid .ag-row:not(.cal2-row-past):not(.cal2-row-cbspeak):not(.cal2-row-holiday) .ag-cell {
  background: #08070A !important;
}
:root[data-theme="dark"] #cal2-grid .cal2-row-past .ag-cell {
  background: #151319 !important;
}
:root[data-theme="dark"] .calendar-v2-page,
:root[data-theme="dark"] .calendar-v2-page .cal2-main,
:root[data-theme="dark"] .calendar-v2-page .cal2-main.cal2-analysis-open {
  background: var(--fm-page-bg) !important;
  background-image: none !important;
}
:root[data-theme="dark"] .offcanvas-backdrop.show {
  background: #000000 !important;
  background-color: #000000 !important;
}

/* Policy-history bank controls now share Currency's boxed legend language. */
.cb-policy-bank-legend {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
}
.cb-policy-bank-legend label.curve-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 3px 7px !important;
  border: 1px solid var(--fm-border-strong) !important;
  border-radius: 999px !important;
  background: var(--fm-control-bg) !important;
  color: var(--fm-text-secondary) !important;
  box-shadow: none !important;
  font-size: 8px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
}
.cb-policy-bank-legend label.curve-pill:has(input:checked) {
  background: var(--fm-control-bg) !important;
  color: var(--fm-text-primary) !important;
  border-color: var(--fm-border-strong) !important;
}
.cb-policy-bank-legend input {
  display: inline-block !important;
  width: 10px !important;
  height: 10px !important;
  margin: 0 !important;
}
.cb-policy-bank-legend label:nth-child(1) input { accent-color: #0F9560; }
.cb-policy-bank-legend label:nth-child(2) input { accent-color: #C05A00; }
.cb-policy-bank-legend label:nth-child(3) input { accent-color: #4962A4; }
.cb-policy-bank-legend label:nth-child(4) input { accent-color: #9C3E86; }
.cb-policy-bank-legend label:nth-child(5) input { accent-color: #669B19; }
.cb-policy-bank-legend label:nth-child(6) input { accent-color: #B08300; }
.cb-policy-bank-legend label:nth-child(7) input { accent-color: #9C6C21; }
.cb-policy-bank-legend label:nth-child(8) input { accent-color: #59616E; }

/* Central-bank page tabs use the current pill system in dark mode. */
:root[data-theme="dark"] .cb-tab {
  background: var(--fm-control-bg) !important;
  color: var(--fm-text-primary) !important;
  border: 1px solid var(--fm-border-subtle) !important;
  box-shadow: none !important;
}
:root[data-theme="dark"] .cb-tab:hover {
  background: var(--fm-surface-raised) !important;
  border-color: var(--fm-border-strong) !important;
}
:root[data-theme="dark"] .cb-tab--selected {
  background: linear-gradient(135deg, #1300C2, #720FEB 58%, #DF00FF) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  box-shadow: 0 5px 14px rgba(114, 15, 235, 0.25) !important;
}

/* Expanded Plotly charts inherit the active theme instead of legacy black. */
:root[data-theme="light"] .modal-overlay .modal-body:has(.js-plotly-plot),
:root[data-theme="light"] .modal-overlay :is(.js-plotly-plot, .plot-container, .svg-container) {
  background: var(--fm-chart-paper) !important;
  background-color: var(--fm-chart-paper) !important;
}
:root[data-theme="light"] .modal-overlay .main-svg .bg {
  fill: var(--fm-chart-plot) !important;
}
:root[data-theme="light"] .modal-overlay .main-svg {
  background: transparent !important;
  background-color: transparent !important;
}
:root[data-theme="light"] .modal-overlay :is(.xtick, .ytick, .gtitle, .annotation-text) text,
:root[data-theme="light"] .modal-overlay :is(.xtick, .ytick, .gtitle, .annotation-text) {
  fill: var(--fm-text-primary) !important;
  color: var(--fm-text-primary) !important;
}

/* Central Bank News modal: force readable light-mode hierarchy. */
:root[data-theme="light"] #cb-news-modal .modal-shell,
:root[data-theme="light"] #cb-news-modal .modal-shell * {
  color: var(--fm-text-primary) !important;
}
:root[data-theme="light"] #cb-news-modal :is(.cb-news-meta, small, time) {
  color: var(--fm-text-secondary) !important;
}
:root[data-theme="light"] #cb-news-modal [style*="color: #4caf50"],
:root[data-theme="light"] #cb-news-modal [style*="color: rgb(76, 175, 80)"] {
  color: var(--fm-positive) !important;
}
:root[data-theme="light"] #cb-news-modal [style*="color: #f44336"],
:root[data-theme="light"] #cb-news-modal [style*="color: rgb(244, 67, 54)"] {
  color: var(--fm-negative) !important;
}

/* Positioning assets are links, not badges. Context bias uses full-fill states. */
#positioning-table .positioning-asset-link {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
.positioning-context-bias.positioning-context-bullish {
  background: #168A50 !important;
  border-color: #0F6C3E !important;
  color: #FFFFFF !important;
}
.positioning-context-bias.positioning-context-bearish {
  background: #C8324E !important;
  border-color: #A9233C !important;
  color: #FFFFFF !important;
}
.positioning-context-bias.positioning-context-neutral {
  background: #667085 !important;
  border-color: #4B5565 !important;
  color: #FFFFFF !important;
}

/* Retail layout stays inside the shared dashboard viewport. */
.retail-sentiment-main {
  height: 100vh !important;
  overflow: hidden !important;
}
.retail-sentiment-grid {
  height: calc(100vh - 76px) !important;
  max-height: calc(100vh - 76px) !important;
  padding-bottom: 0 !important;
}
:root[data-theme="light"] .retail-history-chart-wrap,
:root[data-theme="light"] #retail-sentiment-area,
:root[data-theme="light"] #retail-sentiment-area :is(.plot-container, .svg-container) {
  background: var(--fm-surface-2) !important;
  background-color: var(--fm-surface-2) !important;
}
:root[data-theme="light"] #retail-sentiment-area .main-svg .bg {
  fill: var(--fm-surface-2) !important;
}
:root[data-theme="light"] #retail-sentiment-tile-3-body .retail-detail-card,
:root[data-theme="light"] #retail-sentiment-tile-3-body [style*="linear-gradient"] {
  background: var(--fm-surface-2) !important;
  background-image: none !important;
  border-color: var(--fm-border-subtle) !important;
  box-shadow: 0 8px 20px var(--fm-shadow) !important;
}
:root[data-theme="light"] #retail-sentiment-tile-3-body [style*="color: white"],
:root[data-theme="light"] #retail-sentiment-tile-3-body [style*="color: #E5E7EB"],
:root[data-theme="light"] #retail-sentiment-tile-3-body [style*="color: #e5e7eb"] {
  color: var(--fm-text-primary) !important;
}

/* IV overview values remain readable while preserving semantic band colours. */
:root[data-theme="light"] #ivol-table .ivol-overview-table td,
:root[data-theme="light"] #ivol-table .ivol-overview-table td span {
  color: var(--fm-text-primary) !important;
  opacity: 1 !important;
}
:root[data-theme="light"] #ivol-table .ivol-overview-table .ivol-band-low {
  color: #0B6FA4 !important;
}
:root[data-theme="light"] #ivol-table .ivol-overview-table .ivol-band-high {
  color: #C8324E !important;
}
:root[data-theme="light"] #ivol-table .ivol-overview-table .ivol-value-iv {
  color: #5D0BC1 !important;
}

/* ========================================================================== 
   HOME PAGE THEME CONTRAST PASS
   ========================================================================== */

/* The Fusion-gradient navigation selection always needs a white foreground. */
:root[data-theme="light"] .sidebar .nav-item.nav-item-row.active,
:root[data-theme="light"] .sidebar .nav-item.nav-item-row.active .nav-item-label,
:root[data-theme="light"] .sidebar .nav-item.nav-item-row.active .nav-item-icon,
:root[data-theme="light"] .sidebar .nav-item.nav-item-row.active .nav-item-icon i,
:root[data-theme="light"] .sidebar .nav-item.nav-item-row.active .nav-item-icon i::before {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  opacity: 1 !important;
}
:root[data-theme="light"] .sidebar .nav-item.nav-item-row.active svg,
:root[data-theme="light"] .sidebar .nav-item.nav-item-row.active svg * {
  fill: #FFFFFF !important;
  stroke: #FFFFFF !important;
}
:root[data-theme="light"] .sidebar .nav-item.nav-item-row:not(.active) .nav-item-label,
:root[data-theme="light"] .sidebar .nav-item.nav-item-row:not(.active) .nav-item-icon,
:root[data-theme="light"] .sidebar .nav-item.nav-item-row:not(.active) .nav-item-icon i {
  color: var(--fm-text-primary) !important;
  -webkit-text-fill-color: var(--fm-text-primary) !important;
}

/* Importance-three stories use a brighter red tint on dark surfaces and a
   stronger, darker red tint on light surfaces. */
:root[data-theme="dark"] #news-feed-wrapper .news-item.news-importance-level-3,
:root[data-theme="dark"] #news-feed-wrapper .news-item.news-importance-level-3:hover {
  background: linear-gradient(90deg, rgba(255, 107, 125, 0.22), rgba(255, 107, 125, 0.10)) !important;
  border-left: 2px solid rgba(255, 138, 154, 0.90) !important;
}
:root[data-theme="light"] #news-feed-wrapper .news-item.news-importance-level-3,
:root[data-theme="light"] #news-feed-wrapper .news-item.news-importance-level-3:hover {
  background: linear-gradient(90deg, rgba(200, 50, 78, 0.22), rgba(200, 50, 78, 0.12)) !important;
  border-left: 2px solid #C8324E !important;
}

/* Expanded importance analysis must use light-theme foregrounds, not the
   legacy pale text intended for the dark feed. */
:root[data-theme="light"] #news-feed-wrapper .news-analysis-panel,
:root[data-theme="light"] #news-feed-wrapper .news-analysis-panel > div,
:root[data-theme="light"] #news-feed-wrapper .news-analysis-panel p,
:root[data-theme="light"] #news-feed-wrapper .news-analysis-panel span {
  color: #27305F !important;
  -webkit-text-fill-color: #27305F !important;
  opacity: 1 !important;
}
:root[data-theme="light"] #news-feed-wrapper .news-analysis-panel {
  background: rgba(255, 255, 255, 0.56) !important;
  border-left-color: #C8324E !important;
}
:root[data-theme="light"] #news-feed-wrapper .news-analysis-panel strong {
  color: #0D1350 !important;
  -webkit-text-fill-color: #0D1350 !important;
  font-weight: 800 !important;
}

/* Current, regional wraps, Week Ahead and Weekly Wrap share one accessible
   violet heading treatment in dark mode. */
:root[data-theme="dark"] :is(#morning-summary-content, #morning-summary-modal-body)
  :is(.mms-section-header, .mms-wrap-headline, .mms-weekly-headline, .mms-story-headline,
      .mms-weekly-card-title, .mms-weekly-section-title, .mms-story-card-title,
      .mms-day-title, .mms-day-strip-label) {
  color: #C8B6FF !important;
  -webkit-text-fill-color: #C8B6FF !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

/* ========================================================================== 
   CALENDAR V2 LIGHT DRAWER SURFACES
   Keep the drawer canvas white and reserve grey for the actual content cards.
   ========================================================================== */

:root[data-theme="light"] #cal2-event-indicator-pane,
:root[data-theme="light"] #cal2-event-forecast-pane,
:root[data-theme="light"] #cal2-event-indicator-content,
:root[data-theme="light"] #cal2-event-forecast-content,
:root[data-theme="light"] #cal2-event-indicator-content > div,
:root[data-theme="light"] #cal2-event-forecast-content > div,
:root[data-theme="light"] #cal2-event-indicator-content .cal2-indicator-layout,
:root[data-theme="light"] #cal2-event-indicator-content .cal2-indicator-main,
:root[data-theme="light"] #cal2-event-forecast-content .cal2-forecast-two-panel,
:root[data-theme="light"] #cal2-event-forecast-content .cal2-forecast-panel-cell {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Preserve the deliberate grey treatment on the cards themselves. */
:root[data-theme="light"] #cal2-event-indicator-content .cal2-indicator-comments,
:root[data-theme="light"] #cal2-event-forecast-content .cal2-forecast-panel-cell > div {
  background: var(--fm-surface-2) !important;
  background-color: var(--fm-surface-2) !important;
  background-image: none !important;
}

/* Plotly adds its own paper and plot layers. Paint every layer with the card
   colour so the charts do not appear as lighter inset panels. */
:root[data-theme="light"] #cal2-event-forecast-content .cal2-forecast-panel-cell
  :is(.dash-graph, .js-plotly-plot, .plot-container, .svg-container) {
  background: var(--fm-surface-2) !important;
  background-color: var(--fm-surface-2) !important;
  border: 0 !important;
  box-shadow: none !important;
}
:root[data-theme="light"] #cal2-event-forecast-content .cal2-forecast-panel-cell .main-svg {
  background: transparent !important;
  background-color: transparent !important;
}
:root[data-theme="light"] #cal2-event-forecast-content .cal2-forecast-panel-cell .main-svg .bg {
  fill: var(--fm-surface-2) !important;
}

/* Forecast cards and both Plotly surfaces share one literal theme token.  The
   SVGs remain transparent because Plotly stacks interaction SVGs over data. */
:root[data-theme="light"] #cal2-event-forecast-content .cal2-forecast-card {
  --cal2-forecast-card-bg: #DBDDE9;
  background: var(--cal2-forecast-card-bg) !important;
  background-color: var(--cal2-forecast-card-bg) !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
}
:root[data-theme="light"] #cal2-event-forecast-content .cal2-forecast-panel-cell > .cal2-forecast-card {
  background: #DBDDE9 !important;
  background-color: #DBDDE9 !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}
:root[data-theme="light"] #cal2-event-forecast-content .cal2-forecast-card
  :is(.cal2-forecast-history-content, .cal2-forecast-graph, .dash-graph,
      .js-plotly-plot, .plot-container, .svg-container) {
  background: var(--cal2-forecast-card-bg) !important;
  background-color: var(--cal2-forecast-card-bg) !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}
:root[data-theme="light"] #cal2-event-forecast-content .cal2-forecast-card svg.main-svg {
  background: transparent !important;
  background-color: transparent !important;
}
:root[data-theme="light"] #cal2-event-forecast-content .cal2-forecast-card svg.main-svg rect.bg {
  fill: var(--cal2-forecast-card-bg) !important;
}

/* The old drawer glass rule matched the Graph's transparent inline rgba
   background and reapplied an elevation shadow to the graph itself.  Flatten
   the complete chart subtree (including generated Plotly wrappers and pseudo
   elements) so the card is one uninterrupted #DBDDE9 surface. */
:root[data-theme="light"] #cal2-event-forecast-content .cal2-forecast-card *,
:root[data-theme="light"] #cal2-event-forecast-content .cal2-forecast-card *::before,
:root[data-theme="light"] #cal2-event-forecast-content .cal2-forecast-card *::after {
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Central-bank expanded charts: the canvas owns the grey paint; every Plotly
   SVG remains transparent so later interaction layers cannot hide data. */
:root[data-theme="light"]
  :is(#cb-curve-modal-graph, #cb-policy-rate-modal-graph,
      #cb-yearend-modal-graph, #cb-curve-comparison-modal-graph)
  :is(.js-plotly-plot, .plot-container, .svg-container) {
  background: var(--fm-chart-paper) !important;
  background-color: var(--fm-chart-paper) !important;
}
:root[data-theme="light"]
  :is(#cb-curve-modal-graph, #cb-policy-rate-modal-graph,
      #cb-yearend-modal-graph, #cb-curve-comparison-modal-graph) svg.main-svg {
  background: transparent !important;
  background-color: transparent !important;
}
:root[data-theme="light"]
  :is(#cb-curve-modal-graph, #cb-policy-rate-modal-graph,
      #cb-yearend-modal-graph, #cb-curve-comparison-modal-graph) svg.main-svg rect.bg {
  fill: var(--fm-chart-paper) !important;
}

/* Positioning Trend modal uses the active theme surface throughout.  This
   supersedes the legacy global modal rule that forced this graph to black. */
:root[data-theme] #positioning-netpct-modal .modal-body,
:root[data-theme] #positioning-netpct-modal-graph,
:root[data-theme] #positioning-netpct-modal-graph
  :is(.js-plotly-plot, .plot-container, .svg-container) {
  background: var(--fm-chart-paper) !important;
  background-color: var(--fm-chart-paper) !important;
  background-image: none !important;
  box-shadow: none !important;
}
:root[data-theme] #positioning-netpct-modal-graph svg.main-svg {
  background: transparent !important;
  background-color: transparent !important;
}
:root[data-theme] #positioning-netpct-modal-graph svg.main-svg rect.bg {
  fill: var(--fm-chart-paper) !important;
}

/* Asset names remain clickable text, but are visually ordinary table cells. */
#positioning-table td.positioning-asset-cell {
  border-radius: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
}
#positioning-table td.positioning-asset-cell > .positioning-asset-link {
  display: inline !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
}

/* Calendar history lookback is a readable, medium-grey control in light mode. */
:root[data-theme="light"] #cal2-forecast-dist-history-content-lookback .Select-control {
  background: #C9CBDC !important;
  border-color: #AEB2C7 !important;
  color: #0D1350 !important;
  box-shadow: none !important;
}
:root[data-theme="light"] #cal2-forecast-dist-history-content-lookback
  :is(.Select-value-label, .Select-placeholder, .Select-arrow) {
  color: #0D1350 !important;
  opacity: 1 !important;
}
:root[data-theme="light"] #cal2-forecast-dist-history-content-lookback .Select-arrow {
  border-color: #0D1350 transparent transparent !important;
}

/* Central-bank segmented controls expose their selected state explicitly. */
:root[data-theme="light"] #cb-tile-1 .pill-btn.active-pill,
:root[data-theme="light"] :is(#cb-fed-rate-source, #cb-curve-mode, #cb-curve-modal-mode) label:has(input:checked) {
  background: #720FEB !important;
  background-color: #720FEB !important;
  border-color: #720FEB !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
:root[data-theme="light"] :is(#cb-fed-rate-source, #cb-curve-mode, #cb-curve-modal-mode) label {
  border: 1px solid var(--fm-border-strong) !important;
  border-radius: 999px !important;
  padding: 3px 8px !important;
  background: var(--fm-control-bg) !important;
  color: var(--fm-text-primary) !important;
  cursor: pointer !important;
}
:root[data-theme="light"] :is(#cb-fed-rate-source, #cb-curve-mode, #cb-curve-modal-mode) input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* The Asset column is an ordinary square table cell, not a badge. */
#positioning-tile-1 .rate-card tbody tr td:nth-child(1),
#positioning-table td.positioning-asset-cell {
  border-radius: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
  background-clip: border-box !important;
}

/* Keep the Positioning route inside the same viewport frame as other pages.
   Its former 99vh grid plus page padding enlarged the flex row and pushed the
   shared sidebar footer below its normal position. */
.positioning-page-content {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.positioning-page-content .positioning-main-grid {
  height: 100% !important;
  max-height: 100% !important;
  padding-bottom: 0 !important;
}

/* Retail Details: white canvas, solid grey cards, no glass glow, dark copy. */
:root[data-theme="light"] #retail-sentiment-tile-3,
:root[data-theme="light"] #retail-sentiment-tile-3 .retail-details-body,
:root[data-theme="light"] #retail-sentiment-tile-3-body,
:root[data-theme="light"] #retail-sentiment-tile-3-body > div {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
}
:root[data-theme="light"] #retail-sentiment-tile-3-body [style*="linear-gradient"] {
  background: var(--fm-surface-2) !important;
  background-color: var(--fm-surface-2) !important;
  background-image: none !important;
  border-color: var(--fm-border-subtle) !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
:root[data-theme="light"] #retail-sentiment-tile-3-body,
:root[data-theme="light"] #retail-sentiment-tile-3-body :is(div, span, p, strong, small, h1, h2, h3, h4, h5, h6, th, td, li) {
  color: var(--fm-text-primary) !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

@media (max-width: 900px) {
  .positioning-page-content {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .positioning-page-content .positioning-main-grid {
    height: auto !important;
    max-height: none !important;
  }
}

/* ========================================================================== 
   CURRENCY MODALS, FX INTELLIGENCE AND IMPLIED-VOLATILITY FINAL PASS
   ========================================================================== */

/* The three analytical Currency pop-outs must use the active chart canvas,
   including the Plotly-owned layers that legacy figure layouts paint black. */
:root[data-theme="light"] :is(#currency-diff-modal, #currency-iv-modal, #currency-rr-modal) :is(.modal-shell, .modal-header, .modal-body),
:root[data-theme="light"] :is(#currency-diff-modal-graph, #currency-iv-modal-graph, #currency-rr-modal-graph),
:root[data-theme="light"] :is(#currency-diff-modal-graph, #currency-iv-modal-graph, #currency-rr-modal-graph) :is(.js-plotly-plot, .plot-container, .svg-container) {
  background: var(--fm-chart-paper) !important;
  background-color: var(--fm-chart-paper) !important;
  background-image: none !important;
  box-shadow: none !important;
}
:root[data-theme="light"] :is(#currency-diff-modal-graph, #currency-iv-modal-graph, #currency-rr-modal-graph) .main-svg {
  background: transparent !important;
  background-color: transparent !important;
}
:root[data-theme="light"] :is(#currency-diff-modal-graph, #currency-iv-modal-graph, #currency-rr-modal-graph) .main-svg .bg {
  fill: var(--fm-chart-plot) !important;
}
:root[data-theme="light"] :is(#currency-diff-modal, #currency-iv-modal, #currency-rr-modal) .modal-header > div:first-child,
:root[data-theme="light"] :is(#currency-diff-modal-graph, #currency-iv-modal-graph, #currency-rr-modal-graph) :is(.xtick, .ytick, .gtitle, .annotation-text),
:root[data-theme="light"] :is(#currency-diff-modal-graph, #currency-iv-modal-graph, #currency-rr-modal-graph) :is(.xtick, .ytick, .gtitle, .annotation-text) text {
  color: var(--fm-text-primary) !important;
  fill: var(--fm-text-primary) !important;
  -webkit-text-fill-color: var(--fm-text-primary) !important;
}

/* FX Intelligence bias states use solid semantic fills in both the tile and
   its detail modal. */
.fxi-call-pill--bullish,
.fxi-bias-pill--bullish {
  background: #168A50 !important;
  border-color: #0F6C3E !important;
  color: #FFFFFF !important;
}
.fxi-call-pill--bearish,
.fxi-bias-pill--bearish {
  background: #C8324E !important;
  border-color: #A9233C !important;
  color: #FFFFFF !important;
}
.fxi-call-pill--neutral,
.fxi-bias-pill--neutral {
  background: #667085 !important;
  border-color: #4B5565 !important;
  color: #FFFFFF !important;
}

/* Expected Daily Move uses a deliberate high-contrast foreground on both
   Cross Asset and Stocks; the same table renderer supplies both tabs. */
:root[data-theme="light"] #ivol-table .ivol-overview-table td.ivol-value-move,
:root[data-theme="light"] #ivol-table .ivol-overview-table td.ivol-value-move * {
  color: var(--fm-text-primary) !important;
  -webkit-text-fill-color: var(--fm-text-primary) !important;
  opacity: 1 !important;
}

/* Keep the IV route in the shared one-viewport frame so its content cannot
   stretch the sidebar and move the theme/logout controls downward. */
.ivol-page-content {
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.ivol-page-content .ivol-main-grid {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) !important;
  padding-bottom: 0 !important;
}
@media (max-width: 980px) {
  .ivol-page-content {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .ivol-page-content .ivol-main-grid {
    height: auto !important;
    max-height: none !important;
    grid-template-rows: auto !important;
  }
}

/* ========================================================================== 
   CHART EXPORT / MODAL CONTRAST CORRECTIONS
   ========================================================================== */

/* Beat the earlier light-theme pastel rule with equal theme specificity. */
:root[data-theme="light"] .fxi-call-pill--bullish,
:root[data-theme="light"] .fxi-bias-pill--bullish {
  background: #168A50 !important;
  border-color: #0F6C3E !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
:root[data-theme="light"] .fxi-call-pill--bearish,
:root[data-theme="light"] .fxi-bias-pill--bearish {
  background: #C8324E !important;
  border-color: #A9233C !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
:root[data-theme="light"] .fxi-call-pill--neutral,
:root[data-theme="light"] .fxi-bias-pill--neutral {
  background: #667085 !important;
  border-color: #4B5565 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* Legacy ID rules painted these Plotly containers black. The graph, all
   Plotly wrappers, and the actual plot rectangle now use the light tokens. */
:root[data-theme="light"] :is(#ivol-tile2-modal-graph, #ivol-tile3-modal-graph,
  #crossassetvol-modal-graph-1, #crossassetvol-modal-graph-2,
  #crossassetvol-modal-graph-3, #crossassetvol-modal-graph-4),
:root[data-theme="light"] :is(#ivol-tile2-modal-graph, #ivol-tile3-modal-graph,
  #crossassetvol-modal-graph-1, #crossassetvol-modal-graph-2,
  #crossassetvol-modal-graph-3, #crossassetvol-modal-graph-4)
  :is(.js-plotly-plot, .plot-container, .svg-container) {
  background: var(--fm-chart-paper) !important;
  background-color: var(--fm-chart-paper) !important;
  background-image: none !important;
  box-shadow: none !important;
}
:root[data-theme="light"] :is(#ivol-tile2-modal-graph, #ivol-tile3-modal-graph,
  #crossassetvol-modal-graph-1, #crossassetvol-modal-graph-2,
  #crossassetvol-modal-graph-3, #crossassetvol-modal-graph-4) .main-svg {
  background: transparent !important;
  background-color: transparent !important;
}
:root[data-theme="light"] :is(#ivol-tile2-modal-graph, #ivol-tile3-modal-graph,
  #crossassetvol-modal-graph-1, #crossassetvol-modal-graph-2,
  #crossassetvol-modal-graph-3, #crossassetvol-modal-graph-4) .main-svg .bg {
  fill: var(--fm-chart-plot) !important;
}
/* Grid colours were present but too easily suppressed by older figure
   defaults. Preserve a visible, restrained grid in both themes. */
:root[data-theme] .js-plotly-plot .gridlayer path {
  stroke: var(--fm-chart-grid) !important;
  stroke-opacity: 1 !important;
  opacity: 1 !important;
}
/* ========================================================================== 
   COUNTRY MODALS + VIEWPORT SIDEBAR, AND IV PRIMARY-AXIS GRID
   ========================================================================== */

/* Country content owns the scroll. The shared navigation remains one viewport
   high, so its theme and logout controls do not follow the long tile grid. */
.country-dashboard-page {
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.country-dashboard-page > .sidebar,
.country-dashboard-page .sidebar {
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  position: sticky !important;
  top: 0 !important;
  align-self: flex-start !important;
  flex: 0 0 auto !important;
}
.country-dashboard-page .country-page-content {
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Every Country expanded chart inherits the active light canvas all the way
   through Plotly's internal wrappers and plot rectangle. */
:root[data-theme="light"] :is(
  #country-cesi-modal, #country-spread-modal, #country-reer-modal,
  #country-ctot-modal, #country-inflexp-modal, #country-yieldcurve-modal,
  #country-cpi-modal, #country-gdp-modal, #country-unemp-modal,
  #country-real-yield-modal, #country-pmi-modal, #country-policy-rate-modal
) :is(.modal-shell, .modal-header, .modal-body),
:root[data-theme="light"] :is(
  #country-cesi-modal-graph, #country-spread-modal-graph, #country-reer-modal-graph,
  #country-ctot-modal-graph, #country-inflexp-modal-graph, #country-yieldcurve-modal-graph,
  #country-cpi-modal-graph, #country-gdp-modal-graph, #country-unemp-modal-graph,
  #country-real-yield-modal-graph, #country-pmi-modal-graph, #country-policy-rate-modal-graph
),
:root[data-theme="light"] :is(
  #country-cesi-modal-graph, #country-spread-modal-graph, #country-reer-modal-graph,
  #country-ctot-modal-graph, #country-inflexp-modal-graph, #country-yieldcurve-modal-graph,
  #country-cpi-modal-graph, #country-gdp-modal-graph, #country-unemp-modal-graph,
  #country-real-yield-modal-graph, #country-pmi-modal-graph, #country-policy-rate-modal-graph
) :is(.js-plotly-plot, .plot-container, .svg-container) {
  background: var(--fm-chart-paper) !important;
  background-color: var(--fm-chart-paper) !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}
:root[data-theme="light"] :is(
  #country-cesi-modal-graph, #country-spread-modal-graph, #country-reer-modal-graph,
  #country-ctot-modal-graph, #country-inflexp-modal-graph, #country-yieldcurve-modal-graph,
  #country-cpi-modal-graph, #country-gdp-modal-graph, #country-unemp-modal-graph,
  #country-real-yield-modal-graph, #country-pmi-modal-graph, #country-policy-rate-modal-graph
) .main-svg {
  background: transparent !important;
  background-color: transparent !important;
}
:root[data-theme="light"] :is(
  #country-cesi-modal-graph, #country-spread-modal-graph, #country-reer-modal-graph,
  #country-ctot-modal-graph, #country-inflexp-modal-graph, #country-yieldcurve-modal-graph,
  #country-cpi-modal-graph, #country-gdp-modal-graph, #country-unemp-modal-graph,
  #country-real-yield-modal-graph, #country-pmi-modal-graph, #country-policy-rate-modal-graph
) .main-svg .bg {
  fill: var(--fm-chart-plot) !important;
}
:root[data-theme="light"] :is(
  #country-cesi-modal, #country-spread-modal, #country-reer-modal,
  #country-ctot-modal, #country-inflexp-modal, #country-yieldcurve-modal,
  #country-cpi-modal, #country-gdp-modal, #country-unemp-modal,
  #country-real-yield-modal, #country-pmi-modal, #country-policy-rate-modal
) .modal-header > div:first-child,
:root[data-theme="light"] :is(
  #country-cesi-modal-graph, #country-spread-modal-graph, #country-reer-modal-graph,
  #country-ctot-modal-graph, #country-inflexp-modal-graph, #country-yieldcurve-modal-graph,
  #country-cpi-modal-graph, #country-gdp-modal-graph, #country-unemp-modal-graph,
  #country-real-yield-modal-graph, #country-pmi-modal-graph, #country-policy-rate-modal-graph
) :is(.xtick, .ytick, .gtitle, .annotation-text, .legendtext),
:root[data-theme="light"] :is(
  #country-cesi-modal-graph, #country-spread-modal-graph, #country-reer-modal-graph,
  #country-ctot-modal-graph, #country-inflexp-modal-graph, #country-yieldcurve-modal-graph,
  #country-cpi-modal-graph, #country-gdp-modal-graph, #country-unemp-modal-graph,
  #country-real-yield-modal-graph, #country-pmi-modal-graph, #country-policy-rate-modal-graph
) :is(.xtick, .ytick, .gtitle, .annotation-text, .legendtext) text {
  color: var(--fm-text-primary) !important;
  fill: var(--fm-text-primary) !important;
  -webkit-text-fill-color: var(--fm-text-primary) !important;
}

/* Country bar colours are owned by individual Plotly traces. Do not apply a
   blanket CSS fill here: it erases variable and comparison-country identity. */

@media (max-width: 900px) {
  .country-dashboard-page {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .country-dashboard-page .country-page-content {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* ========================================================================== 
   CORRELATIONS RESPONSIVE WORKSPACE + VIEWPORT SIDEBAR
   ========================================================================== */
.correlation-dashboard-page {
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.correlation-dashboard-page > .sidebar,
.correlation-dashboard-page .sidebar {
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  position: sticky !important;
  top: 0 !important;
  align-self: flex-start !important;
  flex: 0 0 auto !important;
}
.correlation-dashboard-page .correlation-page-content {
  height: 100vh !important;
  max-height: 100vh !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
.correlation-focus-grid > div {
  min-width: 0;
}
.correlation-focus-grid .home-tile {
  overflow-x: auto;
}
.correlation-mobile-matrix {
  display: none;
}
.correlation-desktop-matrix {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 80vh;
  min-height: 650px;
  min-width: 0;
  box-sizing: border-box;
  position: relative;
}
.correlation-desktop-matrix #correlation-matrix-loading,
.correlation-desktop-matrix #correlation-matrix-loading > div,
.correlation-desktop-matrix #correlation-matrix {
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 650px;
  box-sizing: border-box;
}
.correlation-desktop-matrix #correlation-matrix .js-plotly-plot,
.correlation-desktop-matrix #correlation-matrix .plot-container,
.correlation-desktop-matrix #correlation-matrix .svg-container {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
}


/* Correlation intelligence output: trader-facing context layered onto the
   existing matrix and rolling-correlation controls. */
.correlation-intelligence-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.correlation-snapshot-card {
  min-width: 0;
  min-height: 92px;
  padding: 12px 14px;
  box-sizing: border-box;
}
.correlation-snapshot-label,
.correlation-intel-card-subtitle,
.correlation-snapshot-detail,
.correlation-intel-row-meta,
.correlation-pair-footnote { color: var(--fm-text-secondary); }
.correlation-snapshot-label {
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.correlation-snapshot-value {
  margin-top: 6px;
  color: var(--fm-text-primary);
  font-size: 18px;
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.correlation-snapshot-value.is-positive,
.correlation-intel-value.is-positive { color: #34d399; }
.correlation-snapshot-value.is-negative,
.correlation-intel-value.is-negative { color: #fb7185; }
.correlation-snapshot-value.is-neutral,
.correlation-intel-value.is-neutral { color: #a78bfa; }
.correlation-snapshot-detail {
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.3;
}
.correlation-intel-list-card {
  min-width: 0;
  height: 238px;
  min-height: 238px;
  padding: 12px 14px;
  box-sizing: border-box;
}
.correlation-card-heading {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}
.correlation-help-icon {
  display: inline-grid;
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  place-items: center;
  border: 1px solid var(--fm-border-subtle);
  border-radius: 50%;
  color: var(--fm-text-secondary);
  font-size: 9px;
  font-weight: 750;
  line-height: 1;
  cursor: help;
}
.correlation-help-icon:focus-visible {
  outline: 2px solid #8b5cf6;
  outline-offset: 2px;
}
.correlation-intel-card-title,
.correlation-pair-title {
  color: var(--fm-text-primary);
  font-size: 14px;
  font-weight: 750;
}
.correlation-intel-card-subtitle {
  min-height: 28px;
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.35;
}
.correlation-intel-list { margin-top: 8px; }
.correlation-intel-row {
  padding: 7px 0;
  border-top: 1px solid var(--fm-border-subtle);
}
.correlation-intel-row-head,
.correlation-intel-row-meta,
.correlation-pair-heading,
.correlation-pair-metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.correlation-intel-peer {
  min-width: 0;
  overflow: hidden;
  color: var(--fm-text-primary);
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.correlation-intel-value {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 750;
}
.correlation-intel-row-meta {
  margin-top: 3px;
  font-size: 9px;
}
.correlation-intel-empty {
  padding: 18px 0 4px;
  color: var(--fm-text-secondary);
  font-size: 11px;
  line-height: 1.45;
}
.correlation-drilldown-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr);
  gap: 14px;
  min-width: 0;
}
.correlation-drilldown-chart-tile {
  min-width: 0;
  min-height: 520px;
  padding: 10px 12px 8px;
  box-sizing: border-box;
  overflow: hidden;
}
#correlation-drilldown-chart {
  width: 100%;
  height: 500px;
  min-height: 500px;
}
#correlation-pair-intelligence { min-width: 0; }
.correlation-pair-intel-card {
  height: 100%;
  min-height: 520px;
  padding: 16px;
  box-sizing: border-box;
}
.correlation-pair-window {
  color: #a78bfa;
  font-size: 11px;
  font-weight: 700;
}
.correlation-pair-classification {
  margin-top: 14px;
  color: #a78bfa;
  font-size: 17px;
  font-weight: 750;
}
.correlation-pair-metrics {
  display: grid;
  gap: 0;
  margin-top: 14px;
}
.correlation-pair-metric {
  padding: 10px 0;
  border-top: 1px solid var(--fm-border-subtle);
  color: var(--fm-text-secondary);
  font-size: 11px;
}
.correlation-pair-metric strong {
  color: var(--fm-text-primary);
  font-size: 12px;
}
.correlation-pair-readthrough {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--fm-border-subtle);
  border-radius: 10px;
  background: var(--fm-surface-2);
  color: var(--fm-text-primary);
  font-size: 11px;
  line-height: 1.55;
}
.correlation-pair-footnote {
  margin-top: 12px;
  font-size: 9px;
}
@media (max-width: 1180px) and (min-width: 901px) {
  .correlation-focus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .correlation-drilldown-grid { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }
}
@media (max-width: 900px) {
  .correlation-intelligence-snapshot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .correlation-snapshot-card {
    min-height: 84px;
    padding: 10px;
  }
  .correlation-snapshot-value { font-size: 15px; }
  .correlation-intel-list-card { height: auto; min-height: 0; }
  .correlation-drilldown-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .correlation-drilldown-chart-tile {
    height: 390px !important;
    min-height: 390px !important;
  }
  #correlation-drilldown-chart {
    height: 370px !important;
    min-height: 370px !important;
  }
  .correlation-pair-intel-card { min-height: 0; }
}


@media (max-width: 900px) {
  .correlation-dashboard-page {
    width: 100% !important;
    max-width: 100% !important;
  }
  .correlation-dashboard-page .correlation-page-content {
    width: auto !important;
    max-width: 100% !important;
    flex: 1 1 0 !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }
  .correlation-page-content > *,
  #correlation-tile-matrix,
  #correlation-tile-matrix > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .correlation-focus-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }
  .correlation-focus-grid,
  .correlation-focus-grid > div,
  .correlation-focus-grid .home-tile {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .correlation-focus-grid .home-tile {
    overflow: hidden !important;
    padding: 10px !important;
  }
  .correlation-summary-table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    font-size: 9px !important;
  }
  .correlation-summary-table th,
  .correlation-summary-table td {
    padding: 5px 3px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .correlation-summary-table th:first-child,
  .correlation-summary-table td:first-child {
    width: 46% !important;
  }
  .correlation-summary-table th:nth-child(3),
  .correlation-summary-table td:nth-child(3),
  .correlation-summary-table:not(.is-shift) th:nth-child(5),
  .correlation-summary-table:not(.is-shift) td:nth-child(5),
  .correlation-summary-table.is-shift th:nth-child(4),
  .correlation-summary-table.is-shift td:nth-child(4),
  .correlation-summary-table.is-shift th:nth-child(5),
  .correlation-summary-table.is-shift td:nth-child(5) {
    display: none !important;
  }
  #correlation-source-status {
    width: 100% !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }
  .correlation-controls-tile,
  .correlation-drilldown-controls-tile {
    padding: 12px !important;
  }
  .correlation-controls-tile > div,
  .correlation-drilldown-controls-tile > div {
    align-items: stretch !important;
  }
  .correlation-controls-tile > div > div:first-child,
  .correlation-drilldown-controls-tile > div > div:first-child {
    width: 100% !important;
    flex: 1 1 100% !important;
    align-items: stretch !important;
  }
  .correlation-controls-tile > div > div:last-child,
  .correlation-drilldown-controls-tile > div > div:last-child {
    width: 100% !important;
  }
  .correlation-controls-tile .pill-btn,
  .correlation-drilldown-controls-tile .pill-btn {
    width: 100% !important;
  }
  .correlation-dashboard-page :is(
    #correlation-universe-dropdown,
    #correlation-focus-asset-dropdown,
    #correlation-assets-dropdown,
    #correlation-drilldown-asset1-dropdown,
    #correlation-drilldown-asset2-dropdown,
    #correlation-drilldown-window-dropdown,
    #correlation-drilldown-metric-dropdown
  ) {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }
  .correlation-dashboard-page #correlation-lookback {
    width: 100% !important;
  }
  .correlation-dashboard-page #correlation-lookback > label {
    margin-bottom: 6px !important;
  }
  .correlation-matrix-chart-tile {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 10px !important;
    cursor: default;
  }
  .correlation-matrix-chart-tile #correlation-matrix-loading,
  .correlation-matrix-chart-tile #correlation-matrix-loading > div {
    display: none !important;
  }
  #correlation-matrix {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .correlation-desktop-matrix {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .correlation-mobile-matrix {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .correlation-mobile-matrix-heading {
    margin-bottom: 10px;
  }
  .correlation-mobile-matrix-title {
    color: var(--fm-text-primary);
    font-size: 15px;
    font-weight: 700;
  }
  .correlation-mobile-matrix-subtitle,
  .correlation-mobile-matrix-empty {
    color: var(--fm-text-secondary);
    font-size: 11px;
    line-height: 1.35;
    margin-top: 3px;
  }
  .correlation-mobile-matrix-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    max-height: 540px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
    -webkit-overflow-scrolling: touch;
  }
  .correlation-mobile-peer-row {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 9px;
    box-sizing: border-box;
    border: 1px solid var(--fm-border-subtle);
    border-radius: 10px;
    background: var(--fm-surface-2);
  }
  .correlation-mobile-peer-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  .correlation-mobile-peer-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--fm-text-primary);
    font-size: 12px;
    font-weight: 700;
  }
  .correlation-mobile-peer-selected {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
  }
  .correlation-mobile-peer-selected.is-positive { color: #34d399; }
  .correlation-mobile-peer-selected.is-negative { color: #fb7185; }
  .correlation-mobile-peer-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    margin-top: 8px;
  }
  .correlation-mobile-peer-metric {
    min-width: 0;
    text-align: center;
  }
  .correlation-mobile-peer-metric-label,
  .correlation-mobile-peer-metric-value {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .correlation-mobile-peer-metric-label {
    color: var(--fm-text-tertiary);
    font-size: 8px;
    text-transform: uppercase;
  }
  .correlation-mobile-peer-metric-value {
    color: var(--fm-text-primary);
    font-size: 10px;
    margin-top: 2px;
  }
  .correlation-drilldown-chart-tile {
    width: 100% !important;
    height: 400px !important;
    min-height: 400px !important;
  }
  #correlation-drilldown-chart {
    width: 100% !important;
    height: 380px !important;
    min-height: 380px !important;
  }
  .correlation-dashboard-page :is(
    #correlation-universe-dropdown,
    #correlation-focus-asset-dropdown,
    #correlation-assets-dropdown,
    #correlation-drilldown-asset1-dropdown,
    #correlation-drilldown-asset2-dropdown,
    #correlation-drilldown-window-dropdown,
    #correlation-drilldown-metric-dropdown
  ) {
    position: relative !important;
    overflow: visible !important;
  }
  #correlation-universe-dropdown,
  #correlation-drilldown-asset1-dropdown { z-index: 90 !important; }
  #correlation-focus-asset-dropdown,
  #correlation-drilldown-asset2-dropdown { z-index: 80 !important; }
  #correlation-assets-dropdown,
  #correlation-drilldown-window-dropdown { z-index: 70 !important; }
  #correlation-drilldown-metric-dropdown { z-index: 60 !important; }
  .correlation-dashboard-page .pill-dd .Select-menu-outer {
    z-index: 10050 !important;
    opacity: 1 !important;
    background: var(--fm-surface-2) !important;
    border: 1px solid var(--fm-border-subtle) !important;
  }
  #correlation-matrix-modal .modal-shell,
  #correlation-rolling-modal .modal-shell {
    width: 96vw !important;
    height: 92vh !important;
  }
  #correlation-matrix-modal .modal-header,
  #correlation-rolling-modal .modal-header {
    align-items: flex-start !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  #correlation-matrix-modal .modal-body,
  #correlation-rolling-modal .modal-body {
    padding: 8px !important;
  }
  #correlation-matrix-modal .modal-body > div:first-child > div,
  #correlation-rolling-modal .modal-body > div:first-child > div {
    align-items: stretch !important;
    flex-direction: column !important;
  }
  .correlation-dashboard-page :is(
    #correlation-matrix-modal-universe-dropdown,
    #correlation-matrix-modal-focus-asset-dropdown,
    #correlation-matrix-modal-assets-dropdown,
    #correlation-rolling-modal-asset1-dropdown,
    #correlation-rolling-modal-asset2-dropdown,
    #correlation-rolling-modal-window-dropdown
  ) {
    width: 100% !important;
    min-width: 0 !important;
    position: relative !important;
    overflow: visible !important;
  }
  #correlation-matrix-modal-universe-dropdown,
  #correlation-rolling-modal-asset1-dropdown { z-index: 90 !important; }
  #correlation-matrix-modal-focus-asset-dropdown,
  #correlation-rolling-modal-asset2-dropdown { z-index: 80 !important; }
  #correlation-matrix-modal-assets-dropdown,
  #correlation-rolling-modal-window-dropdown { z-index: 70 !important; }
  #correlation-matrix-modal .modal-body > div:last-child {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    scrollbar-gutter: stable;
    cursor: grab;
  }
  #correlation-matrix-modal-graph {
    width: 900px !important;
    min-width: 900px !important;
    height: 900px !important;
    min-height: 900px !important;
  }
}

@media (max-width: 720px) {
  .correlation-dashboard-page > .sidebar,
  .correlation-dashboard-page .sidebar.sidebar-shell {
    flex: 0 0 0 !important;
    flex-basis: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }
  .correlation-dashboard-page .correlation-page-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
}

/* ========================================================================== 
   SEASONALITY COMPACT WORKSPACE + VIEWPORT SIDEBAR
   ========================================================================== */
.seasonality-dashboard-page {
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.seasonality-dashboard-page > .sidebar,
.seasonality-dashboard-page .sidebar {
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  position: sticky !important;
  top: 0 !important;
  align-self: flex-start !important;
  flex: 0 0 auto !important;
}
.seasonality-dashboard-page .seasonality-page-content {
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: grid !important;
  grid-template-columns: minmax(0, 3fr) minmax(390px, 2fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
  align-content: start;
}
.seasonality-page-content > .home-tile:not(.seasonality-chart-tile):not(.seasonality-table-tile),
.seasonality-page-content > .seasonality-cards-row {
  grid-column: 1 / -1;
  margin-bottom: 0 !important;
}
.seasonality-page-content > .seasonality-cards-row {
  gap: 8px !important;
}
.seasonality-chart-tile,
.seasonality-table-tile {
  min-width: 0;
  margin-bottom: 0 !important;
  align-self: stretch;
  height: 560px;
  box-sizing: border-box;
}
.seasonality-chart-tile {
  grid-column: 1;
}
.seasonality-table-tile {
  grid-column: 2;
}
.seasonality-table-tile h3 {
  font-size: 17px !important;
  margin-bottom: 8px !important;
}

/* The old dark-only dropdown rules are intentionally overridden here so the
   asset selector uses the same raised grey control as the rest of light mode. */
:root[data-theme="light"] .seasonality-dashboard-page #seasonality-asset-dropdown,
:root[data-theme="light"] .seasonality-dashboard-page #seasonality-asset-dropdown :is(
  .Select-control, .Select-value, .Select-menu-outer, .Select-menu,
  .Select-option, .VirtualizedSelectOption
) {
  background: var(--fm-surface-2) !important;
  background-color: var(--fm-surface-2) !important;
  border-color: var(--fm-border-subtle) !important;
  color: var(--fm-text-primary) !important;
}
:root[data-theme="light"] .seasonality-dashboard-page #seasonality-asset-dropdown :is(
  .Select-value-label, .Select-placeholder, .Select-input > input,
  .Select-arrow-zone, .Select-clear-zone
) {
  color: var(--fm-text-primary) !important;
}

@media (max-width: 1180px) {
  .seasonality-dashboard-page .seasonality-page-content {
    grid-template-columns: minmax(0, 1fr);
  }
  .seasonality-page-content > .home-tile,
  .seasonality-page-content > .seasonality-cards-row,
  .seasonality-chart-tile,
  .seasonality-table-tile {
    grid-column: 1 / -1;
  }
  .seasonality-page-content > .seasonality-cards-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .seasonality-dashboard-page {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .seasonality-dashboard-page .seasonality-page-content {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }
  .seasonality-header-tile {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  .seasonality-header-tile > div:last-child {
    width: 100% !important;
    align-items: stretch !important;
  }
  .seasonality-header-tile #seasonality-asset-dropdown {
    width: 100% !important;
  }
  .seasonality-page-content > .seasonality-cards-row {
    grid-template-columns: minmax(0, 1fr) !important;
    margin-bottom: 12px !important;
  }
  .seasonality-metric-card {
    min-height: 72px !important;
  }
  .seasonality-chart-tile,
  .seasonality-table-tile {
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
  }
  .seasonality-chart-tile > div:first-child {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 4px !important;
  }
  #seasonality-chart-subtitle {
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }
  #seasonality-main-chart {
    height: 360px !important;
    min-height: 360px !important;
  }
  #seasonality-monthly-table .dash-spreadsheet-container {
    height: 410px !important;
    max-height: 410px !important;
    overflow-y: auto !important;
  }
  .seasonality-chart-tile {
    margin-bottom: 12px !important;
  }
}

/* ========================================================================== 
   EARNINGS / STOCKS TABLE FIT AND COLOUR
   ========================================================================== */
.earnings-dashboard-page {
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.earnings-dashboard-page > .sidebar,
.earnings-dashboard-page .sidebar {
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: 100vh !important;
  position: sticky !important;
  top: 0 !important;
  align-self: flex-start !important;
  flex: 0 0 auto !important;
}
.earnings-dashboard-page .stocks-page-shell {
  height: 100vh !important;
  max-height: 100vh !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}
.earnings-dashboard-page .stocks-desktop-grid {
  height: clamp(520px, calc(100vh - 310px), 760px) !important;
}
:root[data-theme="light"] .stocks-desktop-grid {
  --ag-header-background-color: var(--fm-surface-2) !important;
  --ag-header-foreground-color: var(--fm-text-primary) !important;
}
:root[data-theme="light"] .stocks-desktop-grid :is(.ag-header, .ag-header-viewport, .ag-header-container, .ag-header-cell) {
  background: var(--fm-surface-2) !important;
  background-color: var(--fm-surface-2) !important;
  color: var(--fm-text-primary) !important;
}
:root[data-theme="light"] .stocks-desktop-grid .stocks-company-cell {
  color: #2446B8 !important;
  -webkit-text-fill-color: #2446B8 !important;
  font-weight: 700 !important;
}
:root[data-theme="dark"] .stocks-desktop-grid .stocks-company-cell {
  color: #C8B6FF !important;
  -webkit-text-fill-color: #C8B6FF !important;
}
@media (max-width: 760px) {
  .earnings-dashboard-page {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .earnings-dashboard-page .stocks-page-shell {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Country comparison controls mirror the fixed country-series palette. */
.country-modal-compare-checklist label:nth-child(1) input { accent-color: #C026FF; }
.country-modal-compare-checklist label:nth-child(2) input { accent-color: #00BFFF; }
.country-modal-compare-checklist label:nth-child(3) input { accent-color: #FFB000; }
.country-modal-compare-checklist label:nth-child(4) input { accent-color: #00D084; }
.country-modal-compare-checklist label:nth-child(5) input { accent-color: #FF3B5C; }
.country-modal-compare-checklist label:nth-child(6) input { accent-color: #8CFF00; }
.country-modal-compare-checklist label:nth-child(7) input { accent-color: #FF6B00; }
.country-modal-compare-checklist label:nth-child(8) input { accent-color: #00E5FF; }
:root[data-theme="dark"] .country-modal-compare-checklist label:nth-child(1) span { color: #C026FF; }
:root[data-theme="dark"] .country-modal-compare-checklist label:nth-child(2) span { color: #00BFFF; }
:root[data-theme="dark"] .country-modal-compare-checklist label:nth-child(3) span { color: #FFB000; }
:root[data-theme="dark"] .country-modal-compare-checklist label:nth-child(4) span { color: #00D084; }
:root[data-theme="dark"] .country-modal-compare-checklist label:nth-child(5) span { color: #FF3B5C; }
:root[data-theme="dark"] .country-modal-compare-checklist label:nth-child(6) span { color: #8CFF00; }
:root[data-theme="dark"] .country-modal-compare-checklist label:nth-child(7) span { color: #FF6B00; }
:root[data-theme="dark"] .country-modal-compare-checklist label:nth-child(8) span { color: #00E5FF; }

/* In dark mode every Plotly tile and modal uses the same true-black canvas.
   Modal shells, headers and controls keep their normal themed surfaces. */
:root[data-theme="dark"] .dash-graph,
:root[data-theme="dark"] .js-plotly-plot,
:root[data-theme="dark"] .plot-container,
:root[data-theme="dark"] .svg-container {
  background: #000 !important;
  background-color: #000 !important;
}

:root[data-theme="dark"] .svg-container > .main-svg {
  background: transparent !important;
  background-color: transparent !important;
}

:root[data-theme="dark"] .svg-container > .main-svg:first-child {
  background: #000 !important;
  background-color: #000 !important;
}

:root[data-theme="dark"] .js-plotly-plot .main-svg .bg {
  fill: #000 !important;
}

:root[data-theme="dark"] .scatterlayer path.js-line {
  stroke-opacity: 1 !important;
}

/* ==========================================================================
   GOLD ANALYSIS CORE CHARTS
   Ranked macro pressure and Gold View Score versus spot presentation.
   ========================================================================== */

.gold-analysis-row {
  width: 100%;
  min-width: 0;
}

.gold-macro-tile,
.gold-view-history-tile {
  min-width: 0;
  overflow: hidden;
}

.gold-macro-driver-row {
  border-bottom: 1px solid color-mix(in srgb, var(--fm-border-subtle) 70%, transparent);
}

.gold-macro-driver-row:last-child {
  border-bottom: 0;
}

.gold-macro-driver-bar {
  border: 1px solid color-mix(in srgb, var(--fm-border-subtle) 80%, transparent);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22);
}

.gold-macro-driver-negative-zone {
  background: color-mix(in srgb, var(--fm-negative) 11%, transparent);
}

.gold-macro-driver-positive-zone {
  background: color-mix(in srgb, var(--fm-positive) 11%, transparent);
}

.gold-macro-driver-fill {
  opacity: 0.88;
}

.gold-macro-impact-label {
  font-size: 11px;
  line-height: 1.15;
}

.gold-macro-percentile {
  margin-top: 2px;
  color: var(--fm-text-secondary);
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
}

.gold-view-history-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 4px 0 2px;
}

.gold-view-history-metric {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--fm-border-subtle);
  border-radius: 10px;
  background: color-mix(in srgb, var(--fm-surface-3) 72%, transparent);
}

.gold-view-history-metric span {
  color: var(--fm-text-secondary);
  font-size: 10px;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.gold-view-history-metric strong {
  color: var(--fm-text-primary);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

:root[data-theme="light"] .gold-view-history-chart .rangeselector text {
  fill: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .gold-view-history-chart .rangeselector rect {
  fill: var(--fm-surface-2) !important;
  stroke: var(--fm-border-subtle) !important;
}

/* Stronger light-mode lines preserve the amber/cyan identity without washing
   out against the pale plot canvas. */
:root[data-theme="light"] .gold-view-history-chart path.js-line[style*="stroke: rgb(255, 200, 61)"],
:root[data-theme="light"] .gold-view-history-chart path.js-line[style*="stroke: rgb(255,200,61)"] {
  stroke: #B86B00 !important;
}

:root[data-theme="light"] .gold-view-history-chart path.js-line[style*="stroke: rgb(52, 213, 255)"],
:root[data-theme="light"] .gold-view-history-chart path.js-line[style*="stroke: rgb(52,213,255)"] {
  stroke: #007FA8 !important;
}

:root[data-theme="light"] .gold-view-history-chart :is(
  .xtick text, .ytick text, .y2tick text,
  .g-ytitle text, .g-y2title text, .legendtext
) {
  fill: #26345D !important;
  color: #26345D !important;
  -webkit-text-fill-color: #26345D !important;
}

:root[data-theme="light"] .gold-conditional-chart .barlayer .point text {
  fill: #111827 !important;
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
}

@media (max-width: 1180px) {
  .gold-analysis-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .gold-macro-tile,
  .gold-view-history-tile {
    min-height: 0 !important;
    height: auto !important;
  }
}

@media (max-width: 720px) {
  .gold-dashboard-page > div:last-child {
    padding: 10px !important;
  }

  .gold-macro-tile,
  .gold-view-history-tile {
    padding: 13px !important;
  }

  .gold-macro-strip > div:first-child {
    align-items: flex-start !important;
    flex-direction: column;
    gap: 6px !important;
  }

  .gold-macro-legend {
    gap: 10px !important;
    margin-bottom: 6px !important;
  }

  .gold-macro-driver-row {
    grid-template-columns: minmax(92px, 0.8fr) minmax(105px, 1.2fr) 68px !important;
    gap: 7px !important;
    padding: 8px 0 !important;
  }

  .gold-macro-driver-row > div:nth-child(4) {
    display: flex;
    grid-column: 2 / 4;
    gap: 8px;
    justify-content: flex-start;
    text-align: left !important;
  }

  .gold-macro-percentile {
    margin-top: 1px;
  }

  .gold-view-history-metrics {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .gold-view-history-metric {
    padding: 8px 10px;
  }

  .gold-view-history-chart,
  .gold-view-history-chart .js-plotly-plot,
.gold-view-history-chart .plot-container {
    height: 330px !important;
  }
}


/* Gold page simplification and responsive content flow. */
.gold-dashboard-page {
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 0 !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

.gold-dashboard-page .gold-page-content {
  height: 100vh !important;
  height: 100dvh !important;
  min-width: 0;
  min-height: 0 !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

@media (min-width: 901px) {
  .gold-dashboard-page > .sidebar {
    position: sticky !important;
    top: 0 !important;
    align-self: flex-start !important;
    flex: 0 0 auto !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
  }
}

.gold-view-summary-card {
  min-width: 0;
}

.gold-view-summary-main {
  min-width: 0;
}

.gold-view-summary-metrics > .home-tile {
  min-width: 0;
  border-color: var(--fm-border-subtle) !important;
  background: color-mix(in srgb, var(--fm-surface-3) 72%, transparent) !important;
}

.gold-view-component-strip {
  padding-top: 10px;
  border-top: 1px solid var(--fm-border-subtle);
}

.gold-driver-tile {
  min-width: 0;
}

.gold-conditional-table {
  max-width: 100%;
}

.gold-correlation-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--fm-border-subtle);
  border-radius: 12px;
}

.gold-correlation-card {
  display: grid;
  grid-template-areas:
    "head bar values"
    "note bar values";
  grid-template-columns: minmax(185px, 0.72fr) minmax(240px, 1.28fr) minmax(330px, 1fr);
  align-items: center;
  column-gap: 18px;
  min-width: 0;
  padding: 7px 14px;
  border-bottom: 1px solid var(--fm-border-subtle);
  background: color-mix(in srgb, var(--fm-surface-3) 76%, transparent);
}

.gold-correlation-card:last-child {
  border-bottom: 0;
}

.gold-correlation-card-head {
  grid-area: head;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.gold-correlation-name {
  color: var(--fm-text-primary);
  font-size: 13px;
  font-weight: 700;
}

.gold-correlation-relation {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  text-align: right;
}

.gold-correlation-bar {
  grid-area: bar;
  position: relative;
  height: 10px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--fm-border-subtle);
  border-radius: 7px;
  background: linear-gradient(90deg, color-mix(in srgb, #ff5c8a 12%, transparent), var(--fm-surface-3) 50%, color-mix(in srgb, #34d5ff 12%, transparent));
}

.gold-correlation-midline {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--fm-chart-reference);
}

.gold-correlation-fill {
  position: absolute;
  top: 2px;
  height: 4px;
  border-radius: 3px;
  opacity: 0.9;
}

.gold-correlation-marker {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px var(--fm-surface-1);
}

.gold-correlation-values {
  grid-area: values;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.gold-correlation-values > div {
  display: grid;
  gap: 2px;
}

.gold-correlation-values span {
  color: var(--fm-text-secondary);
  font-size: 9px;
  text-transform: uppercase;
}

.gold-correlation-values strong {
  color: var(--fm-text-primary);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.gold-correlation-note {
  grid-area: note;
  margin-top: 1px;
  color: var(--fm-text-secondary);
  font-size: 10px;
  line-height: 1.35;
}

.gold-conditional-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}

.gold-conditional-summary-card {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid var(--fm-border-subtle);
  border-radius: 11px;
  background: color-mix(in srgb, var(--fm-surface-3) 76%, transparent);
}

.gold-conditional-summary-card span {
  color: var(--fm-text-secondary);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.gold-conditional-summary-card strong {
  color: var(--fm-text-primary);
  font-size: 15px;
}

.gold-conditional-summary-card small,
.gold-conditional-footnote {
  color: var(--fm-text-secondary);
  font-size: 10px;
  line-height: 1.4;
}

.gold-conditional-footnote {
  margin-top: -2px;
  text-align: center;
}

@media (max-width: 900px) {
  .gold-view-summary-main {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .gold-view-summary-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .gold-correlation-card {
    grid-template-areas:
      "head bar"
      "note bar"
      "values values";
    grid-template-columns: minmax(180px, 0.8fr) minmax(240px, 1.2fr);
    row-gap: 10px;
  }
}

@media (max-width: 720px) {
  .gold-view-summary-card {
    padding: 12px !important;
  }

  .gold-view-summary-card > div:first-child {
    margin-bottom: 10px !important;
  }

  .gold-view-summary-main {
    gap: 10px !important;
  }

  .gold-view-summary-main > div:first-child > div:first-child {
    font-size: 19px !important;
    overflow-wrap: anywhere;
  }

  .gold-view-summary-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .gold-view-summary-metrics > .home-tile {
    padding: 9px 10px !important;
  }

  .gold-view-component-strip {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 10px !important;
    margin-top: 10px !important;
  }

  .gold-driver-tile {
    overflow-x: auto;
    padding: 13px !important;
  }

  .gold-driver-grid {
    min-width: 760px;
    grid-template-columns: 150px 75px 70px 70px 75px minmax(190px, 1fr) !important;
    gap: 9px 12px !important;
  }

  .gold-conditional-section .home-tile {
    padding: 13px !important;
  }

  .gold-conditional-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .gold-conditional-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .gold-correlation-card {
    grid-template-areas:
      "head"
      "bar"
      "values"
      "note";
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    padding: 12px;
  }

  .gold-correlation-card-head {
    align-items: center;
  }

  .gold-correlation-note {
    margin-top: 0;
  }

  .gold-correlation-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .gold-conditional-chart,
  .gold-conditional-chart .js-plotly-plot,
  .gold-conditional-chart .plot-container {
    height: 360px !important;
  }
}

/* Currency Alerts: complete light-mode surface and semantic colour contract. */
:root[data-theme="light"] .alerts-modal-shell {
  --currency-modal-accent: #8A5A00;
  --currency-modal-accent-rgb: 138, 90, 0;
  background: var(--fm-surface-1) !important;
  color: var(--fm-text-primary) !important;
  border-color: var(--fm-border-strong) !important;
}

:root[data-theme="light"] .alerts-modal-shell .currency-info-modal-header {
  background: var(--fm-surface-1) !important;
  border-bottom-color: var(--fm-border-subtle) !important;
}

:root[data-theme="light"] .alerts-modal-shell .currency-info-modal-header h3 {
  color: var(--fm-text-primary) !important;
  -webkit-text-fill-color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .alerts-modal-shell .modal-close-btn,
:root[data-theme="light"] .alerts-modal-shell .fxi-alert-faq summary {
  background: var(--fm-control-bg) !important;
  color: var(--fm-text-primary) !important;
  border-color: var(--fm-border-strong) !important;
}

:root[data-theme="light"] .alerts-modal-shell .fxi-alert-faq-panel {
  background: var(--fm-surface-raised) !important;
  color: var(--fm-text-primary) !important;
  border-color: var(--fm-border-strong) !important;
  box-shadow: 0 18px 45px var(--fm-shadow) !important;
}

:root[data-theme="light"] .alerts-modal-shell .fxi-alert-tabs {
  background: var(--fm-surface-2) !important;
  border-color: var(--fm-border-subtle) !important;
}

:root[data-theme="light"] .alerts-modal-shell .fxi-alert-tab {
  color: var(--fm-text-secondary) !important;
}

:root[data-theme="light"] .alerts-modal-shell .fxi-alert-tab:hover,
:root[data-theme="light"] .alerts-modal-shell .fxi-alert-tab:focus-visible {
  background: var(--fm-control-hover) !important;
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .alerts-modal-shell .fxi-alert-tab.is-active {
  background: rgba(var(--currency-modal-accent-rgb), .13) !important;
  color: var(--currency-modal-accent) !important;
  border-color: rgba(var(--currency-modal-accent-rgb), .42) !important;
}

:root[data-theme="light"] .alerts-modal-shell :is(
  .currency-alert-summary-pill,
  .currency-alert-model-section,
  .alerts-options-section,
  .fxi-opportunity-intro,
  .fxi-performance-view
) {
  background: var(--fm-surface-2) !important;
  color: var(--fm-text-primary) !important;
  border-color: var(--fm-border-subtle) !important;
}

:root[data-theme="light"] .alerts-modal-shell :is(
  .currency-model-alert-group,
  .currency-model-alert-card,
  .fxi-opportunity-card,
  .fxi-performance-kpi,
  .fxi-performance-table-wrap
) {
  background: var(--fm-surface-raised) !important;
  color: var(--fm-text-primary) !important;
  border-color: var(--fm-border-subtle) !important;
  box-shadow: none !important;
}

:root[data-theme="light"] .alerts-modal-shell :is(
  .fxi-opportunity-metric,
  .fxi-opportunity-rule-row,
  .currency-model-empty-summary,
  .currency-model-alert-context-badge
) {
  background: var(--fm-surface-3) !important;
  color: var(--fm-text-secondary) !important;
  border-color: var(--fm-border-subtle) !important;
}

:root[data-theme="light"] .alerts-modal-shell :is(
  .currency-alert-section-title,
  .currency-model-group-head,
  .currency-model-alert-identity strong,
  .currency-model-alert-metrics strong,
  .fxi-opportunity-head strong,
  .fxi-opportunity-dates strong,
  .fxi-opportunity-rule-row strong,
  .fxi-performance-kpi-value,
  .fxi-alert-faq-panel h4,
  .fxi-alert-faq-panel strong
) {
  color: var(--fm-text-primary) !important;
  -webkit-text-fill-color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .alerts-modal-shell :is(
  .currency-alert-section-subtitle,
  .currency-model-group-description,
  .currency-model-alert-identity span,
  .currency-model-alert-metrics span,
  .currency-model-alert-footer,
  .currency-model-empty-summary,
  .fxi-opportunity-actions,
  .fxi-opportunity-metric span,
  .fxi-opportunity-dates span,
  .fxi-performance-kpi span,
  .fxi-alert-faq-panel > p,
  .fxi-alert-faq-panel span
) {
  color: var(--fm-text-secondary) !important;
  -webkit-text-fill-color: var(--fm-text-secondary) !important;
}

:root[data-theme="light"] .alerts-modal-shell :is(
  .fxi-performance-kpi-value.is-positive,
  .fxi-performance-value.is-positive,
  .fxi-performance-return.is-positive,
  .fxi-opportunity-metric.is-positive strong,
  .currency-alert-summary-pill.is-positive strong
) {
  color: var(--fm-positive) !important;
  -webkit-text-fill-color: var(--fm-positive) !important;
}

:root[data-theme="light"] .alerts-modal-shell :is(
  .fxi-performance-kpi-value.is-negative,
  .fxi-performance-value.is-negative,
  .fxi-performance-return.is-negative,
  .fxi-opportunity-metric.is-negative strong,
  .currency-alert-summary-pill.is-negative strong
) {
  color: var(--fm-negative) !important;
  -webkit-text-fill-color: var(--fm-negative) !important;
}

:root[data-theme="light"] .alerts-modal-shell :is(
  .fxi-performance-kpi-value.is-neutral,
  .fxi-performance-return.is-neutral,
  .fxi-performance-value-separator
) {
  color: var(--fm-text-primary) !important;
  -webkit-text-fill-color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .alerts-modal-shell .fxi-opportunity-status,
:root[data-theme="light"] .alerts-modal-shell .currency-model-alert-status.is-bullish {
  background: var(--fm-positive-pill-bg) !important;
  color: var(--fm-positive-pill-text) !important;
  border: 1px solid var(--fm-positive-pill-border) !important;
}

:root[data-theme="light"] .alerts-modal-shell .currency-model-alert-status.is-bearish {
  background: var(--fm-negative-pill-bg) !important;
  color: var(--fm-negative-pill-text) !important;
  border: 1px solid var(--fm-negative-pill-border) !important;
}

:root[data-theme="light"] .alerts-modal-shell .fxi-opportunity-family.is-reversal-risk,
:root[data-theme="light"] .alerts-modal-shell .currency-model-alert-context-badge.is-counter-trend {
  background: #F6E8C7 !important;
  color: var(--fm-warning) !important;
  border-color: #C99A39 !important;
}

:root[data-theme="light"] .alerts-modal-shell .fxi-opportunity-family.is-directional {
  background: #DCE8FA !important;
  color: var(--fm-information) !important;
  border-color: #7EA4DF !important;
}

:root[data-theme="light"] .alerts-modal-shell .fxi-performance-table-wrap table {
  background: var(--fm-surface-raised) !important;
  color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .alerts-modal-shell .fxi-performance-table-wrap th {
  background: var(--fm-surface-2) !important;
  color: var(--fm-text-secondary) !important;
  border-color: var(--fm-border-subtle) !important;
}

:root[data-theme="light"] .alerts-modal-shell .fxi-performance-table-wrap td {
  background: transparent !important;
  color: var(--fm-text-primary) !important;
  border-color: var(--fm-border-subtle) !important;
}

:root[data-theme="light"] .alerts-modal-shell .fxi-performance-table-wrap tbody tr:hover td {
  background: var(--fm-selection-bg) !important;
}

:root[data-theme="light"] .alerts-modal-shell .alerts-options-section h4 {
  color: var(--fm-text-primary) !important;
  -webkit-text-fill-color: var(--fm-text-primary) !important;
}

:root[data-theme="light"] .alerts-modal-shell .alerts-options-section > div:last-child > div:nth-child(2) > div > div:last-child {
  background: var(--fm-surface-raised) !important;
  border-color: var(--fm-border-subtle) !important;
}

:root[data-theme="light"] .alerts-modal-shell .alerts-options-section :is(th, td) {
  color: var(--fm-text-primary) !important;
  border-color: var(--fm-border-subtle) !important;
}

:root[data-theme="light"] .alerts-modal-shell .alerts-options-section th {
  color: var(--fm-text-secondary) !important;
}

:root[data-theme="light"] .alerts-modal-shell .alerts-options-section tbody tr {
  background: var(--fm-surface-raised) !important;
}

:root[data-theme="light"] .alerts-modal-shell .alerts-options-section tbody tr[style*="rgba(0, 200, 120"] {
  background: var(--fm-positive-pill-bg) !important;
}

:root[data-theme="light"] .alerts-modal-shell .currency-alert-empty {
  background: var(--fm-surface-raised) !important;
  color: var(--fm-text-secondary) !important;
  border-color: var(--fm-border-strong) !important;
}

:root[data-theme="light"] .alerts-modal-shell .currency-alert-empty.is-error {
  color: var(--fm-negative) !important;
  border-color: var(--fm-negative-pill-border) !important;
}