:root {
  --brand-color: #58a6ff;
  --brand-glow: 0 0 8px rgba(88, 166, 255, 0.6), 0 0 18px rgba(88, 166, 255, 0.3);
  --brand-glow-soft: 0 0 6px rgba(88, 166, 255, 0.45);
  --silver-color: #c0c0c0;
  --nav-heading-color: #93c5fd;
  --pastel-lavender: #c4b5fd;
  --pastel-mint: #a7f3d0;
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin: 0;
  background: #0f1117;
  color: var(--silver-color);
}

.navbar {
  position: relative;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  padding: 1rem 2rem;
  /* gunmetal (static/nav-wall.js paints the full hull wall over this on wider screens) */
  background: linear-gradient(180deg, #2c323d 0%, #1d2129 40%, #13161c 100%);
  border-bottom: 1px solid #07080b;
  box-shadow: 0 1px 0 rgba(88, 166, 255, 0.28), 0 4px 14px rgba(0, 0, 0, 0.5);
}

.navbar a {
  color: var(--silver-color);
  text-decoration: none;
  font-weight: 500;
}

.navbar a:hover {
  color: var(--brand-color);
}

.navbar .brand {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--brand-color);
}

/* Hull wall canvas: the whole navbar background, behind the brand and the page links. */
.navbar .nav-wall {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.navbar .brand,
.navbar .nav-links {
  position: relative;
  z-index: 1;
}

/* The words are etched into the hull metal: a dark cut along the top edge of each letter and a faint lit lip
   along the bottom. The brand and the current page are backlit blue, like lit engraving. */
.navbar .brand,
.nav-links a {
  padding: 0.15rem 0.55rem;
  background: none;
}
.nav-links a {
  color: #b9c2cf;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.95), 0 1px 0 rgba(220, 235, 255, 0.16), 0 0 1px rgba(0, 0, 0, 0.6);
}
.navbar .brand,
.navbar .brand:hover {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.95), 0 1px 0 rgba(220, 235, 255, 0.18), 0 0 8px rgba(88, 166, 255, 0.55), 0 0 18px rgba(88, 166, 255, 0.25);
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--brand-color);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.95), 0 1px 0 rgba(220, 235, 255, 0.14), 0 0 8px rgba(88, 166, 255, 0.6), 0 0 16px rgba(88, 166, 255, 0.3);
}

/* row-reverse: the first link in the HTML sits at the far right and later ones fill in to its left. */
.nav-links {
  display: flex;
  flex-direction: row-reverse;
  gap: 1.5rem;
  margin-left: auto;  /* stays right-aligned even when the snowflakes are hidden */
  flex-shrink: 0;
}

.nav-links a {
  white-space: nowrap;  /* the snowflake canvas gives up space before a link wraps */
}

/* The page you're on: backlit neon blue (the etched glow is set with the other navbar words above). */
.nav-links a.active {
  position: relative;
  color: var(--brand-color);
}

/* Data & Analytics: a menu word etched like the links, opening a panel of its pages below the bar. */
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown-toggle {
  padding: 0.15rem 0.55rem;
  border: 0;
  background: none;
  color: #b9c2cf;
  font: inherit;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.95), 0 1px 0 rgba(220, 235, 255, 0.16), 0 0 1px rgba(0, 0, 0, 0.6);
}
.nav-dropdown-toggle:hover,
.nav-dropdown.open .nav-dropdown-toggle,
.nav-dropdown-toggle.active {
  color: var(--brand-color);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.95), 0 1px 0 rgba(220, 235, 255, 0.14), 0 0 8px rgba(88, 166, 255, 0.6), 0 0 16px rgba(88, 166, 255, 0.3);
}
.nav-caret { display: inline-block; margin-left: 0.2rem; font-size: 0.75em; transition: transform 0.15s; }
.nav-dropdown.open .nav-caret { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  z-index: 40;
  display: none;
  flex-direction: column;
  min-width: 11rem;
  padding: 0.35rem;
  border: 1px solid rgba(88, 166, 255, 0.35);
  border-radius: 8px;
  background: linear-gradient(180deg, #1d2129 0%, #13161c 100%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.65), 0 0 14px rgba(88, 166, 255, 0.18);
}
.nav-dropdown-menu::before { content: ""; position: absolute; top: -0.7rem; left: 0; right: 0; height: 0.7rem; }  /* keeps hover across the gap */
.nav-dropdown.open .nav-dropdown-menu { display: flex; }
@media (hover: hover) and (min-width: 761px) {
  .nav-dropdown:hover .nav-dropdown-menu { display: flex; }
  .nav-dropdown:hover .nav-caret { transform: rotate(180deg); }
}
.nav-dropdown-menu a { padding: 0.5rem 0.75rem; border-radius: 6px; }
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.active { background: rgba(88, 166, 255, 0.12); }


.refresh-control {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  border: 1px solid #2a2e3a;
  border-radius: 4px;
  background: #171a23;
  color: var(--silver-color);
  text-decoration: none;
}

.refresh-control:hover {
  border-color: var(--pastel-lavender);
  color: var(--pastel-lavender);
}

h1, h2, h3, h4, th {
  color: var(--brand-color);
}

/* Neon glow on blue text, matching the verdict pill. In the left pane only the "Elite Analysis" heading glows. */
h1, h2, h3, h4,
.navbar .brand,
.navbar a:hover,
.suggestion a {
  text-shadow: var(--brand-glow);
}

th {
  text-shadow: var(--brand-glow-soft);
}

/* Row labels (a <th> inside the table body, e.g. "Current Volume") are references, not headings:
   one step smaller and without the glow, so they don't compete with the section titles. */
tbody th {
  font-size: 0.9rem;
  font-weight: 600;
  text-shadow: none;
}

.section-nav a {
  text-shadow: none;
}

.content {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem;
}

.analysis-layout {
  display: grid;
  grid-template-columns: minmax(170px, 220px) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.section-nav {
  position: sticky;
  top: 1rem;
  border-right: 1px solid #2a2e3a;
  padding-right: 0.75rem;
}

/* Indented to line up with the link text (link padding + its 2px left border). The wrapper runs the full
   width of the pane, so the arrow underneath goes all the way across, not just under the words. */
.elite-heading {
  display: block;
  margin: 0 0 0.6rem calc(0.65rem + 2px);
}

/* On Elite Analysis the heading is also the Overview tab's link: same look, brighter while hovered. */
.section-nav a.elite-heading-link,
.section-nav a.elite-heading-link:hover,
.section-nav a.elite-heading-link.active {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  text-decoration: none;
}

.elite-heading-link:hover h2,
.elite-heading-link:focus-visible h2 {
  color: #bfdbfe;
}

/* Left-pane headings ("Elite Analysis" and the group labels) share one ice blue, a lighter blue than the
   links so they read as headings, not something to click. */
.section-nav h2 {
  margin: 0;
  font-size: 1rem;
  color: var(--nav-heading-color);
  text-shadow: 0 0 8px rgba(147, 197, 253, 0.55), 0 0 18px rgba(147, 197, 253, 0.25);
}

/* The desk headings (Elite Analysis Overview, Options / Futures / Bonds Desk) flicker like a neon OPEN sign:
   lit and glowing most of the time, a quick buzz-flicker, then a full blink off and back on. Same ice blue. */
.section-nav .elite-heading h2 {
  animation: neon-open-sign 7s linear infinite;
}

@keyframes neon-open-sign {
  0%, 18%, 22%, 24%, 58%, 66%, 100% {
    color: var(--nav-heading-color);
    text-shadow: 0 0 6px rgba(147, 197, 253, 0.9), 0 0 14px rgba(147, 197, 253, 0.6), 0 0 28px rgba(88, 166, 255, 0.45);
  }
  /* buzz: two fast stutters */
  19%, 21%, 23% {
    color: rgba(147, 197, 253, 0.35);
    text-shadow: none;
  }
  /* the sign blinks off, then comes back on */
  60%, 64% {
    color: rgba(147, 197, 253, 0.28);
    text-shadow: 0 0 2px rgba(147, 197, 253, 0.15);
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-nav .elite-heading h2 { animation: none; }
}

.elite-arrow {
  display: block;
  width: 100%;
  height: 14px;
  overflow: visible;
}

.elite-arrow path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}

/* just the glowing underline: no arrowhead on the end */
.elite-arrow .arrow-head { display: none; }

.elite-arrow .arrow-glow {
  stroke: var(--brand-color);
  stroke-width: 5;
  filter: blur(2.5px);
}

.elite-arrow .arrow-core {
  stroke: #eaf4ff;
  stroke-width: 1.8;
  filter: drop-shadow(0 0 3px #79b8ff) drop-shadow(0 0 7px #58a6ff);
}

.elite-arrow .arrow-head {
  stroke: #eaf4ff;
  stroke-width: 2;
  filter: drop-shadow(0 0 4px #58a6ff);
}

/* The arrow that moves under whichever left-pane tab was clicked (static/elite-arrow.js positions it). */
.elite-arrow.tab-arrow {
  position: absolute;
  height: 12px;
  pointer-events: none;
  z-index: 1;
}

.elite-arrow.tab-arrow[hidden] { display: none; }

/* The heading's arrow fades out while the arrow sits under a clicked tab. */
.elite-arrow path { transition: opacity 0.4s ease; }
.elite-arrow.is-away path { opacity: 0 !important; }

/* The laser and the arrow it turns into play on page load and on each left-pane click; afterwards the arrow stays solid. */
.elite-arrow.is-static path {
  stroke-dasharray: none;
  opacity: 1;
}

/* The train's track: an overlay across the whole left pane; the line itself is a dash sliding along it. */
.elite-train {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: visible;
  pointer-events: none;
}

.elite-train path {
  fill: none;
  stroke-linecap: butt;
  stroke-linejoin: round;
  stroke-dasharray: 0 1;  /* hidden until the animation starts */
}

.elite-train .train-glow {
  stroke: var(--brand-color);
  stroke-width: 5;
  filter: blur(2.5px);
}

.elite-train .train-core {
  stroke: #eaf4ff;
  stroke-width: 1.8;
  filter: drop-shadow(0 0 3px #79b8ff) drop-shadow(0 0 7px #58a6ff);
}

@media (max-width: 700px) {
  .elite-train {
    display: none;
  }
}

.section-nav-links {
  display: grid;
  gap: 0.2rem;
}


/* Left-pane links are blue all the time. Hovering shows the panel background and left bar; the selected one is
   marked only by the arrow under it (no box, no bar). */
.section-nav a {
  display: block;
  padding: 0.55rem 0.65rem;
  color: var(--brand-color);
  text-decoration: none;
  border-left: 2px solid transparent;
}

.section-nav a:hover {
  color: var(--brand-color);
  background: #171a23;
  border-left-color: var(--brand-color);
}

.analysis-panel > h2:first-child {
  margin-top: 0;
}

.analysis-panel[hidden] {
  display: none;
}

/* Subsections inside a combined tab (e.g. Valuation within Fundamentals). */
.analysis-panel h3 {
  margin: 1.75rem 0 0.5rem;
  font-size: 1.05rem;
}

.analysis-panel h2 + h3 {
  margin-top: 0.75rem;
}

/* Launcher card for the full-screen chart view: price sparkline, description, "Open charts" button. */
.chart-launcher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin: 1rem 0 1.5rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid rgba(88, 166, 255, 0.45);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(88, 166, 255, 0.08), rgba(88, 166, 255, 0.02));
  box-shadow: 0 0 14px rgba(88, 166, 255, 0.12);
}

.chart-launcher-spark {
  flex: 0 0 160px;
  height: 48px;
}

.chart-launcher-spark-line {
  fill: none;
  stroke: var(--brand-color);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.chart-launcher-spark-line.is-up { stroke: #3fb950; }
.chart-launcher-spark-line.is-down { stroke: #f85149; }

.chart-launcher-text {
  display: flex;
  flex: 1 1 18rem;
  flex-direction: column;
  gap: 0.2rem;
}

.chart-launcher-text strong {
  color: var(--brand-color);
  text-shadow: var(--brand-glow);
}

.iv-moved .chart-open-button {
  text-decoration: none;
}

.chart-launcher .chart-open-button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1.3rem;
  font-size: 1rem;
}

.chart-launcher p {
  flex-basis: 100%;
  margin: 0;
}

.chart-open-button,
.chart-minimize-button {
  padding: 0.5rem 1.1rem;
  background: #2f81f7;
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(88, 166, 255, 0.55), 0 0 18px rgba(88, 166, 255, 0.25);
  transition: box-shadow 0.15s ease, background 0.15s ease;
}

.chart-open-button:hover,
.chart-minimize-button:hover {
  background: #4493f8;
  box-shadow: 0 0 10px rgba(88, 166, 255, 0.75), 0 0 24px rgba(88, 166, 255, 0.4);
}

/* Candle-size and range pickers: segmented button rows in the chart overlay's top bar. */
.chart-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
}

.chart-control-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.chart-control-label {
  margin-right: 0.35rem;
  color: var(--silver-color);
  font-size: 0.8rem;
}

.chart-control-group button {
  padding: 0.25rem 0.6rem;
  border: 1px solid #2a2e3a;
  border-radius: 4px;
  background: #171a23;
  color: var(--silver-color);
  font-size: 0.8rem;
  cursor: pointer;
}

.chart-control-group button:hover:not(:disabled) {
  border-color: var(--brand-color);
  color: var(--brand-color);
}

.chart-control-group button[aria-pressed="true"] {
  border-color: var(--brand-color);
  color: var(--brand-color);
  box-shadow: 0 0 6px rgba(88, 166, 255, 0.45);
}

.chart-control-group button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.chart-status {
  color: var(--silver-color);
  font-size: 0.8rem;
}

.chart-status.is-error {
  color: #f85149;
}

.chart-open-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Full-screen chart overlay: price gets the most room, then momentum, then volume. */
.technical-chart-stack {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.75rem 1rem 1rem;
  background: #0f1117;
}

.technical-chart-stack[hidden] {
  display: none;
}

body.chart-overlay-open {
  overflow: hidden;
}

.chart-overlay-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--silver-color);
}

.chart-overlay-bar strong {
  color: var(--brand-color);
  text-shadow: var(--brand-glow);
}

.chart-minimize-button {
  padding: 0.4rem 0.9rem;
}

.chart-overlay-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
}

/* Ticker box in the chart view's top bar, styled like the page's ticker input and Look up button. */
.chart-ticker-form {
  display: flex;
  gap: 0.35rem;
}

.chart-ticker-form input {
  width: 6.5rem;
  padding: 0.3rem 0.5rem;
  background: #171a23;
  border: 1px solid #2a2e3a;
  border-radius: 4px;
  color: var(--silver-color);
  text-transform: uppercase;
}

.chart-ticker-form button {
  padding: 0.3rem 0.75rem;
  background: #2f81f7;
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(88, 166, 255, 0.45);
}

.chart-ticker-form button:hover {
  background: #4493f8;
}

.technical-chart-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #2a2e3a;
  border-radius: 4px;
  background: #0f1117;
}

.technical-chart-panel-price { flex: 5; }
.technical-chart-panel-volume { flex: 2; }
.technical-chart-panel-momentum { flex: 3; }

/* The chart library lays itself out with an internal <table>; keep the site's table styles
   (padding, borders, margins) off it, or they push the date axis out of view. */
.technical-chart-canvas table {
  width: auto;
  margin: 0;
  border-collapse: separate;
}

.technical-chart-canvas th,
.technical-chart-canvas td {
  padding: 0;
  border: 0;
}

/* "Moving averages" checkbox in each price-chart heading. */
.ma-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--silver-color);
  font-size: 0.8rem;
  font-weight: 400;
  cursor: pointer;
}

.ma-toggle input {
  accent-color: var(--brand-color);
}

.chart-launcher-note {
  color: var(--brand-color);
  font-size: 0.8rem;
}

/* Volume-by-price profile (the "levels" chart view's third panel): one row per price bucket. */
.volume-profile {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-auto-rows: minmax(0, 1fr);
  gap: 2px;
  padding: 0.4rem 0.75rem 0.5rem;
  overflow-y: auto;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.vp-row {
  display: grid;
  grid-template-columns: 8.2rem 1fr 3.4rem;
  align-items: center;
  gap: 0.5rem;
  color: #8b949e;
  white-space: nowrap;
}

.vp-share {
  text-align: right;
}

/* Levels view layout: volume profile beside the price chart (like a trading platform), volume below both. */
.chart-view[data-mode="levels"] .technical-chart-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 27%);
  grid-template-rows: auto minmax(0, 5fr) minmax(0, 2fr);
}

.chart-view[data-mode="levels"] .technical-chart-stack[hidden] {
  display: none;
}

.chart-view[data-mode="levels"] .chart-overlay-bar,
.chart-view[data-mode="levels"] .technical-chart-panel-volume {
  grid-column: 1 / -1;
}

.chart-view[data-mode="levels"] .technical-chart-panel-price { grid-column: 1; grid-row: 2; }
.chart-view[data-mode="levels"] .technical-chart-panel-momentum { grid-column: 2; grid-row: 2; }
.chart-view[data-mode="levels"] .technical-chart-panel-volume { grid-row: 3; }

.vp-track {
  height: 70%;
  min-height: 4px;
  max-height: 14px;
}

.vp-track i {
  display: block;
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: var(--mark-context);
}

.vp-row.is-top {
  color: #e6edf3;
  font-weight: 600;
}

.vp-row.is-top .vp-track i {
  background: var(--mark-accent);
  box-shadow: 0 0 8px rgba(47, 129, 247, 0.5);
}

.vp-row.is-now .vp-price {
  color: var(--brand-color);
}

.vp-now {
  color: var(--brand-color);
  font-weight: 600;
  white-space: nowrap;
}

.chart-title-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
}

.chart-legend-value b {
  margin-left: 0.2rem;
  color: var(--legend-color);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.technical-chart-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.55rem 0.75rem;
  color: var(--silver-color);
  background: #171a23;
  border-bottom: 1px solid #2a2e3a;
  font-size: 0.9rem;
  font-weight: 600;
}

/* Charts auto-size to these boxes, which stretch to fill their panel in the overlay. */
.technical-chart-canvas {
  flex: 1;
  width: 100%;
  min-height: 0;
  background: #0f1117;
}

.technical-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  color: var(--silver-color);
  font-size: 0.75rem;
  font-weight: 400;
}

.technical-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.technical-chart-legend i {
  display: inline-block;
  width: 0.65rem;
  height: 0.18rem;
  border-radius: 2px;
}

@media (min-width: 701px) {
  .content:has(.analysis-layout) {
    max-width: none;
    margin: 0;
    padding: 1.5rem 2rem 2rem 18rem;
  }

  /* the footer clears the fixed left pane too */
  body:has(.analysis-layout) .site-footer {
    padding-left: 18rem;
  }

  .analysis-layout {
    display: block;
  }

  /* Pin the header while scrolling, and widen it (background and divider) from the fixed
     left pane's edge to the right edge of the page so content can't show around it. */
  /* The navbar stays pinned at the top of every page, with the page header pinned right under it and the
     left pane fixed below both, so the whole top of the page stays in place while the content scrolls. */
  .navbar {
    position: sticky;
    top: 0;
    z-index: 30;
  }

  .sticky-header {
    position: sticky;
    top: var(--navbar-height, 5.5rem);
    z-index: 20;
    padding-top: 1rem;
    margin-top: -1rem;
  }

  .content:has(.analysis-layout) .sticky-header {
    margin-left: -2rem;
    margin-right: -2rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .section-nav {
    position: fixed;
    top: var(--navbar-height, 5.5rem);  /* measured in base.html; the navbar grew with the large brand */
    bottom: 0;
    left: 0;
    width: 16rem;
    overflow-y: auto;
    background: #0f1117;
    border-right: 1px solid #2a2e3a;
    padding: 1.25rem 0.75rem;
  }
}

@media (max-width: 700px) {
  .navbar {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  .navbar .brand {
    font-size: 1.5rem;
  }

  .navbar .nav-wall {
    display: none;
  }

  /* Not pinned on phones (it would cover most of the screen); relative so the divider can anchor to it. */
  .sticky-header {
    position: relative;
  }

  .ticker-form {
    flex-wrap: wrap;
  }

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

  .section-nav {
    position: static;
    min-width: 0;
    width: auto;
    height: auto;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid #2a2e3a;
    padding: 0 0 0.75rem;
    background: transparent;
  }

  .section-nav-links {
    display: flex;
    min-width: 0;
    overflow-x: auto;
    gap: 0.25rem;
  }

  .section-nav a {
    flex: 0 0 auto;
    border-left: 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
  }

  .section-nav a:hover,
  .section-nav a.active {
    border-left-color: transparent;
    border-bottom-color: var(--brand-color);
  }
}

/* ================= Landing page (Dashboard) ================= */
/* The hero runs edge to edge and fills the screen under the navbar; everything else sits in a centred column. */
.content:has(.landing) { max-width: none; padding: 0 0 2rem; }
.content:has(.landing) .site-disclaimer { max-width: 1240px; margin-left: auto; margin-right: auto; padding-left: 2rem; padding-right: 2rem; }
.landing > section:not(.landing-hero) { max-width: 1240px; margin-left: auto; margin-right: auto; padding-left: 2rem; padding-right: 2rem; box-sizing: border-box; }

.landing-hero {
  position: relative;
  height: calc(100vh - var(--navbar-height, 80px));
  min-height: 460px;
  overflow: hidden;
  border-bottom: 1px solid rgba(56, 189, 248, 0.3);
  background:
    radial-gradient(ellipse at 50% 78%, rgba(56, 189, 248, 0.14), transparent 60%),
    linear-gradient(180deg, #080b11 0%, #0f1420 72%, #0b0e15 100%);
  box-shadow: 0 12px 40px rgba(56, 189, 248, 0.08);
}

.clash-canvas, .ship-canvas { display: block; width: 100%; height: 100%; }
/* the ship's sky is bright, so the hero text gets a dark halo under its glow to stay readable */
.landing-hero .landing-title { text-shadow: 0 2px 14px rgba(4, 10, 22, 0.85), 0 0 10px rgba(56, 189, 248, 0.9), 0 0 26px rgba(56, 189, 248, 0.55); }
.landing-hero .landing-tagline { text-shadow: 0 1px 3px rgba(4, 10, 22, 0.9), 0 0 14px rgba(4, 10, 22, 0.75); }
.landing-hero .landing-scroll { color: #e0f2fe; text-shadow: 0 1px 6px rgba(4, 10, 22, 0.8); }

/* Sign-up celebration: the rocket launch plays full-screen once, over the landing page (static/landing-launch.js) */
.signup-launch {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background:
    radial-gradient(ellipse at 50% 78%, rgba(56, 189, 248, 0.14), transparent 60%),
    linear-gradient(180deg, #080b11 0%, #0f1420 72%, #0b0e15 100%);
  animation: signup-launch-in 0.6s ease both;
}
.signup-launch.is-leaving { opacity: 0; transition: opacity 0.9s ease; }
@keyframes signup-launch-in { from { opacity: 0; } to { opacity: 1; } }
.signup-launch-msg { position: absolute; top: 6%; left: 0; right: 0; padding: 0 1rem; text-align: center; pointer-events: none; }
.signup-launch-msg h2 {
  margin: 0;
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  color: #7dd3fc;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.9), 0 0 26px rgba(56, 189, 248, 0.55);
}
.signup-launch-msg p { margin: 0.5rem 0 0; color: #e6edf3; font-size: 1.1rem; font-weight: 600; }
.signup-launch-skip {
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid rgba(56, 189, 248, 0.6);
  border-radius: 8px;
  background: rgba(6, 14, 28, 0.85);
  color: #e0f2fe;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.signup-launch-skip:hover { box-shadow: 0 0 18px rgba(56, 189, 248, 0.6); }

.landing-hero-title {
  position: absolute;
  top: 5%;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
}

.landing-scroll {
  position: absolute;
  bottom: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(125, 211, 252, 0.7);
  font-size: 1.8rem;
  line-height: 1;
  text-decoration: none;
  animation: landing-bob 2s ease-in-out infinite;
}

@keyframes landing-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 6px); }
}

@media (prefers-reduced-motion: reduce) {
  .landing-scroll { animation: none; }
}

.landing-pitch { max-width: 46rem !important; margin: 2.4rem auto 0; text-align: center; }

/* ---------------- Dashboard: watchlists + pinned widgets ---------------- */
.content:has(.dash-page) { max-width: 1440px; }
.dash { margin-top: 0.5rem; }
.dash-head h1 { margin: 0 0 0.25rem; }
.dash-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.8rem 1.5rem; margin-bottom: 1rem; }
.dash-head h2 { margin: 0 0 0.25rem; }
.dash-head p { margin: 0; max-width: 46rem; }

.dash-add {
  padding: 0.6rem 1.2rem;
  border: 0;
  border-radius: 8px;
  background: #1f6feb;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(56, 139, 253, 0.5);
}

.dash-add:hover { box-shadow: 0 0 22px rgba(56, 189, 248, 0.7); }

.dash-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));  /* widgets span columns; resized by their corner handle */
  grid-auto-flow: row dense;                          /* small widgets fill gaps left by big ones */
  gap: 1rem;
  align-items: start;
  padding-bottom: 65vh;  /* room below the widgets: scroll down to drag one there or stretch one taller */
}

.dash-empty { grid-column: 1 / -1; padding: 2rem; border: 1px dashed #2a2e3a; border-radius: 12px; text-align: center; color: #8b949e; }

.dash-card {
  min-width: 0;
  border: 1px solid #2a2e3a;
  border-radius: 12px;
  background: #151923;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.dash-card:hover { border-color: rgba(125, 211, 252, 0.45); }
/* dragging (static/dashboard.js): the widget's spot becomes a dashed outline and a copy follows the pointer */
.dash-card.is-dragging { border: 1px dashed #7dd3fc; background: rgba(56, 189, 248, 0.05); box-shadow: inset 0 0 22px rgba(56, 189, 248, 0.12); }
.dash-card.is-dragging > * { visibility: hidden; }
.dash-grid.is-moving, .dash-grid.is-moving * { user-select: none; cursor: grabbing !important; }
.dash-grid.is-moving iframe { pointer-events: none; }
.dash-card.dash-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  overflow: hidden;
  margin: 0;
  border-color: #7dd3fc;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.65), 0 0 24px rgba(56, 189, 248, 0.35);
  opacity: 0.92;
  pointer-events: none;
  transition: none;
}
.dash-ghost .dash-resize { display: none; }
.dash-ghost-fill { height: 100%; min-height: 120px; background: repeating-linear-gradient(135deg, #151923 0 12px, #181d28 12px 24px); }

.dash-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid #2a2e3a;
  cursor: grab;
  user-select: none;
  touch-action: none;  /* a finger on the title bar drags the widget instead of scrolling the page */
}

.dash-grip { color: #4b5363; letter-spacing: -2px; }
.dash-card-head h3 { flex: 1; margin: 0; font-size: 0.98rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-chip { margin-left: 0.3rem; padding: 0 0.45rem; border: 1px solid rgba(196, 181, 253, 0.55); border-radius: 999px; color: #c4b5fd; font-size: 0.72rem; font-weight: 600; text-shadow: none; }
.dash-tools { display: flex; gap: 0.2rem; }

.dash-tools a, .dash-tools button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8rem;
  height: 1.8rem;
  padding: 0 0.3rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: #8b949e;
  font-size: 0.85rem;
  text-decoration: none;
  cursor: pointer;
}

.dash-tools a:hover, .dash-tools button:hover { border-color: #2a2e3a; color: #7dd3fc; }
.dash-card-body { padding: 0.8rem 0.9rem 0.9rem; font-size: 0.88rem; }
.dash-card-body a { color: var(--brand-color); font-weight: 600; text-decoration: none; }
.dash-card-body a:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .dash-card { grid-column: 1 / -1 !important; }  /* phones: one widget per row */
}

/* add-widget picker */
.dash-picker {
  width: min(900px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 1rem 1.25rem;
  border: 1px solid rgba(88, 166, 255, 0.55);
  border-radius: 12px;
  background: #11141b;
  color: #e6edf3;
  box-shadow: 0 0 28px rgba(88, 166, 255, 0.25), 0 20px 60px rgba(0, 0, 0, 0.6);
}

.dash-picker::backdrop { background: rgba(5, 7, 12, 0.72); backdrop-filter: blur(2px); }
.dash-picker-head { display: flex; align-items: center; justify-content: space-between; }
.dash-picker-head h3 { margin: 0; }
.dash-picker-head form { margin: 0; }
.dash-picker-ticker { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0.7rem 0; font-size: 0.88rem; color: var(--silver-color); }
.dash-picker-ticker input { margin-left: 0.5rem; padding: 0.4rem 0.6rem; border: 1px solid #2a2e3a; border-radius: 6px; background: #0f1117; color: #e6edf3; text-transform: uppercase; }
.dash-picker-hint { color: #ffb070 !important; }
.dash-picker-list h4 { margin: 1rem 0 0.4rem; color: var(--nav-heading-color); }
.dash-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.6rem; }

.dash-option {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid #2a2e3a;
  border-radius: 8px;
  background: #171a23;
  color: var(--silver-color);
  text-align: left;
  font-size: 0.8rem;
  cursor: pointer;
}

.dash-option strong { color: #e6edf3; font-size: 0.92rem; }
.dash-option:hover { border-color: #7dd3fc; box-shadow: 0 0 12px rgba(56, 189, 248, 0.3); }

/* widget bodies */
.wd-muted { margin: 0.2rem 0; color: #8b949e; font-size: 0.8rem; }
.wd-text { margin: 0.3rem 0; line-height: 1.5; }
.wd-subhead { margin: 0.2rem 0 0.4rem; color: var(--brand-color); text-shadow: var(--brand-glow); font-size: 0.85rem; font-weight: 600; }
.wd-error { margin: 0; color: #ffb070; }
.wd-big { margin: 0.2rem 0 0.5rem; color: #e6edf3; font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.wd-big small { color: #8b949e; font-size: 0.8rem; font-weight: 500; }
.wd-rows { list-style: none; margin: 0.4rem 0 0; padding: 0; }
.wd-rows li { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.32rem 0; border-bottom: 1px solid #20242e; font-variant-numeric: tabular-nums; }
.wd-rows li:last-child { border-bottom: 0; }
.wd-rows li > span:first-child { color: var(--silver-color); }
.wd-checks li { justify-content: flex-start; }
.wd-tick { display: inline-block; width: 1.1rem; font-weight: 700; }
.wd-tick.is-good { color: #3fb950; }
.wd-tick.is-bad { color: #f85149; }
.wd-tick.is-neutral { color: #8b949e; }

.wd-verdict { display: inline-block; margin-bottom: 0.3rem; padding: 0.3rem 0.8rem; border: 1.5px solid currentColor; border-radius: 999px; font-size: 1.1rem; font-weight: 800; }
.wd-pill { padding: 0 0.55rem; border: 1px solid currentColor; border-radius: 999px; font-size: 0.78rem; font-weight: 600; }
.wd-verdict.verdict-bullish, .wd-pill.verdict-bullish { color: #3fb950; }
.wd-verdict.verdict-bullish-lean, .wd-pill.verdict-bullish-lean { color: #a3f0a8; }
.wd-verdict.verdict-neutral, .wd-pill.verdict-neutral { color: #e3b341; }
.wd-verdict.verdict-bearish-lean, .wd-pill.verdict-bearish-lean { color: #ff8fb8; }
.wd-verdict.verdict-bearish, .wd-pill.verdict-bearish { color: #f85149; }

.wd-range { display: flex; align-items: center; gap: 0.6rem; font-size: 0.78rem; color: #8b949e; font-variant-numeric: tabular-nums; }
.wd-range-track, .wd-range-mini { position: relative; flex: 1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, rgba(248, 81, 73, 0.5), rgba(139, 148, 158, 0.35), rgba(63, 185, 80, 0.5)); }
.wd-range-track i, .wd-range-mini i { position: absolute; top: -4px; width: 4px; height: 14px; margin-left: -2px; border-radius: 2px; background: #e6edf3; box-shadow: 0 0 6px rgba(125, 211, 252, 0.8); }
.wd-range-mini { display: inline-block; width: 80px; flex: none; vertical-align: middle; }

.wd-chart { display: block; width: 100%; height: 120px; margin-top: 0.3rem; }
.wd-chart-line { fill: none; stroke: #58a6ff; stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px rgba(88, 166, 255, 0.7)); }
.wd-chart-line.is-down { stroke: #f85149; filter: drop-shadow(0 0 3px rgba(248, 81, 73, 0.6)); }
.wd-chart-fill { fill: rgba(88, 166, 255, 0.08); }
/* yield curve hover readout (static/dashboard.js) */
.wd-curve-wrap { position: relative; cursor: crosshair; }
.wd-curve-guide, .wd-curve-dot, .wd-curve-tip { position: absolute; display: none; pointer-events: none; }
.wd-curve-wrap.is-hover :is(.wd-curve-guide, .wd-curve-dot, .wd-curve-tip) { display: block; }
.wd-curve-guide { top: 0; bottom: 0; width: 1px; background: rgba(125, 211, 252, 0.45); }
.wd-curve-dot { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border: 2px solid #0f1117; border-radius: 50%; background: #58a6ff; box-shadow: 0 0 8px rgba(88, 166, 255, 0.9); }
.wd-curve-tip {
  top: 0;
  z-index: 3;
  padding: 0.45rem 0.6rem;
  border: 1px solid #2f3646;
  border-radius: 8px;
  background: rgba(14, 17, 24, 0.96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  font-size: 0.74rem;
  line-height: 1.45;
  white-space: nowrap;
}
.wd-curve-tip strong { color: var(--brand-color); }
.wd-curve-now { font-size: 0.95rem; font-weight: 700; color: #e6edf3; }
.wd-curve-then { fill: none; stroke: #6e7681; stroke-width: 1.5; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.wd-axis { display: flex; justify-content: space-between; color: #8b949e; font-size: 0.72rem; }
.wd-legend { display: flex; align-items: center; gap: 0.4rem; margin: 0.3rem 0 0; color: #8b949e; font-size: 0.75rem; }
.wd-legend i { display: inline-block; width: 16px; height: 3px; border-radius: 2px; }
.wd-key-now { background: #58a6ff; }
.wd-key-then { background: #6e7681; margin-left: 0.6rem; }

.wd-stance { display: inline-block; margin-bottom: 0.2rem; padding: 0.2rem 0.7rem; border-radius: 6px; background: rgba(88, 166, 255, 0.12); color: #7dd3fc; font-weight: 700; }
.wd-role { font-size: 0.8rem; font-weight: 600; }
.wd-role-support { color: #3fb950; }
.wd-role-resistance { color: #f85149; }
.wd-role-price-inside { color: var(--brand-color); }

.wd-bars { display: grid; gap: 0.25rem; margin: 0.3rem 0 0.5rem; }
.wd-bar-row { display: grid; grid-template-columns: 5.5rem 1fr 1.8rem; align-items: center; gap: 0.5rem; font-size: 0.78rem; }
.wd-bar-row > span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.wd-bar { height: 8px; border-radius: 4px; background: #20242e; overflow: hidden; }
.wd-bar i { display: block; height: 100%; border-radius: 4px; }
.wd-bar-1 { background: #3fb950; }
.wd-bar-2 { background: #7ee787; }
.wd-bar-3 { background: #8b949e; }
.wd-bar-4 { background: #ffa55c; }
.wd-bar-5 { background: #f85149; }

.wd-table { width: 100%; margin: 0; }
.wd-table th, .wd-table td { padding: 0.3rem 0.45rem; font-size: 0.8rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wd-table td .wd-muted { font-size: 0.72rem; }
.wd-heat { font-weight: 700; text-align: center; border-radius: 3px; }

.wd-quads { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.wd-quad { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.55rem 0.65rem; border: 1px solid var(--quad); border-radius: 8px; background: color-mix(in srgb, var(--quad) 8%, transparent); }
.wd-quad strong { color: var(--quad); }
.wd-quad span { color: #e6edf3; font-size: 0.82rem; }
.wd-quad sup { margin-left: 1px; color: #ffb070; font-size: 0.6rem; }

.wd-path { display: flex; align-items: flex-end; gap: 0.35rem; height: 110px; margin: 0.4rem 0; }
.wd-path-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.wd-path-bar { width: 100%; max-width: 26px; border-radius: 4px 4px 0 0; }
.wd-path-bar.is-up { background: rgba(248, 81, 73, 0.6); }
.wd-path-bar.is-down { background: rgba(63, 185, 80, 0.6); }
.wd-path-label { margin-top: 0.2rem; color: #8b949e; font-size: 0.65rem; line-height: 1.1; text-align: center; }

.wd-events li { justify-content: flex-start; align-items: center; }
.wd-time { min-width: 6.2rem; color: #8b949e; font-size: 0.78rem; }
.wd-event { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-event.is-high { color: #ff7b72; font-weight: 600; }

/* watchlist widget */
.wl-bar { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; }
.wl-select, .wl-input { padding: 0.35rem 0.5rem; border: 1px solid #2a2e3a; border-radius: 6px; background: #0f1117; color: #e6edf3; }
.wl-input { text-transform: uppercase; }
.wl-btn, .wl-add button, .wl-remove { padding: 0.3rem 0.65rem; border: 1px solid #2a2e3a; border-radius: 6px; background: #171a23; color: var(--silver-color); font-size: 0.8rem; cursor: pointer; }
.wl-btn:hover, .wl-add button:hover { border-color: #7dd3fc; color: #7dd3fc; }
.wl-add { display: flex; gap: 0.4rem; }
.wl-add .wl-input { flex: 1; max-width: 16rem; }
.wl-msg { min-height: 1em; }
.wl-table-wrap { overflow-x: auto; }
/* watchlist Industry column: the stock's sector ETF (in lavender), its industry, and how the stock is moving
   against the ETF */
.wl-industry { min-width: 13rem; }
.wl-price { color: var(--silver-color); font-weight: 700; }
.wl-ind { display: flex; align-items: center; gap: 0.45rem; cursor: help; }
.wl-ind-name { overflow: hidden; max-width: 12rem; color: #fdc9a0; text-overflow: ellipsis; }  /* pastel orange */
.wl-ind-vs { display: block; margin-top: 0.15rem; font-size: 0.7rem; }
.wl-etf { flex: none; color: var(--pastel-lavender); font-weight: 800; letter-spacing: 0.03em; }
.wl-remove { padding: 0.1rem 0.4rem; border-color: transparent; background: none; color: #6e7681; }
.wl-remove:hover { color: #f85149; }
.wl-spark { width: 90px; height: 26px; }
.wl-spark polyline { fill: none; stroke-width: 1.6; }
.wl-spark .is-up { stroke: #3fb950; }
.wl-spark .is-down { stroke: #f85149; }

.landing-title {
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  letter-spacing: 0.02em;
  color: #7dd3fc;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.9), 0 0 26px rgba(56, 189, 248, 0.55), 0 0 50px rgba(56, 189, 248, 0.3);
}

.landing-tagline { margin: 0.4rem 0 0; color: #e6edf3; font-size: 1.35rem; font-weight: 600; }
.landing-sub { margin: 0.8rem auto 0; color: var(--silver-color); font-size: 1rem; line-height: 1.6; }

.landing-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin-top: 1.4rem; }

.cta-primary, .cta-secondary {
  padding: 0.75rem 1.4rem;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.cta-primary { background: #1f6feb; color: #fff; box-shadow: 0 0 16px rgba(56, 139, 253, 0.55); }
.cta-secondary { border: 1px solid rgba(125, 211, 252, 0.6); color: #7dd3fc; }
.cta-primary:hover, .cta-secondary:hover { transform: translateY(-2px); box-shadow: 0 0 24px rgba(56, 189, 248, 0.7); }

.landing-desks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  margin-top: 2.6rem;
}

.desk-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid #2a2e3a;
  border-radius: 12px;
  background: #151923;
  color: var(--silver-color);
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.desk-card:hover { border-color: rgba(125, 211, 252, 0.7); box-shadow: 0 0 22px rgba(56, 189, 248, 0.25); transform: translateY(-3px); }
.desk-card h3 { margin: 0; font-size: 1.2rem; }
.desk-card p { margin: 0; font-size: 0.9rem; line-height: 1.5; flex: 1; }
.desk-kicker { color: #8b949e; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.desk-go { color: #7dd3fc; font-size: 0.88rem; font-weight: 600; }

.landing-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  margin: 2.2rem 0 0.5rem;
  padding: 1.2rem 0 0;
  border-top: 1px solid #2a2e3a;
}

.landing-points div { display: flex; flex-direction: column; gap: 0.25rem; }
.landing-points strong { color: #e6edf3; }
.landing-points span { color: #8b949e; font-size: 0.88rem; line-height: 1.5; }

.page-links {
  line-height: 2;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0 2rem;
}

th, td {
  border: 1px solid #2a2e3a;
  padding: 0.5rem 0.75rem;
  text-align: left;
}

th {
  background: #171a23;
}

tr:nth-child(even) {
  background: #14161d;
}

.notice {
  color: var(--silver-color);
}

.error {
  color: var(--silver-color);
}

.timestamp {
  color: var(--silver-color);
  font-size: 0.9rem;
}

.refresh-link {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.4rem 0.9rem;
  background: #238636;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}

.refresh-link:hover {
  background: #2ea043;
}

.rrg-image {
  max-width: 100%;
  border: 1px solid #2a2e3a;
  border-radius: 4px;
}

.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

.page-header h2 {
  margin: 0;
}

/* Title, ticker controls and ticker summary, pinned above a pastel divider. Its `position` is set in the
   media queries above (sticky on desktop, relative on phones); setting it here would override the sticky. */
.sticky-header {
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  background: #0f1117;
}

/* Company name with the analysis window to its right; sector/price facts on the line underneath. */
.ticker-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1.5rem;
  margin-top: 0.9rem;
}

.ticker-summary-facts {
  flex-basis: 100%;
}

.ticker-summary h2 {
  margin: 0;
  font-size: 1.25rem;
}

.ticker-summary .timestamp {
  margin: 0.15rem 0;
}

.sticky-header.no-divider::after {
  display: none;
}

.analysis-panel {
  scroll-margin-top: calc(var(--navbar-height, 0px) + var(--sticky-header-height, 0px) + 1rem);
}

.sticky-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-color);
  box-shadow: 0 0 8px rgba(88, 166, 255, 0.55), 0 0 18px rgba(88, 166, 255, 0.25);
}

.ma-guide-row td {
  padding: 0;
  border-top: 0;
}

/* Pastel expandable explanations, shared by the Moving Averages rows and the Overview signal lists. */
.ma-guide-row details summary,
.signal-list details summary {
  cursor: pointer;
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
  color: var(--silver-color);
  list-style: none;
}

.ma-guide-row summary::-webkit-details-marker,
.signal-list summary::-webkit-details-marker {
  display: none;
}

.ma-guide-row summary::before,
.signal-list summary::before {
  content: "\25B8";
  display: inline-block;
  margin-right: 0.4rem;
  color: var(--pastel-lavender);
  transition: transform 0.15s ease;
}

.ma-guide-row details[open] summary::before,
.signal-list details[open] summary::before {
  transform: rotate(90deg);
}

.ma-guide-row summary:hover,
.signal-list summary:hover {
  color: var(--brand-color);
}

/* An opened dropdown's label turns neon blue; its explanation below stays silver. */
.ma-guide-row details[open] summary,
.signal-list details[open] summary {
  color: var(--brand-color);
  text-shadow: var(--brand-glow);
}

.signal-reason,
.ma-guide {
  color: var(--silver-color);
}

.ma-guide,
.signal-reason {
  margin: 0 0.75rem 0.6rem 1.6rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--pastel-lavender);
  font-size: 0.9rem;
}

.ma-guide p {
  margin: 0.4rem 0;
}

.signal-reason {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

.ticker-form {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.page-header .ticker-form {
  margin-bottom: 0;
  align-items: flex-end;
}

/* "Analysis window" caption sitting on the timeframe dropdown it describes. */
.timeframe-field {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.timeframe-label {
  color: #8b949e;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ticker-form select {
  padding: 0.4rem 0.5rem;
  background: #171a23;
  border: 1px solid #2a2e3a;
  border-radius: 4px;
  color: var(--silver-color);
}

/* ETF / index / crypto notice in the pinned header for tabs whose data can't exist. */
/* Dividends: one bar per year, value on top. */
.div-history {
  margin: 0.2rem 0 1.2rem;
  padding: 0.8rem 1rem 0.6rem;
  border: 1px solid #2a2e3a;
  border-radius: 8px;
  background: #171a23;
}

.div-history-title { display: block; margin-bottom: 0.5rem; color: var(--silver-color); font-size: 0.82rem; font-weight: 600; }

.div-bars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  align-items: end;
  height: 150px;
}

.div-bar {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}

.div-bar i {
  display: block;
  width: 100%;
  max-width: 44px;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #58a6ff, rgba(88, 166, 255, 0.45));
}

.div-bar-value { margin-bottom: 0.2rem; color: #e6edf3; font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.div-bar-year { margin-top: 0.25rem; color: #8b949e; font-size: 0.72rem; }

/* ETF / non-stock notice: light neon orange, pulsing like the red disclaimer at the foot of the page. */
.na-banner {
  margin: 0.6rem 0 0;
  color: #ffb070;
  font-weight: 700;
  text-shadow: 0 0 6px rgba(255, 150, 70, 0.8), 0 0 14px rgba(255, 130, 50, 0.45);
  animation: na-banner-pulse 2.4s ease-in-out infinite;
}

@keyframes na-banner-pulse {
  0%, 100% {
    color: #ffa55c;
    text-shadow: 0 0 4px rgba(255, 150, 70, 0.55), 0 0 10px rgba(255, 130, 50, 0.25);
  }
  50% {
    color: #ffc594;
    text-shadow: 0 0 8px rgba(255, 160, 80, 1), 0 0 20px rgba(255, 130, 50, 0.75), 0 0 34px rgba(255, 110, 30, 0.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .na-banner { animation: none; }
}

/* Fundamentals: metric tiles (value + the verdict signal it feeds, if any) and margin bars. */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.75rem;
  margin: 0.25rem 0 1rem;
}

.metric-tile {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid #2a2e3a;
  border-radius: 8px;
  background: #171a23;
}

.metric-tile.is-good { box-shadow: inset 3px 0 0 #3fb950; }
.metric-tile.is-bad { box-shadow: inset 3px 0 0 #f85149; }
.metric-tile.is-neutral { box-shadow: inset 3px 0 0 var(--silver-color); }
.metric-tile.is-context { box-shadow: inset 3px 0 0 #4b5363; }

.metric-value {
  color: #e6edf3;
  font-size: 1.35rem;
  font-weight: 600;
}

.metric-signal {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--silver-color);
}

.metric-tile.is-good .metric-signal span { color: #3fb950; }
.metric-tile.is-bad .metric-signal span { color: #f85149; }
.metric-tile.is-neutral .metric-signal span { color: var(--silver-color); }

.metric-signal.is-context-label {
  color: #6e7681;
  font-weight: 500;
}

/* Key explaining the four tile accent colors. */
.tile-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin: 0.25rem 0 1rem;
  color: var(--silver-color);
  font-size: 0.82rem;
}

.tile-key span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.tile-key-label {
  color: #8b949e;
}

.tile-key i {
  display: inline-block;
  width: 4px;
  height: 1rem;
  border-radius: 2px;
}

.tile-key .key-good { background: #3fb950; }
.tile-key .key-bad { background: #f85149; }
.tile-key .key-neutral { background: var(--silver-color); }
.tile-key .key-context { background: #4b5363; }

.margin-bars {
  display: grid;
  gap: 0.5rem;
  margin: 0.25rem 0 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid #2a2e3a;
  border-radius: 8px;
  background: #0f1117;
}

.margin-row {
  display: grid;
  grid-template-columns: 8.5rem 1fr 4.5rem;
  align-items: center;
  gap: 0.75rem;
}

.margin-label {
  color: var(--silver-color);
  font-size: 0.85rem;
}

.margin-track {
  height: 10px;
  border-radius: 5px;
  background: var(--mark-grid);
}

.margin-track i {
  display: block;
  height: 100%;
  border-radius: 0 5px 5px 0;
  background: var(--mark-accent);
}

.margin-value {
  color: #e6edf3;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.margin-value.is-negative { color: #f85149; }

.ticker-form input {
  padding: 0.4rem 0.6rem;
  background: #171a23;
  border: 1px solid #2a2e3a;
  color: var(--silver-color);
  border-radius: 4px;
}

/* Deeper brand-blue button with the same neon glow as the blue headings. */
.ticker-form button {
  padding: 0.4rem 0.9rem;
  background: #2f81f7;
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(88, 166, 255, 0.55), 0 0 18px rgba(88, 166, 255, 0.25);
  transition: box-shadow 0.15s ease, background 0.15s ease;
}

.ticker-form button:hover {
  background: #4493f8;
  box-shadow: 0 0 10px rgba(88, 166, 255, 0.75), 0 0 24px rgba(88, 166, 255, 0.4);
}

.suggestion {
  color: var(--silver-color);
}

.suggestion a {
  color: var(--brand-color);
}

.muted {
  color: var(--silver-color);
  font-size: 0.85rem;
}

.verdict-card {
  border: 1px solid #2a2e3a;
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  background: #171a23;
}

/* Verdict text in a glowing pill outlined in the verdict color (set per verdict below). */
.verdict-headline {
  display: inline-block;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 0.6rem;
  padding: 0.35rem 1.1rem;
  border: 2px solid var(--verdict-bright, var(--silver-color));
  border-radius: 999px;
  color: var(--verdict-bright, var(--silver-color));
  background: color-mix(in srgb, var(--verdict-bright, #c0c0c0) 8%, transparent);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--verdict-bright, #c0c0c0) 15%, transparent),
    0 0 18px color-mix(in srgb, var(--verdict-bright, #c0c0c0) 35%, transparent);
  text-shadow: 0 0 10px color-mix(in srgb, var(--verdict-bright, #c0c0c0) 45%, transparent);
}

/* Headline pill with the score line centred beneath it. */
.verdict-summary {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0.75rem;
}

/* A softened tint of the verdict color: ties the line to the pill without competing with it. */
.verdict-score {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--verdict-bright, #c0c0c0) 55%, var(--silver-color));
  text-align: center;
}

.verdict-columns {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.verdict-columns > div {
  flex: 1;
  min-width: 200px;
}

.verdict-columns h4 {
  margin-bottom: 0.35rem;
}

/* The verdict color outlines the card only (same neon style as the headline pill); the inside stays neutral. */
.verdict-card[class*="verdict-bull"],
.verdict-card[class*="verdict-bear"],
.verdict-card.verdict-neutral {
  border: 2px solid var(--verdict-bright);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--verdict-bright) 15%, transparent),
    0 0 18px color-mix(in srgb, var(--verdict-bright) 35%, transparent);
}

/* Neon verdict color, used for both the card outline and the headline pill. */
.verdict-card.verdict-bullish {
  --verdict-bright: #3fb950;
}

/* verdict colors: bullish green, leaning bullish light green, neutral amber, leaning bearish pink, bearish red */
.verdict-card.verdict-bullish-lean {
  --verdict-bright: #a3f0a8;
}

.verdict-card.verdict-neutral {
  --verdict-bright: #e3b341;
}

.verdict-card.verdict-bearish-lean {
  --verdict-bright: #ff8fb8;
}

.verdict-card.verdict-bearish {
  --verdict-bright: #f85149;
}

/* Scroll window: shows at most 8 table rows; more scroll inside the box (header stays put), not the page. */
.scroll-window {
  --row-height: 2.6rem;
  max-height: calc(var(--row-height) * 9);  /* header + 8 rows */
  overflow-y: auto;
  margin: 0.5rem 0 1.5rem;
  border: 1px solid #2a2e3a;
  border-radius: 6px;
}

.scroll-window table {
  margin: 0;
}

.scroll-window thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.scroll-window tbody tr {
  height: var(--row-height);
}

.whale-table td {
  font-size: 0.85rem;
}

/* Hover / focus explanation for a term (e.g. whale "Type"): dotted underline, wrapping pop-up. */
.info-tip {
  position: relative;
  border-bottom: 1px dotted #8b949e;
  cursor: help;
}

/* The pop-up is one floating element positioned by script, so scrolling boxes can't clip it. */
.floating-tip {
  position: fixed;
  z-index: 200;
  width: 19rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(88, 166, 255, 0.5);
  border-radius: 6px;
  background: #0b0d12;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 10px rgba(88, 166, 255, 0.2);
  color: var(--silver-color);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.45;
  white-space: normal;
  pointer-events: none;
}

.info-tip:focus-visible {
  outline: 2px solid var(--brand-color);
  outline-offset: 2px;
}

.whale-sources {
  margin: 0 0 0.5rem;
  padding-left: 1.2rem;
}

.whale-sources li {
  margin: 0.2rem 0;
}

.whale-windows {
  margin: 0.25rem 0 0.25rem;
}

.whale-count {
  margin-left: 0.5rem;
}

.whale-empty {
  margin: 0.75rem;
}

/* Up to 15 headlines: keep the list to a readable height and scroll the rest. */
.news-list {
  max-height: 22rem;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.news-list li {
  margin: 0.35rem 0;
}

.whale-table td:first-child,
.whale-table td:nth-child(4) {
  white-space: nowrap;
}

.whale-table td.muted {
  max-width: 22rem;
}

.whale-buy .whale-direction span { color: #3fb950; }
.whale-sell .whale-direction span { color: #f85149; }
.whale-other .whale-direction span { color: #8b949e; }

.whale-table tr.is-whale td:nth-child(2) {
  color: #e6edf3;
  font-weight: 600;
}

/* ---- Sector Money Flow heat maps (diverging: blue = in / together, orange = out / rotating) ---- */
.heat-word-in { color: #58a6ff; }
.heat-word-out { color: #e8843f; }

.mfi-table td.heat-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.heat-scroll {
  overflow-x: auto;
  margin: 0.5rem 0;
}

.heat-grid {
  width: auto;
  margin: 0;
  border-collapse: separate;
  border-spacing: 2px;
}

.heat-grid th,
.heat-grid td {
  border: 0;
  padding: 0.4rem 0.45rem;
  font-size: 0.78rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.heat-grid tbody th {
  text-align: left;
  white-space: nowrap;
  background: transparent;
}

.heat-grid tbody th .muted {
  font-size: 0.72rem;
}

.heat-grid td {
  min-width: 3.4rem;
  border-radius: 3px;
}

.heat-grid td.heat-self {
  background: #171a23;
  color: #4b5363;
}

.heat-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 2px;
  margin: 0.4rem 0 1.5rem;
  color: #8b949e;
  font-size: 0.78rem;
}

.heat-legend span {
  margin: 0 0.5rem;
}

.heat-legend i {
  display: inline-block;
  min-width: 3.2rem;
  padding: 0.15rem 0.3rem;
  border-radius: 3px;
  font-style: normal;
  font-size: 0.72rem;
  text-align: center;
}

/* 5-year history: sector rows x month columns. 2px gaps separate cells (no borders). */
.flow-history {
  display: grid;
  grid-template-columns: 11.5rem repeat(var(--months), minmax(7px, 1fr)) 4.5rem;
  gap: 2px;
  align-items: center;
  min-width: calc(11.5rem + var(--months) * 9px + 4.5rem);
  font-size: 0.75rem;
}

/* Year labels across the top: each spans its months and opens the zoomed view of that year. */
.flow-year {
  height: 1.5rem;
  padding: 0;
  border: 1px solid #2a2e3a;
  border-radius: 4px;
  background: #171a23;
  color: var(--nav-heading-color);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: zoom-in;
  overflow: hidden;
  white-space: nowrap;
}

.flow-year:hover,
.flow-year:focus-visible {
  border-color: var(--brand-color);
  background: rgba(88, 166, 255, 0.12);
  box-shadow: 0 0 8px rgba(88, 166, 255, 0.35);
  outline: none;
}

.flow-cell { cursor: zoom-in; }
.flow-cell:hover { outline: 1px solid #e6edf3; outline-offset: 0; }

/* Extreme months (beyond +/-52%): a thin light ring on top of the red / green, so they pop in the dense grid. */
.flow-cell.is-extreme { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.flow-cell.is-year.is-extreme { box-shadow: inset 2px 0 0 #0f1117, inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.flow-word-extreme-in { color: #3fb950; }
.flow-word-extreme-out { color: #f85149; }

/* Zoomed year: a modal over the page with the year's sector x month grid, every value printed. */
.flow-zoom {
  width: min(1100px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 1rem 1.25rem 0.75rem;
  border: 1px solid rgba(88, 166, 255, 0.55);
  border-radius: 12px;
  background: #11141b;
  color: #e6edf3;
  box-shadow: 0 0 28px rgba(88, 166, 255, 0.25), 0 20px 60px rgba(0, 0, 0, 0.6);
}

.flow-zoom::backdrop {
  background: rgba(5, 7, 12, 0.72);
  backdrop-filter: blur(2px);
}

.flow-zoom-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.flow-zoom-head h3 { margin: 0; font-size: 1.2rem; }
.flow-zoom-head form { margin: 0 0 0 auto; }

.flow-zoom-step,
.flow-zoom-close {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid #2a2e3a;
  border-radius: 6px;
  background: #171a23;
  color: #e6edf3;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.flow-zoom-step:hover:not(:disabled),
.flow-zoom-close:hover { border-color: var(--brand-color); color: var(--brand-color); }
.flow-zoom-step:disabled { opacity: 0.3; cursor: default; }

.flow-zoom-grid { width: 100%; }
.flow-zoom-grid td { min-width: 3.6rem; padding: 0.55rem 0.4rem; font-size: 0.85rem; font-weight: 600; }
.flow-zoom-grid td.is-extreme { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
.flow-zoom-grid thead th { font-size: 0.8rem; }
.flow-zoom-avg { border-left: 3px solid #11141b; }
.flow-zoom-avg-head { color: var(--nav-heading-color); }
.flow-zoom-hint { margin: 0.25rem 0 0; font-size: 0.75rem; }

.flow-sector {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--silver-color);
}

.flow-sector .muted {
  font-size: 0.7rem;
}

.flow-cell {
  height: 22px;
  border-radius: 2px;
}

.flow-cell.is-year {
  box-shadow: inset 2px 0 0 #0f1117;  /* a slightly wider gap before each January */
}

.flow-recent-head,
.flow-recent {
  text-align: right;
  color: var(--silver-color);
  font-variant-numeric: tabular-nums;
}

.flow-recent-head {
  color: #8b949e;
  font-size: 0.7rem;
}

.flow-table {
  width: auto;
  margin: 0;
}

.flow-table th,
.flow-table td {
  padding: 0.25rem 0.4rem;
  font-size: 0.72rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---- Rotation Tracker: a 2x2 board laid out like the RRG. Quadrant colors match the graph's labels,
   and every quadrant is also named in text, so color is never the only cue. ---- */
.rot-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0.75rem 0 1.5rem;
}

.rot-quadrant {
  --quad: #8b949e;
  padding: 0.8rem 1rem;
  border: 1px solid #2a2e3a;
  border-top: 3px solid var(--quad);
  border-radius: 8px;
  background: #171a23;
}

/* Relative Rotation Graph (SVG): tinted quadrants, fading trails colored by each sector's current quadrant,
   ticker labels at today's position. Hovering one sector brightens its trail; the rest stay as they are. */
.rrg-card {
  margin: 0.6rem 0 1.2rem;
  padding: 0.8rem 0.9rem 0.6rem;
  border: 1px solid #2a2e3a;
  border-radius: 10px;
  background: #11141b;
}

.rrg-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
}

.rrg-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 0.35rem; border-radius: 50%; }
.rrg-svg { display: block; width: 100%; height: auto; }
.rrg-quad { opacity: 0.07; }
.rrg-quad-label { font-size: 13px; font-weight: 800; letter-spacing: 0.12em; opacity: 0.85; }
.rrg-grid { stroke: #20242e; stroke-width: 1; }
.rrg-center { stroke: #4b5363; stroke-width: 1.2; stroke-dasharray: 4 4; }
.rrg-tick { fill: #8b949e; font-size: 11px; }
.rrg-axis-title { fill: #8b949e; font-size: 11.5px; }
.rrg-trail { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; opacity: 0.55; }
.rrg-head { stroke: #0f1117; stroke-width: 2; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.25)); }
.rrg-label { fill: #e6edf3; font-size: 12px; font-weight: 700; paint-order: stroke; stroke: #11141b; stroke-width: 3px; }
.rrg-sector { transition: opacity 0.15s ease; cursor: default; outline: none; }
.rrg-sector:hover .rrg-trail, .rrg-sector:focus .rrg-trail { opacity: 1; stroke-width: 2.6; }

/* watchlist bar on the Elite Analysis Overview (static/overview-watchlist.js) */
.ov-watchlist { margin: 0 0 1rem; padding: 0.7rem 0.85rem; border: 1px solid #2a2e3a; border-radius: 10px; background: #151923; }
.ov-wl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.7rem; margin-bottom: 0.55rem; }
.ov-wl-title { color: var(--nav-heading-color); font-weight: 800; text-shadow: 0 0 8px rgba(147, 197, 253, 0.45); }
.ov-wl-select, .ov-wl-toggle {
  padding: 0.3rem 0.6rem;
  border: 1px solid #2f3646;
  border-radius: 7px;
  background: #0f1117;
  color: #c9d1d9;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.ov-wl-toggle { border-color: rgba(88, 166, 255, 0.55); color: #cfe6ff; }
.ov-wl-toggle:hover { box-shadow: 0 0 12px rgba(88, 166, 255, 0.45); }
.ov-wl-toggle.is-listed { border-color: rgba(63, 185, 80, 0.5); color: #a7f3d0; }
.ov-wl-dash { margin-left: auto; color: var(--brand-color); font-size: 0.8rem; text-decoration: none; }
.ov-wl-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ov-wl-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid #2f3646;
  border-radius: 999px;
  background: #10131a;
  color: #c9d1d9;
  font-size: 0.8rem;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ov-wl-chip b { color: var(--pastel-lavender); }
.ov-wl-chip:hover { border-color: rgba(125, 211, 252, 0.6); box-shadow: 0 0 10px rgba(56, 189, 248, 0.3); }
.ov-wl-chip.is-current { border-color: var(--brand-color); box-shadow: 0 0 10px rgba(88, 166, 255, 0.45); }
.ov-wl-price { color: var(--silver-color); font-weight: 700; }
.is-embed .ov-watchlist { display: none !important; }

/* ETF holdings window on Elite Analysis (static/etf-window.js): opened by clicking a sector ticker in the Money
   Flow Index tab, it hangs just under the pinned bar (normal = a panel on the right, maximized = full width);
   minimized = closed */
.etf-link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  text-decoration: underline dotted rgba(196, 181, 253, 0.6);
  text-underline-offset: 3px;
}
.etf-link:hover, .etf-link:focus-visible { color: var(--pastel-lavender); text-decoration-style: solid; }
.etfw {
  --etfw-top: calc(var(--navbar-height, 70px) + var(--sticky-header-height, 120px) + 6px);
  position: fixed;
  top: var(--etfw-top);
  right: 16px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  width: min(680px, calc(100vw - 32px));
  height: min(620px, calc(100vh - var(--etfw-top) - 16px));
  border: 1px solid #2f3646;
  border-radius: 12px;
  background: #0e1118;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 24px rgba(88, 166, 255, 0.12);
  color: #c9d1d9;
  font-size: 0.8rem;
}
.etfw[hidden] { display: none; }
.etfw[data-state="max"] { left: 12px; right: 12px; bottom: 12px; width: auto; height: auto; }
.etfw:not([data-state="max"]) .is-wide { display: none; }
.etfw-head { display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.5rem 0.45rem 0.7rem; border-bottom: 1px solid #232a37; }
.etfw-title { flex: 1; display: flex; align-items: center; gap: 0.4rem; color: var(--nav-heading-color); font-size: 0.9rem; font-weight: 800; text-shadow: 0 0 8px rgba(147, 197, 253, 0.45); white-space: nowrap; }
.etfw-group { align-self: center; margin: 0 0.1rem 0 0.35rem; color: #6e7681; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.etfw-group:first-child { margin-left: 0; }
.etfw-now { color: #c9d1d9; font-size: 0.78rem; font-weight: 600; text-shadow: none; }
.etfw-icon { color: var(--brand-color); }
.etfw-tools { display: flex; gap: 0.2rem; }
.etfw-tools button { width: 1.9rem; height: 1.7rem; border: 1px solid #2f3646; border-radius: 6px; background: #10131a; color: #8b949e; font-size: 0.8rem; cursor: pointer; }
.etfw-tools button:hover { border-color: rgba(125, 211, 252, 0.6); color: #7dd3fc; }
.etfw-body { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 0.55rem 0.7rem 0.5rem; gap: 0.45rem; }
.etfw-tabs { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.etfw-tabs button { padding: 0.2rem 0.5rem; border: 1px solid #2f3646; border-radius: 6px; background: #10131a; color: var(--pastel-lavender); font: inherit; font-size: 0.76rem; font-weight: 800; cursor: pointer; }
.etfw-tabs button:hover { border-color: rgba(196, 181, 253, 0.6); }
.etfw-tabs button.is-active { border-color: var(--pastel-lavender); background: rgba(196, 181, 253, 0.14); box-shadow: 0 0 10px rgba(196, 181, 253, 0.35); }
.etfw-summary { line-height: 1.45; }
.etfw-summary strong { color: var(--pastel-lavender); }
.etfw-filter { padding: 0.35rem 0.55rem; border: 1px solid #2f3646; border-radius: 7px; background: #0b0e14; color: #e6edf3; font: inherit; }
.etfw-table-wrap { flex: 1; min-height: 0; overflow: auto; border: 1px solid #232a37; border-radius: 8px; }
.etfw-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.etfw-table th, .etfw-table td { padding: 0.3rem 0.5rem; border-bottom: 1px solid #1c222d; text-align: right; white-space: nowrap; font-size: 0.78rem; }
.etfw-table th:first-child, .etfw-table td:first-child, .etfw-table .etfw-name, .etfw-table th[data-sort="name"] { text-align: left; }
.etfw-table thead th { position: sticky; top: 0; z-index: 1; background: #141924; color: var(--brand-color); font-weight: 700; cursor: pointer; user-select: none; text-shadow: none; }
.etfw-table thead th:hover, .etfw-table thead th.is-sorted { color: #cfe6ff; }
.etfw-table tbody tr:hover { background: rgba(88, 166, 255, 0.06); }
.etfw-table td a { color: var(--pastel-lavender); font-weight: 800; text-decoration: none; }
.etfw-table td a:hover { text-decoration: underline; }
.etfw-name { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; color: #fdc9a0; }
.etfw-price { color: var(--silver-color); font-weight: 700; }
.etfw-weight { display: inline-block; width: 2.6rem; height: 4px; margin-right: 0.4rem; border-radius: 2px; background: #1e2430; vertical-align: middle; }
.etfw-weight i { display: block; height: 100%; border-radius: 2px; background: var(--brand-color); opacity: 0.75; }
.etfw-foot { margin: 0; color: #6e7681; font-size: 0.7rem; }
.etfw .is-up { color: #3fb950; }
.etfw .is-down { color: #f85149; }
@media (max-width: 700px) {
  .etfw { top: 8px; left: 8px; right: 8px; bottom: 8px; width: auto; height: auto; z-index: 1000; }
}

/* sector ETF hover card (static/etf-popup.js) */
[data-etf] { cursor: help; }
.mfi-table tr[data-etf]:hover td, .rot-quadrant li[data-etf]:hover { background: rgba(88, 166, 255, 0.06); }
.etf-card {
  position: fixed;
  z-index: 1000;
  width: min(430px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: hidden;
  padding: 0.85rem 0.95rem 0.8rem;
  border: 1px solid #2f3646;
  border-radius: 12px;
  background: rgba(14, 17, 24, 0.97);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 0, 0, 0.4);
  color: #c9d1d9;
  font-size: 0.78rem;
  line-height: 1.35;
  pointer-events: none;
}
.etf-card[hidden] { display: none; }
.etf-head { display: flex; justify-content: space-between; gap: 0.8rem; padding-bottom: 0.55rem; border-bottom: 2px solid var(--quad); }
.etf-title { font-size: 1rem; color: #e6edf3; }
.etf-title strong { color: var(--brand-color); margin-right: 0.3rem; }
.etf-sub { color: #8b949e; font-size: 0.72rem; }
.etf-price { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
.etf-price strong { font-size: 1.05rem; color: #e6edf3; }
.etf-card .is-up { color: #3fb950; }
.etf-card .is-down { color: #f85149; }
.etf-rot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; margin: 0.55rem 0; }
.etf-quad { color: var(--quad); font-weight: 800; letter-spacing: 0.04em; }
.etf-next { color: #8b949e; }
.etf-stats, .etf-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 0.9rem; margin: 0.4rem 0 0.6rem; }
.etf-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.etf-stats dt, .etf-facts dt, .etf-range > span, .etf-holdings > span { color: #8b949e; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; }
.etf-stats dd, .etf-facts dd { margin: 0.05rem 0 0; color: #e6edf3; font-weight: 600; }
.etf-stats small { color: #8b949e; font-weight: 400; }
.etf-trend { font-weight: 400 !important; font-size: 0.74rem; }
.etf-range { margin: 0.2rem 0 0.55rem; }
.etf-range-bar { position: relative; height: 5px; margin: 0.35rem 0 0.25rem; border-radius: 3px; background: linear-gradient(90deg, #f85149, #e3b341, #3fb950); opacity: 0.8; }
.etf-range-bar i { position: absolute; top: -3px; width: 3px; height: 11px; margin-left: -1.5px; border-radius: 2px; background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, 0.8); }
.etf-range-ends { display: flex; justify-content: space-between; color: #8b949e; font-size: 0.7rem; }
.etf-perf { width: 100%; border-collapse: collapse; margin: 0.2rem 0 0.5rem; font-variant-numeric: tabular-nums; }
.etf-perf th, .etf-perf td { padding: 0.18rem 0.2rem; text-align: right; font-size: 0.72rem; text-shadow: none; }
.etf-perf thead th { color: #8b949e; font-weight: 600; }
.etf-perf tbody th { text-align: left; color: #e6edf3; }
.etf-perf tr.is-bench td, .etf-perf tr.is-bench th { color: #8b949e; }
.etf-perf tr.is-diff { border-top: 1px solid #2a2e3a; }
.etf-partner { margin: 0 0 0.55rem; color: #aab4c0; }
.etf-partner b { color: var(--brand-color); }
.etf-holdings ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.15rem 0.9rem; margin: 0.3rem 0 0; padding: 0; list-style: none; }
.etf-holdings li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) 2.6rem; grid-template-rows: auto 3px; column-gap: 0.3rem; align-items: center; }
.etf-holdings b { color: #e6edf3; }
.etf-h-name { overflow: hidden; color: #8b949e; font-size: 0.68rem; white-space: nowrap; text-overflow: ellipsis; }
.etf-h-w { grid-row: 1; grid-column: 3; text-align: right; }
.etf-h-bar { grid-row: 2; grid-column: 1 / -1; height: 3px; border-radius: 2px; background: #1e2430; }
.etf-h-bar i { display: block; height: 100%; border-radius: 2px; background: var(--brand-color); opacity: 0.7; }

.rot-improving { --quad: #58a6ff; }
.rot-leading { --quad: #3fb950; }
.rot-weakening { --quad: #e3b341; }
.rot-lagging { --quad: #f85149; }

.rot-quadrant header strong {
  color: var(--quad);
  font-size: 1.05rem;
  margin-right: 0.5rem;
}

.rot-quadrant header p {
  margin: 0.25rem 0 0.5rem;
}

.rot-quadrant ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rot-quadrant li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
  padding: 0.45rem 0;
  border-top: 1px solid #20242e;
}

.rot-arrow {
  width: 1.2rem;
  color: var(--quad);
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
}

.rot-name strong {
  color: #e6edf3;
}

.rot-detail {
  flex-basis: 100%;
  padding-left: 1.7rem;
  font-size: 0.8rem;
}

.rot-next {
  color: var(--brand-color);
}

.rot-badge {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.rot-badge.is-new {
  color: #0f1117;
  background: var(--brand-color);
  box-shadow: 0 0 8px rgba(88, 166, 255, 0.6);
}

.rot-badge.is-choppy {
  color: #e3b341;
  border: 1px solid #e3b341;
}

.rot-empty {
  margin: 0.5rem 0 0;
}

.rot-chip {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--quad);
  color: var(--quad);
  font-size: 0.8rem;
  white-space: nowrap;
}

.rot-crossings td.rot-move,
.rot-crossings td:first-child {
  white-space: nowrap;
}

@media (max-width: 700px) {
  .rot-board {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Analysis split: group labels in the left pane, per-side sub-verdicts, and side tags on signals ---- */
/* Group labels: styled exactly like the left-pane heading ("Elite Analysis Overview"). */
.section-nav-group {
  display: inline-block;
  justify-self: start;
  margin: 1rem 0 0.3rem calc(0.65rem + 2px);
  font-size: 1rem;
  font-weight: bold;
  color: var(--nav-heading-color);
  text-shadow: 0 0 8px rgba(147, 197, 253, 0.55), 0 0 18px rgba(147, 197, 253, 0.25);
}

.signal-group {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0 0.4rem;
  border: 1px solid #4b5363;
  border-radius: 999px;
  color: #8b949e;
  font-size: 0.66rem;
  font-weight: 600;
  vertical-align: middle;
  text-shadow: none;
}

.signal-group-technical { border-color: rgba(88, 166, 255, 0.6); color: #79b8ff; }
.signal-group-fundamental { border-color: rgba(196, 181, 253, 0.6); color: #c4b5fd; }
.signal-group-relative { border-color: rgba(139, 148, 158, 0.8); color: var(--silver-color); }

/* Sub-verdict card (top of each group of tabs): same neon outline as the overall card, smaller headline. */
.sub-verdict {
  margin: 0.25rem 0 1.5rem;
}

.sub-verdict-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-bottom: 0.35rem;
}

.sub-verdict-title {
  color: var(--silver-color);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sub-verdict .verdict-headline {
  margin: 0;
  font-size: 1.05rem;
}

.sub-verdict-overall {
  margin-left: auto;
  color: #8b949e;
  font-size: 0.8rem;
}

.sub-verdict-overall strong {
  color: var(--silver-color);
}

/* the overall verdict named in each side's panel, in its verdict color */
.verdict-text.verdict-bullish { color: #3fb950; }
.verdict-text.verdict-bullish-lean { color: #a3f0a8; }
.verdict-text.verdict-neutral { color: #e3b341; }
.verdict-text.verdict-bearish-lean { color: #ff8fb8; }
.verdict-text.verdict-bearish { color: #f85149; }

.sub-verdict .verdict-score {
  text-align: left;
}

/* Overview strip: one tile per side, outlined in its verdict color; each links to that group's tab. */
.sub-verdict-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  margin: 0.5rem 0 1.5rem;
}

.sub-verdict-tile {
  --verdict-bright: var(--silver-color);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.8rem 1rem;
  border: 2px solid var(--verdict-bright);
  border-radius: 8px;
  background: #171a23;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 0 12px color-mix(in srgb, var(--verdict-bright) 25%, transparent);
  transition: box-shadow 0.15s ease;
}

.sub-verdict-tile:hover {
  box-shadow: 0 0 18px color-mix(in srgb, var(--verdict-bright) 45%, transparent);
}

.sub-verdict-tile.verdict-bullish { --verdict-bright: #3fb950; }
.sub-verdict-tile.verdict-bullish-lean { --verdict-bright: #a3f0a8; }
.sub-verdict-tile.verdict-neutral { --verdict-bright: #e3b341; }
.sub-verdict-tile.verdict-bearish-lean { --verdict-bright: #ff8fb8; }
.sub-verdict-tile.verdict-bearish { --verdict-bright: #f85149; }

.sub-verdict-pill {
  color: var(--verdict-bright);
  font-size: 1.05rem;
  font-weight: 700;
  text-shadow: 0 0 8px color-mix(in srgb, var(--verdict-bright) 45%, transparent);
}

/* ---- ATR trailing stop & position-size calculator ---- */
.sizer {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(260px, 2fr);
  gap: 1rem 1.25rem;
  margin: 0.5rem 0 1.5rem;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(88, 166, 255, 0.35);
  border-radius: 8px;
  background: #171a23;
  box-shadow: 0 0 12px rgba(88, 166, 255, 0.08);
}

.sizer-stop {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.sizer-stop .is-down { color: #f85149; font-weight: 600; }

.sizer-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.6rem;
}

.sizer-inputs label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: #8b949e;
  font-size: 0.78rem;
}

.sizer-inputs input {
  padding: 0.4rem 0.5rem;
  border: 1px solid #2a2e3a;
  border-radius: 4px;
  background: #0f1117;
  color: #e6edf3;
  font-size: 0.95rem;
}

.sizer-inputs input:focus {
  outline: 2px solid var(--brand-color);
  outline-offset: 1px;
}

.sizer-results {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #20242e;
}

.sizer-results > div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.sizer-note {
  grid-column: 1 / -1;
  margin: 0;
}

@media (max-width: 700px) {
  .sizer { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Analyst consensus: rating split bar (strong buy -> strong sell) and grade counts ---- */
.consensus-card {
  margin: 0.5rem 0 1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid #2a2e3a;
  border-radius: 8px;
  background: #171a23;
}

.consensus-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.9rem;
  margin-bottom: 0.6rem;
}

.consensus-tally-head {
  margin-top: 1.1rem;
}

.consensus-majority {
  font-weight: 700;
  font-size: 1rem;
}

.majority-buy { color: #3fb950; }
.majority-hold { color: var(--silver-color); }
.majority-sell { color: #f85149; }

.consensus-bar {
  display: flex;
  gap: 2px;
  height: 26px;
  border-radius: 6px;
  overflow: hidden;
}

.consensus-bar span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  color: #0f1117;
  font-size: 0.78rem;
  font-weight: 700;
}

.rating-strong-buy { background: #2ea043; }
.rating-buy { background: #7ee787; }
.rating-hold { background: #8b949e; }
.rating-sell { background: #ff9a8f; }
.rating-strong-sell { background: #f85149; }

.consensus-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  margin: 0.45rem 0 0.2rem;
  color: var(--silver-color);
  font-size: 0.78rem;
}

.consensus-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.consensus-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.consensus-targets {
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
}

.consensus-targets .is-up { color: #3fb950; }
.consensus-targets .is-down { color: #f85149; }

.grade-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.grade-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.2rem 0.3rem 0.2rem 0.65rem;
  border: 1px solid #2a2e3a;
  border-radius: 999px;
  background: #0f1117;
  font-size: 0.8rem;
}

.grade-chip strong {
  min-width: 1.4rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: #2a2e3a;
  color: #e6edf3;
  text-align: center;
}

.consensus-note {
  margin: 0.8rem 0 0;
  font-size: 0.78rem;
}

/* ---- Confluence Meter: a glass "ion tube" joining the three sides ---- */
.confluence {
  --ion: #8b949e;
  margin: 0 0 1.75rem;
  padding: 1rem 1.25rem 0.9rem;
  border: 1px solid #2a2e3a;
  border-radius: 10px;
  background: radial-gradient(ellipse at 50% 0%, rgba(88, 166, 255, 0.07), transparent 60%), #12151d;
}

.confluence-bullish { --ion: #3fb950; }
.confluence-bearish { --ion: #f85149; }
.confluence-mixed { --ion: #8b949e; }

.confluence-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
  margin-bottom: 0.9rem;
}

.confluence-title {
  color: var(--silver-color);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.confluence-label {
  color: var(--ion);
  font-size: 1.15rem;
  font-weight: 700;
  text-shadow: 0 0 10px color-mix(in srgb, var(--ion) 55%, transparent);
}

.confluence-strength {
  margin-left: auto;
  color: #8b949e;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* the glass tube: dark core, glassy highlight along the top, metal end caps */
.ion-tube {
  position: relative;
  height: 46px;
  margin: 0 1.2rem 3.2rem;
  border-radius: 23px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.03) 22%, transparent 45%, rgba(0, 0, 0, 0.35) 100%),
    linear-gradient(90deg, #0b0e14, #121827 50%, #0b0e14);
  border: 1px solid rgba(139, 148, 158, 0.35);
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.8),
    inset 0 0 22px color-mix(in srgb, var(--ion) 18%, transparent),
    0 0 16px color-mix(in srgb, var(--ion) 22%, transparent);
  overflow: visible;
}

.ion-tube::before,
.ion-tube::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 14px;
  height: 56px;
  border-radius: 5px;
  background: linear-gradient(90deg, #3b4150, #9aa3b2 45%, #3b4150);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

.ion-tube::before { left: -9px; }
.ion-tube::after { right: -9px; }

/* energy level: a soft glowing bar filled to the strength */
.ion-fill {
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 6px;
  max-width: calc(100% - 12px);
  border-radius: 14px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ion) 30%, transparent));
  box-shadow: 0 0 14px color-mix(in srgb, var(--ion) 35%, transparent);
  animation: ion-pulse 2.4s ease-in-out infinite;
}

.confluence-bearish .ion-fill {
  left: auto;
  right: 6px;
  background: linear-gradient(270deg, transparent, color-mix(in srgb, var(--ion) 30%, transparent));
}

/* the ions: small glowing particles with a short motion trail */
.ion {
  position: absolute;
  top: var(--y);
  left: 0;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px var(--ion), 0 0 10px var(--ion), -6px 0 6px color-mix(in srgb, var(--ion) 45%, transparent);
  opacity: 0;
  animation: ion-flow var(--d) linear var(--delay) infinite;
}

.confluence-bearish .ion {
  box-shadow: 0 0 4px var(--ion), 0 0 10px var(--ion), 6px 0 6px color-mix(in srgb, var(--ion) 45%, transparent);
  animation-name: ion-flow-back;
}

.is-partial .ion:nth-child(3n) { display: none; }  /* thinner stream when only two sides agree */

.is-none .ion {
  left: var(--x);
  animation: ion-sputter calc(var(--d) * 0.8) ease-in-out var(--delay) infinite;
}

@keyframes ion-flow {
  0% { left: 1%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 99%; opacity: 0; }
}

@keyframes ion-flow-back {
  0% { left: 99%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 1%; opacity: 0; }
}

@keyframes ion-sputter {
  0%, 100% { transform: translate(0, 0); opacity: 0; }
  30% { transform: translate(4px, -3px); opacity: 0.7; }
  60% { transform: translate(-3px, 3px); opacity: 0.25; }
}

@keyframes ion-pulse {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}

/* the three side nodes: glowing orbs lit by that side's lean, labelled underneath */
.ion-node {
  --node: #8b949e;
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff, var(--node) 55%, color-mix(in srgb, var(--node) 40%, #000) 100%);
  box-shadow: 0 0 10px var(--node), 0 0 22px color-mix(in srgb, var(--node) 60%, transparent);
  z-index: 1;
}

.ion-node.lean-bull { --node: #3fb950; }
.ion-node.lean-bear { --node: #f85149; }
.ion-node.lean-flat { --node: #8b949e; }

.ion-node-label {
  position: absolute;
  top: 34px;
  left: 50%;
  transform: translateX(-50%);
  color: #e6edf3;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
}

.ion-node-label span {
  color: var(--node);
  font-weight: 500;
}

.confluence-note {
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ion,
  .ion-fill {
    animation: none;
  }

  .ion {
    left: var(--x);
    opacity: 0.8;
  }
}

/* ================= Options page ================= */
.is-up { color: #3fb950; }
.is-down { color: #f85149; }

.iv-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.2rem;
  margin: 0 0 0.25rem;
  color: #8b949e;
  font-size: 0.78rem;
}

.iv-legend strong { color: var(--silver-color); }

.scan-status { margin: 0.2rem 0 0.4rem; }

.scan-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 0.3rem;
  border-radius: 50%;
  background: var(--brand-color);
  box-shadow: 0 0 8px var(--brand-color);
  animation: ion-pulse 1.2s ease-in-out infinite;
}

.iv-scroll { --row-height: 2.4rem; max-height: calc(var(--row-height) * 13); }

.iv-table th,
.iv-table td {
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
  white-space: nowrap;
}

.iv-ticker {
  color: var(--brand-color);
  font-weight: 700;
  text-decoration: none;
}

.iv-ticker:hover { text-shadow: var(--brand-glow); }

.sortable-th { cursor: pointer; user-select: none; }
.sortable-th::after { content: " \2195"; color: #4b5363; font-size: 0.75em; }
.sortable-th[data-dir="desc"]::after { content: " \2193"; color: var(--brand-color); }
.sortable-th[data-dir="asc"]::after { content: " \2191"; color: var(--brand-color); }

.score-bar {
  display: inline-block;
  width: 70px;
  height: 8px;
  margin-right: 0.35rem;
  border-radius: 4px;
  background: var(--mark-grid);
  vertical-align: middle;
}

.score-bar i {
  display: block;
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(90deg, #2f81f7, #c4b5fd);
}

.iv-key-dot {
  width: 9px !important;
  height: 9px !important;
  border-radius: 50%;
  background: #c4b5fd;
}

.iv-key-line {
  width: 18px !important;
  height: 3px !important;
  border-radius: 2px;
  background: #c4b5fd;
}

/* term structure */
.term-chart {
  padding: 0.75rem 1rem 0.5rem;
  border: 1px solid #2a2e3a;
  border-radius: 8px;
  background: #0f1117;
}

.term-svg { width: 100%; max-width: 760px; height: auto; display: block; }
.term-grid { stroke: #20242e; stroke-width: 1; }
.term-line { fill: none; stroke: #58a6ff; stroke-width: 2.5; filter: drop-shadow(0 0 4px rgba(88, 166, 255, 0.6)); }
.term-line.is-inverted { stroke: #f0883e; filter: drop-shadow(0 0 4px rgba(240, 136, 62, 0.6)); }
.term-dot { fill: #0f1117; stroke: #e6edf3; stroke-width: 2; }
.term-label { fill: #8b949e; font-size: 11px; }
.term-value { fill: #e6edf3; font-size: 11px; font-weight: 600; }
.term-note { margin: 0.3rem 0 0; }

/* Greeks */
.greeks-calc {
  margin: 0.5rem 0 1.25rem;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(88, 166, 255, 0.35);
  border-radius: 8px;
  background: #171a23;
}

/* Calculator guide, the "fill in a ticker" button and the plain-English readout. */
.calc-howto {
  margin-bottom: 0.9rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid #2a2e3a;
  font-size: 0.88rem;
}

.calc-howto h3 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.calc-howto ol { margin: 0.4rem 0; padding-left: 1.3rem; line-height: 1.6; }
.calc-howto p { margin: 0.35rem 0; }
.calc-howto a { color: var(--brand-color); }

.bs-fill {
  margin-top: 0.7rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid rgba(88, 166, 255, 0.55);
  border-radius: 6px;
  background: rgba(88, 166, 255, 0.1);
  color: var(--brand-color);
  font-size: 0.83rem;
  cursor: pointer;
}

.bs-fill:hover { background: rgba(88, 166, 255, 0.2); box-shadow: 0 0 10px rgba(88, 166, 255, 0.3); }

.bs-readout {
  margin-top: 0.8rem;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--nav-heading-color);
  border-radius: 4px;
  background: rgba(147, 197, 253, 0.06);
  font-size: 0.88rem;
  line-height: 1.55;
}

.bs-readout p { margin: 0 0 0.35rem; }
.bs-readout ul { margin: 0; padding-left: 1.2rem; }

.greeks-charts figure p { margin: 0.4rem 0 0; font-size: 0.78rem; line-height: 1.45; }

/* Price & IV what-if calculator */
.whatif {
  margin: 0.5rem 0 1.25rem;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(88, 166, 255, 0.35);
  border-radius: 8px;
  background: #171a23;
}

.whatif-setup { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; margin-bottom: 0.8rem; }
.whatif-setup .bs-fill { margin-top: 0; }
.wi-hint { margin: 0.4rem 0 0.8rem; font-size: 0.78rem; }

.wi-sliders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.8rem 1.2rem;
  align-items: end;
  padding: 0.8rem 0;
  border-top: 1px solid #2a2e3a;
  border-bottom: 1px solid #2a2e3a;
}

.wi-slider { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; color: var(--silver-color); }
.wi-slider strong { color: var(--brand-color); font-variant-numeric: tabular-nums; }
.wi-slider input[type="range"] { width: 100%; accent-color: #58a6ff; }
.wi-reset {
  justify-self: start;
  padding: 0.35rem 0.8rem;
  border: 1px solid #2a2e3a;
  border-radius: 6px;
  background: #0f1117;
  color: var(--silver-color);
  cursor: pointer;
}

.wi-reset:hover { border-color: var(--brand-color); color: var(--brand-color); }

.wi-result {
  display: grid;
  grid-template-columns: minmax(200px, 0.8fr) 2fr;
  gap: 0.9rem;
  margin: 0.9rem 0 0.4rem;
}

.wi-headline {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.8rem 1rem;
  border: 1px solid #2a2e3a;
  border-left-width: 4px;
  border-radius: 8px;
  background: #11141b;
}

.wi-headline.is-gain { border-left-color: #3fb950; }
.wi-headline.is-loss { border-left-color: #f85149; }
.wi-pnl { font-size: 1.9rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.wi-headline.is-gain .wi-pnl { color: #3fb950; text-shadow: 0 0 10px rgba(63, 185, 80, 0.45); }
.wi-headline.is-loss .wi-pnl { color: #f85149; text-shadow: 0 0 10px rgba(248, 81, 73, 0.45); }

.wi-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.6rem; }
.wi-values > div { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.7rem 0.8rem; border: 1px solid #2a2e3a; border-radius: 8px; background: #11141b; font-size: 0.8rem; }
.wi-values strong { font-size: 1.2rem; color: #e6edf3; }
.wi-part { display: flex; justify-content: space-between; gap: 0.5rem; font-variant-numeric: tabular-nums; }

.wi-grid-wrap { overflow-x: auto; }
.wi-grid { width: 100%; margin: 0.3rem 0 1rem; border-collapse: separate; border-spacing: 2px; }
.wi-grid th, .wi-grid td { padding: 0.35rem 0.45rem; font-size: 0.78rem; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wi-grid tbody th { text-align: left; background: transparent; }
.wi-grid tbody th .muted { font-size: 0.72rem; }
.wi-grid td { border-radius: 3px; color: #f0f6fc; cursor: pointer; }
.wi-grid td:hover { outline: 1px solid #e6edf3; }
.wi-grid td.is-current { outline: 2px solid #58a6ff; box-shadow: 0 0 10px rgba(88, 166, 255, 0.6); font-weight: 700; }

@media (max-width: 700px) {
  .wi-result { grid-template-columns: minmax(0, 1fr); }
}

/* Option chain under the calculator: calls | strike | puts in a scrolling window, today's price marked. */
.chain-card { margin-top: 1rem; }

.chain-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

.chain-head h3 { margin: 0; font-size: 1.05rem; }
.chain-expiry-field { display: flex; align-items: center; gap: 0.4rem; color: #8b949e; font-size: 0.82rem; }
.chain-expiry { padding: 0.25rem 0.4rem; border: 1px solid #2a2e3a; border-radius: 5px; background: #0f1117; color: #e6edf3; }
.chain-meta { font-size: 0.82rem; }
.chain-card > p { margin: 0.4rem 0 0.6rem; font-size: 0.85rem; }

.chain-scroll {
  max-height: 460px;
  overflow: auto;
  border: 1px solid #2a2e3a;
  border-radius: 8px;
}

.chain-table { width: 100%; margin: 0; font-variant-numeric: tabular-nums; }
.chain-table th, .chain-table td { padding: 0.32rem 0.5rem; font-size: 0.8rem; text-align: right; white-space: nowrap; }
.chain-table thead th { position: sticky; top: 0; z-index: 2; background: #171a23; }
.chain-table thead tr.chain-sides th { top: 0; text-align: center; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.chain-table thead tr:nth-child(2) th { top: 1.75rem; }
.chain-side-calls { color: #3fb950 !important; }
.chain-side-puts { color: #f85149 !important; }
.chain-strike-head, .chain-strike { text-align: center !important; }
.chain-strike { background: #1c2130; color: #e6edf3; font-weight: 700; }
.chain-row { cursor: pointer; }
.chain-row:hover td, .chain-row:focus td { background: rgba(88, 166, 255, 0.1); outline: none; }
.chain-row.is-selected td { background: rgba(88, 166, 255, 0.2); }
.chain-row.is-selected .chain-strike { color: var(--brand-color); }
.chain-table td.is-itm { background: rgba(147, 197, 253, 0.06); }
.chain-price-row td {
  padding: 0.2rem;
  background: rgba(88, 166, 255, 0.12);
  color: var(--brand-color);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
}

.greeks-table { margin: 0.9rem 0 0.5rem; }
.greeks-table td { font-variant-numeric: tabular-nums; }

.greeks-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.greeks-charts figure { margin: 0; }

.greeks-charts figcaption {
  margin-bottom: 0.3rem;
  color: var(--silver-color);
  font-size: 0.82rem;
  font-weight: 600;
}

.greeks-charts svg {
  width: 100%;
  height: auto;
  border: 1px solid #2a2e3a;
  border-radius: 6px;
  background: #0f1117;
}

.g-axis { stroke: #2a2e3a; stroke-width: 1; }
.g-strike { stroke: #4b5363; stroke-width: 1; stroke-dasharray: 3 3; }
.g-delta { fill: none; stroke: #58a6ff; stroke-width: 2.2; }
.g-gamma { fill: none; stroke: #c4b5fd; stroke-width: 2; }
.g-now { fill: #e6edf3; stroke: #0f1117; stroke-width: 2; }
.g-zone { fill: rgba(240, 136, 62, 0.1); }
.g-label { fill: #8b949e; font-size: 10px; }
.g-key { font-size: 10px; font-weight: 600; }
.g-key-delta { fill: #58a6ff; }
.g-key-gamma { fill: #c4b5fd; }

.greek-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.greek-card {
  padding: 0.9rem 1rem;
  border: 1px solid #2a2e3a;
  border-radius: 8px;
  background: #171a23;
  font-size: 0.88rem;
  line-height: 1.5;
}

.greek-card h4 { margin: 0 0 0.4rem; }
.greek-card p { margin: 0.35rem 0; }
.greek-card-wide { grid-column: 1 / -1; border-color: rgba(88, 166, 255, 0.35); }

.greek-symbol {
  display: inline-block;
  width: 1.6rem;
  color: #c4b5fd;
  text-shadow: 0 0 8px rgba(196, 181, 253, 0.6);
}

/* Strategies */
.strategy-filters { margin: 0.25rem 0 0.9rem; }

.strategy-grid { margin-bottom: 1.5rem; }

/* Jump bar: one chip per strategy family, with its card count. */
.strategy-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.4rem 0 0.6rem;
}

.strategy-jump a {
  padding: 0.3rem 0.7rem;
  border: 1px solid #2a2e3a;
  border-radius: 999px;
  background: #171a23;
  color: var(--nav-heading-color);
  font-size: 0.8rem;
  text-decoration: none;
}

.strategy-jump a:hover { border-color: var(--brand-color); box-shadow: 0 0 8px rgba(88, 166, 255, 0.3); }
.strategy-jump a .muted { margin-left: 0.2rem; font-size: 0.75rem; }
.strategy-jump a[hidden] { display: none; }

.strategy-family { margin-top: 1.4rem; }
.strategy-family[hidden] { display: none; }
.strategy-family > h3 { margin: 0 0 0.2rem; padding-bottom: 0.3rem; border-bottom: 1px solid #2a2e3a; }
.strategy-family > p { margin: 0.3rem 0 0.7rem; }

.strategy-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 0.9rem;
}

.strategy-note { margin: 0.1rem 0 0.2rem; font-size: 0.75rem; font-style: italic; }

.strategy-card {
  display: flex;
  flex-direction: column;
  padding: 0.9rem 1rem;
  border: 1px solid #2a2e3a;
  border-radius: 10px;
  background: #171a23;
  font-size: 0.85rem;
  line-height: 1.5;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.strategy-card:hover {
  border-color: rgba(88, 166, 255, 0.5);
  box-shadow: 0 0 14px rgba(88, 166, 255, 0.12);
}

.strategy-card h4 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.strategy-card p { margin: 0.3rem 0; }

.strategy-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.badge {
  padding: 0.05rem 0.5rem;
  border: 1px solid #4b5363;
  border-radius: 999px;
  color: var(--silver-color);
  font-size: 0.72rem;
}

.badge-iv { border-color: rgba(196, 181, 253, 0.6); color: #c4b5fd; }
.badge-risk { border-color: #f85149; color: #f85149; }

.payoff-svg {
  width: 100%;
  height: auto;
  margin: 0.6rem 0 0.3rem;
  border: 1px solid #20242e;
  border-radius: 6px;
  background: #0f1117;
}

.payoff-gain { fill: rgba(63, 185, 80, 0.28); }
.payoff-loss { fill: rgba(248, 81, 73, 0.25); }
.payoff-line { fill: none; stroke: #e6edf3; stroke-width: 2; filter: drop-shadow(0 0 3px rgba(88, 166, 255, 0.7)); }
.payoff-zero { stroke: #4b5363; stroke-width: 1; }
.payoff-now { stroke: var(--brand-color); stroke-width: 1; stroke-dasharray: 2 3; }
.payoff-be { stroke: #e3b341; stroke-width: 1; stroke-dasharray: 3 3; }
.payoff-tick { stroke: #8b949e; }
.payoff-label { fill: #8b949e; font-size: 10px; }

.strategy-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  margin: 0.2rem 0 0.4rem;
}

.strategy-stats dt { color: #8b949e; font-size: 0.72rem; }
.strategy-stats dd { margin: 0; color: #e6edf3; font-weight: 600; font-variant-numeric: tabular-nums; }

.strategy-legs {
  color: #c4b5fd;
  font-size: 0.8rem;
}

/* ================= Bonds page ================= */
.curve-card {
  margin: 0.6rem 0 1rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid #2a2e3a;
  border-radius: 10px;
  background: #11141b;
}

.curve-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin-bottom: 0.4rem; font-size: 0.8rem; }
/* Legend swatches: thick enough (and glowing in their own color) that pale lavender doesn't read as grey. */
.curve-legend i { display: inline-block; width: 28px; height: 5px; margin-right: 0.45rem; vertical-align: middle; border-radius: 3px; }
.curve-key-now { background: #58a6ff; box-shadow: 0 0 6px rgba(88, 166, 255, 0.75); }
.curve-key-month { background: #c4b5fd; box-shadow: 0 0 6px rgba(196, 181, 253, 0.75); }
.curve-key-year { height: 0 !important; border-top: 4px dashed #8b949e; border-radius: 0 !important; }
.curve-svg { display: block; width: 100%; height: auto; }
.curve-grid { stroke: #20242e; stroke-width: 1; }
.curve-tick { fill: #8b949e; font-size: 11px; }
.curve-value { fill: #e6edf3; font-size: 11px; font-weight: 600; }
.curve-now { fill: none; stroke: #58a6ff; stroke-width: 3; filter: drop-shadow(0 0 4px rgba(88, 166, 255, 0.6)); }
.curve-month { fill: none; stroke: #c4b5fd; stroke-width: 2; }
.curve-year { fill: none; stroke: #6e7681; stroke-width: 2; stroke-dasharray: 5 4; }
.curve-dot { fill: #58a6ff; stroke: #0f1117; stroke-width: 2; }
.path-up { fill: rgba(248, 81, 73, 0.55); }
.path-down { fill: rgba(63, 185, 80, 0.55); }
.path-now { stroke: #e6edf3; stroke-width: 1.5; stroke-dasharray: 6 4; }

.bond-table-wrap { overflow-x: auto; }
.bond-table th, .bond-table td { padding: 0.45rem 0.45rem; font-size: 0.8rem; white-space: nowrap; }
.bond-table th { white-space: normal; vertical-align: bottom; line-height: 1.25; }
.bond-table tr.is-front td { background: rgba(88, 166, 255, 0.07); }
.bond-footnote { font-size: 0.8rem; }
.bond-etf-table td, .bond-etf-table th { font-size: 0.84rem; }
.ts-chart { height: 260px; }
.regime-table td:first-child { white-space: normal; }

/* ================= Research page ================= */
.research-chart { height: 380px; }
.research-stock-chart { height: 440px; }
.research-chart-title { margin: 0 0 0.4rem; font-size: 1rem; }
.research-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; margin: 0 0 0.6rem; padding: 0; list-style: none; font-size: 0.8rem; color: var(--silver-color); }
.research-legend i { display: inline-block; width: 22px; height: 5px; margin-right: 0.45rem; vertical-align: middle; border-radius: 3px; }
.research-lines { margin: 0.6rem 0 1rem 1.1rem; font-size: 0.9rem; line-height: 1.5; }
.research-lines li { margin-bottom: 0.35rem; }
.research-answer { margin: 0.2rem 0 0.8rem; font-size: 1.35rem; font-weight: 600; color: #e6edf3; }
.research-note { margin: 0.6rem 0 1rem; padding: 0.6rem 0.9rem; border-left: 3px solid #e3b341; border-radius: 4px; background: rgba(227, 179, 65, 0.07); font-size: 0.88rem; }
.research-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.8rem 0; }
.research-filters button { padding: 0.3rem 0.7rem; border: 1px solid #2a2e3a; border-radius: 999px; background: #171a23; color: var(--silver-color); font-size: 0.8rem; cursor: pointer; }
.research-filters button.is-active { border-color: #58a6ff; color: #e6edf3; box-shadow: 0 0 8px rgba(88, 166, 255, 0.35); }
.research-search { margin-left: auto; padding: 0.3rem 0.6rem; border: 1px solid #2a2e3a; border-radius: 4px; background: #171a23; color: var(--silver-color); }
.research-calls th[data-sort] { cursor: pointer; text-decoration: underline dotted #4b5363; }
.research-calls td .muted { display: block; font-size: 0.72rem; }
.research-week { margin-bottom: 0.75rem; }
.research-week h4 { margin: 0 0 0.4rem; }
.research-week p { margin: 0.3rem 0; font-size: 0.86rem; }
.research-picks span { display: inline-block; margin-right: 0.8rem; white-space: nowrap; }
.research-picks span.muted { margin-right: 0.4rem; }
.research-week details summary { cursor: pointer; color: #58a6ff; font-size: 0.82rem; }
.research-stock .stat-tiles { margin-bottom: 1rem; }
.research-tile-unit { font-size: 0.9rem; font-weight: 400; color: #8b949e; }
.research-total td { border-top: 1px solid #4b5363; }
.research-more summary { margin: 0.6rem 0; cursor: pointer; color: #58a6ff; }
.bond-table td.research-wrap { min-width: 16rem; white-space: normal; }
.bond-table td.research-small { min-width: 12rem; font-size: 0.74rem; color: var(--silver-color); }
.research-small-line { display: block; margin-top: 0.15rem; font-size: 0.72rem; white-space: normal; }
.fvg-random-row td { padding-top: 0.1rem; border-top: none; font-size: 0.76rem; }
.fvg-random-row td:first-child { padding-left: 1.2rem; white-space: normal; }
.pattern-chart { height: 380px; margin: 0.3rem 0 0.6rem; }
.pattern-chart-row td { padding: 0.2rem 0 0.6rem !important; }
.pattern-chart-button { padding: 0.15rem 0.6rem; border: 1px solid #2a2e3a; border-radius: 999px; background: #171a23; color: var(--silver-color); font-size: 0.75rem; cursor: pointer; }
.pattern-chart-button.is-active, .pattern-chart-button:hover { border-color: #58a6ff; color: #e6edf3; }

/* ================= Futures page ================= */
.cal-next {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.9rem;
  margin: 0.25rem 0 0.9rem;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(248, 81, 73, 0.55);
  border-radius: 8px;
  background: rgba(248, 81, 73, 0.07);
  box-shadow: 0 0 14px rgba(248, 81, 73, 0.15);
}

.cal-next-label {
  color: #ff7b72;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cal-next-title { color: #e6edf3; }
.cal-next-countdown { margin-left: auto; color: #ff7b72; font-weight: 700; font-variant-numeric: tabular-nums; }

.cal-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin-bottom: 0.6rem;
}

.cal-filters button[aria-pressed="false"] { opacity: 0.45; }

.impact-pip {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 0.35rem;
  border-radius: 50%;
}

.impact-pip.impact-high { background: #f85149; }
.impact-pip.impact-medium { background: #f0883e; }
.impact-pip.impact-low { background: #e3b341; }
.impact-pip.impact-holiday { background: #8b949e; }
.impact-word.impact-high { color: #f85149; font-weight: 600; }

.cal-table-wrap {
  max-height: 70vh;
  overflow-y: auto;
  border: 1px solid #2a2e3a;
  border-radius: 8px;
}

.cal-table { margin: 0; }
.cal-table thead th { position: sticky; top: 0; z-index: 2; }
.cal-table td { padding: 0.45rem 0.7rem; font-size: 0.87rem; }

.cal-day-row th {
  position: sticky;
  top: 2.3rem;
  z-index: 1;
  background: #1c2130;
  color: #c4b5fd;
  font-size: 0.82rem;
  text-shadow: none;
  letter-spacing: 0.04em;
}

.cal-time { white-space: nowrap; color: var(--silver-color); font-variant-numeric: tabular-nums; }
.cal-title { color: #e6edf3; }
.cal-event.is-past { opacity: 0.45; }
.impact-row-high .cal-title { font-weight: 600; }

.ccy-badge {
  display: inline-block;
  min-width: 2.8rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid #2a2e3a;
  border-radius: 4px;
  background: #0f1117;
  color: #e6edf3;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
}

.impact-bars { display: inline-flex; gap: 2px; align-items: flex-end; vertical-align: middle; }
.impact-bars i { display: block; width: 4px; border-radius: 1px; background: #2a2e3a; }
.impact-bars i:nth-child(1) { height: 6px; }
.impact-bars i:nth-child(2) { height: 10px; }
.impact-bars i:nth-child(3) { height: 14px; }
.impact-bars.impact-low i:nth-child(1) { background: #e3b341; }
.impact-bars.impact-medium i:nth-child(-n+2) { background: #f0883e; }
.impact-bars.impact-high i { background: #f85149; box-shadow: 0 0 5px rgba(248, 81, 73, 0.7); }
.impact-bars.impact-holiday i { background: #4b5363; }

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  margin: 0.6rem 0;
  color: #8b949e;
  font-size: 0.8rem;
}

.fut-card {
  margin: 0 0 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid #2a2e3a;
  border-radius: 10px;
  background: #171a23;
}

.fut-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  margin-bottom: 0.6rem;
}

.fut-head h3 { margin: 0 0 0.2rem; font-size: 1.05rem; }

.fut-root {
  margin-left: 0.3rem;
  padding: 0.05rem 0.45rem;
  border: 1px solid rgba(196, 181, 253, 0.55);
  border-radius: 4px;
  color: #c4b5fd;
  font-size: 0.75rem;
  text-shadow: none;
}

.fut-spot { display: flex; flex-direction: column; gap: 0.1rem; min-width: 9rem; }

.fut-table-wrap { overflow-x: auto; }
.fut-table { margin: 0; }
.fut-table th, .fut-table td { padding: 0.4rem 0.6rem; font-size: 0.83rem; white-space: nowrap; }
.fut-table tr.is-front td { background: rgba(88, 166, 255, 0.07); }
.ccy { color: #8b949e; font-size: 0.75em; }

.calc-badge {
  padding: 0 0.35rem;
  border: 1px solid rgba(227, 179, 65, 0.6);
  border-radius: 4px;
  color: #e3b341;
  font-size: 0.7rem;
  font-weight: 600;
  text-shadow: none;
}

.fut-region { margin-top: 1.5rem; }

.intl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(580px, 1fr));
  gap: 0.9rem;
}

.intl-card { margin: 0; min-width: 0; }
.intl-card .fut-table th, .intl-card .fut-table td { padding: 0.4rem 0.45rem; }
.intl-assume { margin: 0.5rem 0 0; font-size: 0.75rem; }

@media (max-width: 700px) {
  .intl-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Placeholder pages (Options, Futures, Contact). */
.coming-soon {
  max-width: 40rem;
  margin: 3rem auto;
  text-align: center;
}

.coming-soon-badge {
  display: inline-block;
  padding: 0.25rem 0.9rem;
  border: 1px solid var(--brand-color);
  border-radius: 999px;
  color: var(--brand-color);
  font-size: 0.85rem;
  box-shadow: 0 0 10px rgba(88, 166, 255, 0.35);
}

.coming-soon-email a { color: var(--brand-color); font-weight: 700; }

.verdict-how {
  margin: 1rem 0 0;
  color: #8b949e;
  font-size: 0.8rem;
  line-height: 1.5;
}

/* Metric | Value | explanation tables (Growth & Momentum, Relative & Sector Context). */
.explain-table th:first-child {
  width: 15rem;
}

.explain-table tbody td:nth-child(2) {
  white-space: nowrap;
  color: #e6edf3;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.explain-table td.muted {
  line-height: 1.45;
}

/* Entry plan card under the verdict. The stance color (--stance-color) drives the pill and the left accent. */
.entry-plan {
  --stance-color: var(--silver-color);
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid #2a2e3a;
  border-left: 3px solid var(--stance-color);
  border-radius: 6px;
  background: #171a23;
}

.entry-plan.entry-go { --stance-color: #3fb950; }
.entry-plan.entry-wait { --stance-color: #e3b341; }
.entry-plan.entry-avoid { --stance-color: #f85149; }

.entry-plan-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

.entry-stance {
  display: inline-block;
  padding: 0.25rem 0.9rem;
  border: 2px solid var(--stance-color);
  border-radius: 999px;
  color: var(--stance-color);
  font-weight: 700;
  background: color-mix(in srgb, var(--stance-color) 8%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--stance-color) 30%, transparent);
  text-shadow: 0 0 8px color-mix(in srgb, var(--stance-color) 40%, transparent);
}

.entry-score {
  color: var(--silver-color);
  font-size: 0.85rem;
}

.entry-summary {
  margin: 0.75rem 0 0.25rem;
  line-height: 1.5;
}

.entry-plan h4 {
  margin: 1.1rem 0 0.4rem;
  font-size: 0.95rem;
}

.entry-levels {
  margin: 0;
}

.entry-levels th {
  width: 12rem;
  white-space: nowrap;
}

.entry-level-value {
  white-space: nowrap;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.entry-checklist,
.entry-risks {
  margin: 0;
  padding: 0;
  list-style: none;
}

.entry-checklist li {
  display: flex;
  gap: 0.6rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid #20242e;
}

.entry-check-icon {
  flex: 0 0 1.1rem;
  font-weight: 700;
  text-align: center;
}

.entry-checklist .is-met .entry-check-icon { color: #3fb950; }
.entry-checklist .is-unmet .entry-check-icon { color: #f85149; }
.entry-checklist .is-na { opacity: 0.6; }

.entry-risks li {
  position: relative;
  padding: 0.25rem 0 0.25rem 1.1rem;
}

.entry-risks li::before {
  content: "!";
  position: absolute;
  left: 0.2rem;
  color: #e3b341;
  font-weight: 700;
}

.entry-footnote {
  margin: 0.9rem 0 0;
}

/* ---- Price Levels & Volume tab ----
   One accent (--mark-accent, the deeper brand blue) for "where things are now"; a recessive grey
   (--mark-context) for context marks. Both validated against the dark surface; every value is
   also printed as text or in a table, so nothing is color- or hover-only. */
:root {
  --mark-accent: #2f81f7;
  --mark-context: #4b5363;
  --mark-grid: #20242e;
}

.level-readout {
  margin: 0.25rem 0 0.75rem;
}

.level-readout strong {
  color: #e6edf3;
}

/* Hover/focus tooltip for chart marks; the same values are always printed elsewhere. */
.has-tip {
  cursor: default;
}

.has-tip:hover::after,
.has-tip:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  z-index: 5;
  transform: translateX(-50%);
  padding: 0.3rem 0.55rem;
  border: 1px solid #2a2e3a;
  border-radius: 4px;
  background: #0b0d12;
  color: var(--silver-color);
  font-size: 0.78rem;
  white-space: nowrap;
  pointer-events: none;
}

.has-tip:focus-visible {
  outline: 2px solid var(--brand-color);
  outline-offset: 2px;
}

/* Where Price Sits: a single price axis. */
.price-map {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem 0.75rem;
  border: 1px solid #2a2e3a;
  border-radius: 8px;
  background: #0f1117;
}

.price-map-plot {
  position: relative;
  height: 118px;
  margin: 0 1.5rem;
}

/* axis hairline under the zone lane */
.price-map-plot::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 64px;
  height: 1px;
  background: #2a2e3a;
}

.pm-band {
  position: absolute;
  top: 28px;
  height: 36px;
  background: rgba(139, 148, 158, 0.08);
}

.pm-band-1 {
  background: rgba(139, 148, 158, 0.12);
}

.pm-tick {
  position: absolute;
  top: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  font-size: 0.72rem;
  line-height: 1.25;
  white-space: nowrap;
}

.pm-tick::before {
  content: "";
  width: 1px;
  height: 6px;
  margin-bottom: 3px;
  background: var(--mark-context);
}

.pm-tick-sigma {
  color: var(--silver-color);
}

.pm-tick-price {
  color: #8b949e;
  font-variant-numeric: tabular-nums;
}

.pm-zone {
  position: absolute;
  top: 34px;
  height: 26px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--mark-accent) calc(var(--zone-alpha) * 100%), transparent);
}

/* Today's price: a 2px accent line with a wider invisible hit area. */
.pm-price {
  position: absolute;
  top: 18px;
  width: 16px;
  height: 50px;
  transform: translateX(-50%);
}

.pm-price::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 1px;
  background: var(--brand-color);
  box-shadow: 0 0 8px rgba(88, 166, 255, 0.7);
}

.pm-price-label {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  color: #e6edf3;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.pm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  margin-top: 0.4rem;
  color: #8b949e;
  font-size: 0.75rem;
}

.pm-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.pm-legend i {
  display: inline-block;
  width: 14px;
  height: 10px;
  border-radius: 2px;
}

.pm-key-price { width: 2px !important; height: 14px !important; background: var(--brand-color); }
.pm-key-zone { background: color-mix(in srgb, var(--mark-accent) 60%, transparent); }
.pm-key-band { background: rgba(139, 148, 158, 0.2); }

/* Std-dev chart: closes with the σ levels drawn across. Fixed height includes the date axis. */
.sd-chart-card {
  margin: 0.5rem 0 1rem;
  border: 1px solid #2a2e3a;
  border-radius: 8px;
  background: #0f1117;
  overflow: hidden;
}

.sd-chart-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid #2a2e3a;
  background: #171a23;
  color: var(--silver-color);
  font-size: 0.9rem;
  font-weight: 600;
}

.sd-chart-heading .pm-legend {
  margin: 0;
  font-weight: 400;
}

.sd-chart {
  height: 300px;
}

/* keep the site's table styles off the chart library's internal layout table */
.sd-chart table, .ts-chart table { width: auto; margin: 0; border-collapse: separate; }
.sd-chart td, .sd-chart th, .ts-chart td, .ts-chart th { padding: 0; border: 0; }

.sd-key-line { height: 3px !important; }

.sigma-swatch {
  display: inline-block;
  width: 12px;
  height: 3px;
  margin-right: 0.5rem;
  border-radius: 2px;
  vertical-align: middle;
}

.pm-tick::before {
  background: var(--tick-color, var(--mark-context)) !important;
  width: 3px !important;
  height: 8px !important;
  border-radius: 1px;
}

/* Probability meter in the band table (one hue; the % is printed beside it). */
.prob-bar {
  display: inline-block;
  width: 80px;
  height: 8px;
  margin-right: 0.5rem;
  border-radius: 4px;
  background: var(--mark-grid);
  vertical-align: middle;
}

.prob-bar i {
  display: block;
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: var(--mark-accent);
}

.prob-footnote {
  margin-top: -1rem;
}

.level-use {
  color: var(--silver-color);
  font-size: 0.85rem;
}

/* Level tables (liquidity zones, std-dev bands). */
.level-table td.level-num,
.level-table .level-num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.level-role {
  white-space: nowrap;
}

.level-role-support span { color: #3fb950; }
.level-role-resistance span { color: #f85149; }
.level-role-price-inside span { color: var(--brand-color); }

.share-bar {
  display: inline-block;
  width: 110px;
  height: 8px;
  margin-right: 0.5rem;
  border-radius: 4px;
  background: var(--mark-grid);
  vertical-align: middle;
}

.share-bar i {
  display: block;
  height: 100%;
  border-radius: 0 4px 4px 0;
  background: var(--mark-accent);
}

.level-table tr.level-current {
  background: color-mix(in srgb, var(--mark-accent) 14%, transparent);
  box-shadow: inset 3px 0 0 var(--brand-color);
}

.level-table tr.level-current td {
  color: #e6edf3;
  font-weight: 600;
}

.level-table tr.level-stretched td:first-child::after {
  content: " · stretched";
  color: #8b949e;
  font-size: 0.8rem;
}

/* Volume Activity stat tiles. Big values use proportional figures. */
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.75rem;
  margin: 0.25rem 0 1rem;
}

.stat-tile {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.8rem 1rem;
  border: 1px solid #2a2e3a;
  border-radius: 8px;
  background: #171a23;
}

.stat-label {
  color: #8b949e;
  font-size: 0.8rem;
}

.stat-value {
  color: #e6edf3;
  font-size: 1.6rem;
  font-weight: 600;
}

.stat-sub {
  color: #8b949e;
  font-size: 0.8rem;
}

.stat-sub.is-up span { color: #3fb950; }
.stat-sub.is-down span { color: #f85149; }

/* Volume Deviation range strips, on one shared volume scale. */
.vol-strips {
  margin: 0.5rem 0 0.5rem;
  padding: 1.4rem 1.25rem 0.75rem;
  border: 1px solid #2a2e3a;
  border-radius: 8px;
  background: #0f1117;
}

.vol-strip {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.vol-strip-label {
  color: var(--silver-color);
  font-size: 0.85rem;
}

.vol-strip-plot {
  position: relative;
  height: 22px;
}

.vs-range {
  position: absolute;
  top: 10px;
  height: 2px;
  background: var(--mark-context);
}

.vs-sd {
  position: absolute;
  top: 4px;
  height: 14px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--mark-accent) 35%, transparent);
}

.vs-avg {
  position: absolute;
  top: 1px;
  width: 12px;
  height: 20px;
  transform: translateX(-50%);
}

.vs-avg::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #c9d1d9;
}

.vs-now {
  position: absolute;
  top: 3px;
  width: 16px;
  height: 16px;
  border: 2px solid #0f1117;
  border-radius: 50%;
  background: var(--brand-color);
  box-shadow: 0 0 8px rgba(88, 166, 255, 0.7);
  transform: translateX(-50%);
}

.vs-now-label {
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  color: #e6edf3;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.vol-axis {
  position: relative;
  height: 1rem;
  margin: -0.2rem 0 0.3rem calc(4.5rem + 0.75rem);
  color: #8b949e;
  font-size: 0.72rem;
}

.vol-axis span {
  position: absolute;
  transform: translateX(-50%);
}

.vol-axis span:first-child { transform: none; }
.vol-axis span:last-child { transform: translateX(-100%); }

.vs-key-range { height: 2px !important; background: var(--mark-context); }
.vs-key-sd { background: color-mix(in srgb, var(--mark-accent) 35%, transparent); }
.vs-key-avg { width: 2px !important; height: 12px !important; background: #c9d1d9; }
.vs-key-now { width: 10px !important; height: 10px !important; border-radius: 50% !important; background: var(--brand-color); }

/* "Show the numbers": the table view behind a visual. */
.table-view {
  margin: 0.5rem 0 1rem;
}

.table-view summary {
  cursor: pointer;
  color: var(--silver-color);
  font-size: 0.85rem;
}

.table-view summary:hover {
  color: var(--brand-color);
}

.table-view table {
  margin-top: 0.5rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.disclaimer {
  margin: 0.75rem 0 0;
  color: var(--silver-color);
  font-size: 0.8rem;
  font-style: italic;
}

/* Footer disclaimer: neon red with a slow pulsing glow (steady glow for reduced-motion users). */
.site-footer {
  position: relative;
  z-index: 1;  /* above the Contact page's space scene */
  padding: 1.2rem 2rem 1.6rem;
  border-top: 1px solid #1f2430;
  color: #7d8590;
  font-size: 0.78rem;
  text-align: center;
}
.site-footer p { margin: 0.2rem 0; }
.site-footer a { color: #8bb9f0; margin-left: 0.4rem; }

.site-disclaimer {
  font-weight: 700;
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid #2a2e3a;
  color: #ff4d5e;
  text-shadow: 0 0 6px rgba(255, 60, 80, 0.8), 0 0 14px rgba(255, 40, 60, 0.45);
  animation: disclaimer-pulse 2.4s ease-in-out infinite;
}

@keyframes disclaimer-pulse {
  0%, 100% {
    color: #ff4d5e;
    text-shadow: 0 0 4px rgba(255, 60, 80, 0.55), 0 0 10px rgba(255, 40, 60, 0.25);
  }
  50% {
    color: #ff7582;
    text-shadow: 0 0 8px rgba(255, 70, 90, 1), 0 0 20px rgba(255, 40, 60, 0.75), 0 0 34px rgba(255, 30, 50, 0.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-disclaimer {
    animation: none;
  }
}

.signal-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.signal-list li {
  margin-bottom: 0.35rem;
}

.signal-list details {
  border: 1px solid #2a2e3a;
  border-radius: 4px;
  background: #0f1117;
}

/* ---------------------------------------------------------------- "Add to widgets" on every section */
.add-widget-btn {
  margin-left: 0.7rem;
  padding: 0.12rem 0.55rem;
  border: 1px solid rgba(125, 211, 252, 0.45);
  border-radius: 999px;
  background: rgba(125, 211, 252, 0.06);
  color: #7dd3fc;
  font: 600 0.72rem/1.4 inherit;
  font-family: inherit;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
  vertical-align: middle;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0.3;  /* translucent until hovered, then it glows blue */
  transition: opacity 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s;
}
.add-widget-btn:hover, .add-widget-btn:focus-visible {
  opacity: 1;
  background: rgba(88, 166, 255, 0.18);
  border-color: #58a6ff;
  color: #cfe6ff;
  box-shadow: 0 0 8px rgba(88, 166, 255, 0.75), 0 0 18px rgba(88, 166, 255, 0.4);
  text-shadow: 0 0 6px rgba(88, 166, 255, 0.8);
}
.add-widget-btn.is-added { opacity: 1; border-color: #86efac; background: rgba(134, 239, 172, 0.12); color: #86efac; }
[data-widget-title] > .add-widget-btn { float: right; margin: 0 0 0.4rem 0.7rem; position: relative; z-index: 1; }
.add-widget-toast {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 60;
  max-width: min(360px, calc(100vw - 2.4rem));
  padding: 0.7rem 1rem;
  border: 1px solid #2a2e3a;
  border-radius: 10px;
  background: #171a23;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  color: #e6edf3;
  font-size: 0.88rem;
}
.add-widget-toast a { color: #7dd3fc; font-weight: 700; }

/* A section pinned on the dashboard: the page loaded with ?embed=1 and trimmed to that section. */
.is-embed body { background: #151923; }
.is-embed .content { max-width: none; margin: 0; padding: 0.2rem 0.9rem 0.8rem; }
.is-embed .analysis-layout { display: block; }
.is-embed .sticky-header { position: static; margin: 0; padding: 0; background: none; }
.is-embed .add-widget-btn, .is-embed .section-nav, .is-embed .embed-hidden { display: none !important; }
.dash-embed-body { padding: 0; }
.dash-embed { display: block; width: 100%; height: 320px; border: 0; border-radius: 0 0 12px 12px; background: #151923; }
.dash-from { margin-left: 0.3rem; color: #8b949e; font-size: 0.72rem; font-weight: 500; text-shadow: none; }

/* ---------------------------------------------------------------- Contact: astronaut in space (static/contact-space.js) */
.space-page { background: #05060c; }
.space-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; }
.space-page .navbar { z-index: 2; }
.space-page .content { position: relative; z-index: 1; }
.space-card {
  position: relative;
  z-index: 1;
  padding: 2rem 2.2rem;
  border: 1px solid #2a2e3a;
  border-radius: 14px;
  background: #171a23;   /* solid: the space scene never shows through */
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

/* Contact: beta tester countdown */
.support-card { margin-top: 1.5rem; }
.support-card h2 { margin: 0 0 0.6rem; }
.support-card p { line-height: 1.55; }
.beta-count { display: flex; align-items: baseline; justify-content: center; gap: 0.6rem; margin: 1.2rem 0 0.6rem; }
.beta-count-num {
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--brand-color);
  text-shadow: var(--brand-glow);
  font-variant-numeric: tabular-nums;
}
.beta-count-label { color: #c9d1d9; font-size: 1.15rem; }
@media (max-width: 560px) { .beta-pips { gap: 0.55rem; } .beta-pips i { width: 8px; height: 3rem; } }
.beta-count.is-full .beta-count-num { color: #8b949e; text-shadow: none; }
/* one laser hash per slot: open slots glow, and a pulse sweeps across them left to right */
.beta-pips { display: flex; justify-content: center; align-items: center; gap: 0.95rem; height: 4.6rem; margin: 0.4rem 0 1.4rem; }
.beta-pips i {
  width: 12px;
  height: 3.6rem;
  border-radius: 4px;
  background: #262b36;
  transform: skewX(-18deg);
}
.beta-pips i.is-open {
  background: linear-gradient(180deg, #cfe6ff, #58a6ff 45%, #1f6feb);
  box-shadow: 0 0 8px rgba(88, 166, 255, 0.9), 0 0 18px rgba(88, 166, 255, 0.5);
  animation: laser-sweep 3s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.18s);
}
@keyframes laser-sweep {
  0%, 100% { opacity: 0.5; transform: skewX(-18deg) scaleY(0.85); box-shadow: 0 0 6px rgba(88, 166, 255, 0.6); }
  25% { opacity: 1; transform: skewX(-18deg) scaleY(1.12); box-shadow: 0 0 14px #cfe6ff, 0 0 30px rgba(88, 166, 255, 0.9), 0 0 46px rgba(88, 166, 255, 0.5); }
  50% { opacity: 0.7; transform: skewX(-18deg) scaleY(0.95); }
}

/* the "inquiry sent" banner: big, green, and flashing so nobody misses it */
.support-sent {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 1.4rem 0 0;
  padding: 1rem 1.2rem;
  border: 2px solid #3ddc84;
  border-radius: 12px;
  background: rgba(61, 220, 132, 0.12);
  color: #e3fbee;
  animation: sent-flash 0.9s ease-in-out 6, sent-glow 2.4s ease-in-out 5.4s infinite;
}
.support-sent strong { font-size: 1.25rem; color: #7ee2a8; }
.support-sent span { font-size: 0.98rem; }
@keyframes sent-flash {
  0%, 100% { background: rgba(61, 220, 132, 0.12); box-shadow: 0 0 10px rgba(61, 220, 132, 0.35); }
  50% { background: rgba(61, 220, 132, 0.38); box-shadow: 0 0 26px rgba(61, 220, 132, 0.95), 0 0 50px rgba(61, 220, 132, 0.5); }
}
@keyframes sent-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(61, 220, 132, 0.35); }
  50% { box-shadow: 0 0 20px rgba(61, 220, 132, 0.7); }
}
@media (prefers-reduced-motion: reduce) {
  .beta-pips i.is-open, .support-sent { animation: none; }
}
.support-btn {
  display: inline-block;
  padding: 0.7rem 1.15rem;
  border: 1px solid rgba(88, 166, 255, 0.6);
  border-radius: 999px;
  background: rgba(88, 166, 255, 0.08);
  color: #e0f2fe;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(88, 166, 255, 0.4);
  transition: transform 0.15s, box-shadow 0.15s;
}
.support-btn:hover { transform: translateY(-1px); box-shadow: 0 0 22px rgba(88, 166, 255, 0.75); }
.support-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.support-actions form { display: contents; }
.support-btn.is-money { border-color: rgba(126, 226, 168, 0.65); background: rgba(126, 226, 168, 0.08); color: #e3fbee; box-shadow: 0 0 14px rgba(126, 226, 168, 0.35); }
.support-btn.is-money:hover { box-shadow: 0 0 22px rgba(126, 226, 168, 0.7); }
.support-dialog {
  width: min(40rem, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid #2a2e3a;
  border-radius: 14px;
  background: #171a23;
  color: inherit;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.7);
}
.support-dialog::backdrop { background: rgba(3, 4, 10, 0.75); }
.support-form { position: relative; display: flex; flex-direction: column; gap: 0.8rem; padding: 1.6rem 1.6rem 1.4rem; text-align: left; }
.support-form h2 { margin: 0; padding-right: 2rem; }
.support-form .support-note { margin: 0; }
.support-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.88rem; color: #c9d1d9; }
.support-form small { color: #8b949e; }
.support-form input, .support-form select, .support-form textarea {
  padding: 0.55rem 0.7rem;
  border: 1px solid #343a48;
  border-radius: 8px;
  background: #0f1117;
  color: #e6edf3;
  font: inherit;
}
.support-form input:focus, .support-form select:focus, .support-form textarea:focus { outline: none; border-color: var(--brand-color); box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.25); }
.support-form textarea { resize: vertical; }
.support-form > .support-btn { align-self: flex-start; }
.support-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
@media (max-width: 560px) { .support-grid { grid-template-columns: minmax(0, 1fr); } }
.support-close { position: absolute; top: 0.9rem; right: 0.9rem; border: 0; background: none; color: #8b949e; font-size: 1.1rem; cursor: pointer; }
.support-close:hover { color: #e6edf3; }
.support-error { margin: 0; padding: 0.6rem 0.8rem; border: 1px solid rgba(255, 120, 90, 0.5); border-radius: 8px; color: #ffb4a2; background: rgba(255, 90, 60, 0.08); }
.support-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.support-note { margin: 0.8rem 0 0; color: #8b949e; font-size: 0.9rem; }
.support-note.is-good { color: #7ee2a8; }
.support-note a { color: var(--brand-color); }

/* the option chain sits on its own between the Greek cards and the calculator */
.analysis-panel > .chain-card {
  margin: 1.25rem 0;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(88, 166, 255, 0.35);
  border-radius: 8px;
  background: #171a23;
}
/* Greeks tab: "Putting it together" fills the row beside Rho (1 column on phones, 2 on mid screens, 4 wide) */
.greek-cards:has(> .greek-card-fill) { grid-template-columns: 1fr; }
.greek-card-fill { border-color: rgba(88, 166, 255, 0.35); }
.greek-card-sub { margin-top: 0.9rem !important; padding-top: 0.8rem; border-top: 1px solid #2a2e3a; }
@media (min-width: 1000px) {
  .greek-cards:has(> .greek-card-fill) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1350px) {
  .greek-cards:has(> .greek-card-fill) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .greek-card-fill { grid-column: span 3; }
}
/* Dashboard: full page width, and a resize handle in each widget's bottom-right corner */
.content:has(.dash-page) { max-width: 1800px; }
.dash-card { position: relative; }
.dash-card.has-height .dash-card-body { height: var(--card-h); overflow: auto; }
.dash-card.has-height .dash-embed { height: 100% !important; }
.dash-resize {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  touch-action: none;
  border-radius: 0 0 10px 0;
  background: linear-gradient(135deg, transparent 50%, rgba(125, 211, 252, 0.35) 50%, rgba(125, 211, 252, 0.35) 58%, transparent 58%, transparent 70%, rgba(125, 211, 252, 0.35) 70%, rgba(125, 211, 252, 0.35) 78%, transparent 78%);
  opacity: 0.6;
  z-index: 2;
}
.dash-card:hover .dash-resize, .dash-resize:hover { opacity: 1; }
.dash-grid.is-resizing, .dash-grid.is-resizing * { user-select: none; cursor: nwse-resize; }
.dash-grid.is-resizing iframe { pointer-events: none; }
/* Titles and headings in Title Case: Every Word Starts With A Capital (acronyms like IV and MFI stay as written). */
h1, h2, h3, h4, h5, h6, th, figcaption,
.section-nav a, .section-nav-group, .stat-label, .sd-chart-heading > span:first-child,
.verdict-headline, .sub-verdict-title, .chart-launcher-text strong, .coming-soon-badge, .dash-card-head h3 {
  text-transform: capitalize;
}
/* ---------------------------------------------------------------- member accounts: navbar */
.nav-logout { margin: 0; display: flex; align-items: center; }
/* Log Out is plain etched text like the other navbar words: no bubble */
.nav-logout button {
  padding: 0.15rem 0.55rem;
  border: 0;
  background: none;
  color: #b9c2cf;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.95), 0 1px 0 rgba(220, 235, 255, 0.16), 0 0 1px rgba(0, 0, 0, 0.6);
  font: inherit;
  cursor: pointer;
}
.nav-logout button:hover {
  color: var(--brand-color);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.95), 0 1px 0 rgba(220, 235, 255, 0.14), 0 0 8px rgba(88, 166, 255, 0.6), 0 0 16px rgba(88, 166, 255, 0.3);
}
.nav-links a.nav-user { color: var(--brand-color); }  /* same blue as the highlighted Dashboard link */
.nav-links a.nav-login { color: var(--brand-color); font-weight: 700; }
.nav-links a.nav-admin {
  color: var(--pastel-lavender);
  font-weight: 700;
  text-shadow: 0 0 8px rgba(196, 181, 253, 0.65), 0 0 18px rgba(196, 181, 253, 0.4);
}
.nav-links a.nav-admin:hover,
.nav-links a.nav-admin.active {
  color: var(--pastel-lavender);
  text-shadow: 0 0 10px rgba(196, 181, 253, 0.9), 0 0 24px rgba(196, 181, 253, 0.65), 0 0 40px rgba(196, 181, 253, 0.4);
}

/* Lavender alert flash: the Admin nav link while signups are awaiting approval, and that member's name on
   their own /admin/<id> page. Quick (not the slow pulses used elsewhere) so it reads as "needs attention". */
.admin-flash { animation: admin-alert-flash 1s ease-in-out infinite; }
@keyframes admin-alert-flash {
  0%, 100% {
    color: var(--pastel-lavender);
    text-shadow: 0 0 8px rgba(196, 181, 253, 0.65), 0 0 18px rgba(196, 181, 253, 0.4);
  }
  50% {
    color: #fff;
    text-shadow: 0 0 10px rgba(196, 181, 253, 1), 0 0 26px rgba(196, 181, 253, 0.9), 0 0 44px rgba(196, 181, 253, 0.6);
  }
}
@media (prefers-reduced-motion: reduce) {
  .admin-flash { animation: none; }
}

/* ---------------------------------------------------------------- the command console (landing page) */
.console-up .landing-hero .ship-canvas { filter: brightness(0.5) saturate(1.1); transition: filter 1.2s ease; }
.console-up .landing-scroll { display: none; }
.console {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 7.5rem 1rem 1.5rem;
  pointer-events: none;
}
.console-panel {
  position: relative;
  width: min(430px, 100%);
  max-height: calc(100% - 1rem);
  overflow-y: auto;
  padding: 1.4rem 1.5rem 1.3rem;
  border: 1px solid rgba(56, 189, 248, 0.55);
  border-radius: 14px;
  background:
    linear-gradient(160deg, rgba(14, 30, 52, 0.94), rgba(6, 12, 24, 0.96));
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.12), 0 0 28px rgba(56, 189, 248, 0.35), 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 0 40px rgba(56, 189, 248, 0.08);
  color: #d8ecff;
  pointer-events: auto;
  opacity: 0;
  transform: translateX(70px) scale(0.97);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.9, 0.25, 1.05);
}
.console.is-open .console-panel { opacity: 1; transform: none; }
/* scanlines and a slow sweep of light, like a holographic display */
.console-panel::before, .console-panel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.console-panel::before { background: repeating-linear-gradient(0deg, rgba(125, 211, 252, 0.045) 0 1px, transparent 1px 3px); }
.console-panel::after {
  background: linear-gradient(180deg, transparent 0%, rgba(125, 211, 252, 0.10) 50%, transparent 100%);
  background-size: 100% 40%;
  background-repeat: no-repeat;
  animation: console-sweep 4.5s linear infinite;
}
@keyframes console-sweep { from { background-position: 0 -60%; } to { background-position: 0 160%; } }
.console-corner { position: absolute; width: 18px; height: 18px; border: 2px solid #38bdf8; filter: drop-shadow(0 0 4px #38bdf8); }
.console-corner.is-tl { top: -3px; left: -3px; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.console-corner.is-tr { top: -3px; right: -3px; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; }
.console-corner.is-bl { bottom: -3px; left: -3px; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
.console-corner.is-br { bottom: -3px; right: -3px; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }
.console-head { position: relative; text-align: center; margin-bottom: 0.9rem; }
.console-kicker { margin: 0 0 0.35rem; color: #7dd3fc; font: 600 0.7rem/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: 0.22em; text-transform: uppercase; }
.console-dot { display: inline-block; width: 7px; height: 7px; margin-right: 0.35rem; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #4ade80; vertical-align: middle; animation: console-blink 1.6s steps(2, start) infinite; }
@keyframes console-blink { to { opacity: 0.25; } }
.console-title { margin: 0; color: #e0f2fe; font-size: 1.55rem; letter-spacing: 0.08em; text-shadow: 0 0 10px rgba(56, 189, 248, 0.8), 0 0 24px rgba(56, 189, 248, 0.4); min-height: 1.9rem; }
.console-title.is-typing::after { content: "_"; margin-left: 2px; animation: console-blink 0.7s steps(2, start) infinite; }
.console-sub { margin: 0.3rem 0 0; color: #93c5fd; font-size: 0.9rem; }
.console-tabs { position: relative; display: flex; gap: 0.3rem; margin-bottom: 0.9rem; padding: 0.25rem; border: 1px solid rgba(56, 189, 248, 0.25); border-radius: 10px; background: rgba(2, 8, 18, 0.6); }
.console-tabs button { flex: 1; padding: 0.45rem 0.3rem; border: 0; border-radius: 7px; background: none; color: #93c5fd; font: 600 0.82rem/1.2 inherit; font-family: inherit; letter-spacing: 0.04em; cursor: pointer; }
.console-tabs button[aria-selected="true"] { background: rgba(56, 189, 248, 0.18); color: #e0f2fe; box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.5), 0 0 12px rgba(56, 189, 248, 0.25); }
.console[data-mode="reset"] .console-tabs { display: none; }
.console-form { position: relative; display: none; flex-direction: column; gap: 0.7rem; }
.console[data-mode="login"] [data-form="login"], .console[data-mode="register"] [data-form="register"],
.console[data-mode="forgot"] [data-form="forgot"], .console[data-mode="reset"] [data-form="reset"] { display: flex; }
.console-form label { display: flex; flex-direction: column; gap: 0.3rem; color: #7dd3fc; font: 600 0.72rem/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: 0.14em; text-transform: uppercase; }
.console-form label small { color: #6b8aa8; letter-spacing: 0.04em; text-transform: none; }
.console-form input {
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 8px;
  background: rgba(2, 8, 18, 0.85);
  color: #e0f2fe;
  font: 400 0.98rem/1.3 inherit;
  font-family: inherit;
  letter-spacing: 0.02em;
  text-transform: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.console-form input:focus { outline: none; border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2), 0 0 14px rgba(56, 189, 248, 0.35); }
.console-form select {
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 8px;
  background: rgba(2, 8, 18, 0.85);
  color: #e0f2fe;
  font: 400 0.98rem/1.3 inherit;
  font-family: inherit;
  letter-spacing: 0.02em;
  text-transform: none;
}
.console-form select:focus { outline: none; border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2), 0 0 14px rgba(56, 189, 248, 0.35); }
.console-form label.console-checkbox { flex-direction: row; align-items: center; gap: 0.5rem; text-transform: none; font-weight: 500; letter-spacing: 0.02em; }
.console-form label.console-checkbox input { width: auto; accent-color: #38bdf8; }
.console-go {
  margin-top: 0.3rem;
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(180deg, #38bdf8, #1d6fd8);
  color: #fff;
  font: 800 0.95rem/1 inherit;
  font-family: inherit;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.55);
  transition: transform 0.15s, box-shadow 0.15s;
}
.console-go:hover { transform: translateY(-1px); box-shadow: 0 0 28px rgba(56, 189, 248, 0.8); }
.console-msg { position: relative; margin: 0 0 0.8rem; padding: 0.6rem 0.75rem; border-radius: 8px; font-size: 0.86rem; line-height: 1.4; }
.console-msg.is-error { border: 1px solid rgba(248, 113, 113, 0.55); background: rgba(127, 29, 29, 0.35); color: #fecaca; }
.console-msg.is-notice { border: 1px solid rgba(74, 222, 128, 0.5); background: rgba(20, 83, 45, 0.35); color: #bbf7d0; }
.console-fine { margin: 0; color: #6b8aa8; font-size: 0.78rem; }
.console-fine a { color: #7dd3fc; }
.console .cf-turnstile { min-height: 65px; }
.console-skip {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(125, 211, 252, 0.4);
  border-radius: 999px;
  background: rgba(8, 16, 30, 0.7);
  color: #93c5fd;
  font: 600 0.8rem/1 inherit;
  font-family: inherit;
  cursor: pointer;
}
.console-skip:hover { color: #e0f2fe; border-color: #7dd3fc; }
.bridge-enter {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  padding: 0.8rem 1.6rem;
  border: 1px solid rgba(56, 189, 248, 0.6);
  border-radius: 10px;
  background: rgba(6, 14, 28, 0.85);
  color: #e0f2fe;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 0 22px rgba(56, 189, 248, 0.45);
}
.bridge-enter:hover { box-shadow: 0 0 32px rgba(56, 189, 248, 0.75); }
@media (max-width: 700px) { .console { padding-top: 5.5rem; } }

/* ---------------------------------------------------------------- account and privacy pages */
.account-page { max-width: 640px; margin: 0 auto; }
.account-card { margin: 1rem 0; padding: 1.1rem 1.2rem; border: 1px solid #2a2e3a; border-radius: 12px; background: #151923; }
.account-card h2 { margin: 0 0 0.6rem; font-size: 1.1rem; }
.account-card form { display: grid; gap: 0.6rem; max-width: 380px; }
.account-card label { display: grid; gap: 0.25rem; color: #93c5fd; font-size: 0.85rem; }
.account-card input { padding: 0.55rem 0.7rem; border: 1px solid #2a2e3a; border-radius: 8px; background: #0f1117; color: #e6edf3; font: inherit; }
.account-card input:focus { outline: none; border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2); }
.account-card button { justify-self: start; padding: 0.55rem 1.1rem; border: 0; border-radius: 8px; background: #1f6feb; color: #fff; font-weight: 700; cursor: pointer; }
.account-card.is-danger { border-color: rgba(248, 113, 113, 0.4); }
.account-card.is-danger button { background: #b91c1c; }
.account-facts { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; font-size: 0.92rem; }
.account-facts dt { color: #8b949e; }
.account-facts dd { margin: 0; color: #e6edf3; }
.account-msg { padding: 0.6rem 0.8rem; border-radius: 8px; }
.account-msg.is-error { border: 1px solid rgba(248, 113, 113, 0.55); background: rgba(127, 29, 29, 0.35); color: #fecaca; }
.account-msg.is-notice { border: 1px solid rgba(74, 222, 128, 0.5); background: rgba(20, 83, 45, 0.35); color: #bbf7d0; }
.admin-page { max-width: 100%; margin: 0; }
.admin-page .admin-back { margin: 0 0 1rem; }
.admin-page .admin-back a { color: var(--pastel-lavender); }
.admin-page .account-card-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.8rem; }
.admin-page .account-card-actions form { display: contents; }
.admin-page .account-card-actions button {
  padding: 0.65rem 1.3rem;
  border-radius: 9px;
  background: rgba(6, 14, 28, 0.85);
  font: 800 0.8rem/1 inherit;
  font-family: inherit;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.admin-page .account-card-actions button:hover { transform: translateY(-1px); }
.admin-page .btn-approve {
  border: 1px solid rgba(88, 166, 255, 0.6);
  color: #e0f2fe;
  box-shadow: 0 0 14px rgba(88, 166, 255, 0.4);
}
.admin-page .btn-approve:hover { box-shadow: 0 0 22px rgba(88, 166, 255, 0.75); }
.admin-page .btn-suspend {
  border: 1px solid rgba(255, 150, 70, 0.6);
  color: #ffe8d6;
  box-shadow: 0 0 14px rgba(255, 140, 60, 0.4);
}
.admin-page .btn-suspend:hover { box-shadow: 0 0 22px rgba(255, 140, 60, 0.75); }
.admin-page .btn-reject {
  border: 1px solid rgba(255, 60, 80, 0.6);
  color: #ffe0e3;
  box-shadow: 0 0 14px rgba(255, 50, 70, 0.4);
}
.admin-page .btn-reject:hover { box-shadow: 0 0 22px rgba(255, 50, 70, 0.75); }
.admin-page .btn-ban {
  background: rgba(30, 4, 8, 0.9);
  border: 1px solid rgba(255, 40, 60, 0.85);
  color: #fff;
  box-shadow: 0 0 10px rgba(255, 30, 50, 0.6), 0 0 26px rgba(255, 20, 40, 0.35);
}
.admin-page .btn-ban:hover { box-shadow: 0 0 16px rgba(255, 30, 50, 0.9), 0 0 36px rgba(255, 20, 40, 0.55); }
.admin-page .row-actions { display: flex; gap: 0.4rem; }
.admin-page .row-actions form { display: contents; }
.admin-page .row-actions button {
  padding: 0.3rem 0.65rem;
  border-radius: 7px;
  background: rgba(6, 14, 28, 0.85);
  font: 800 0.68rem/1 inherit;
  font-family: inherit;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.admin-page .row-actions button:hover { transform: translateY(-1px); }
.privacy-page { max-width: 720px; margin: 0 auto; line-height: 1.6; }
.privacy-page h2 { margin-top: 1.6rem; font-size: 1.15rem; }
/* ---------------------------------------------------------------- console: "Identify yourself..." dots */
/* three dots light up one after another, glow, then fade out in the same order, and repeat */
.console-dots { display: inline-block; margin-left: 1px; }
.console-dots i { font-style: normal; opacity: 0; animation: console-dot 1.8s ease-in-out infinite; text-shadow: 0 0 8px rgba(56, 189, 248, 0.9); }
.console-dots i:nth-child(2) { animation-delay: 0.3s; }
.console-dots i:nth-child(3) { animation-delay: 0.6s; }
@keyframes console-dot { 0% { opacity: 0; } 15% { opacity: 1; } 65% { opacity: 1; } 82%, 100% { opacity: 0; } }
.console:not([data-mode="login"]) .console-dots { display: none; }
@media (prefers-reduced-motion: reduce) { .console-dots i { animation: none; opacity: 1; } }

/* ---------------------------------------------------------------- console: room for the sign-up form */
/* the panel grows to fit its form instead of scrolling; sign-up is wider, with its fields in two columns */
.console-panel { max-height: none; overflow: visible; }
.console[data-mode="register"] .console-panel { width: min(640px, 100%); }
.console[data-mode="register"] [data-form="register"] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 0.9rem; }
.console [data-form="register"] .cf-turnstile,
.console [data-form="register"] .console-fine,
.console [data-form="register"] .console-go { grid-column: 1 / -1; }
@media (max-width: 700px) {
  .console-panel { max-height: calc(100% - 1rem); overflow-y: auto; }
  .console[data-mode="register"] [data-form="register"] { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- the intro's starry night on every page */
body {
  background:
    radial-gradient(ellipse at 50% 100%, rgba(56, 189, 248, 0.10), transparent 60%),
    linear-gradient(180deg, #080b11 0%, #0f1420 72%, #0b0e15 100%);
  background-attachment: fixed;
}
/* two layers of stars behind everything: a steady field, and a sparser one that slowly twinkles */
body::before, body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: repeat;
}
body::before {
  background-image:
    radial-gradient(1.7px 1.7px at 23px 41px, rgba(224, 242, 254, 0.85), transparent 70%),
    radial-gradient(1.7px 1.7px at 91px 173px, rgba(125, 211, 252, 0.7), transparent 70%),
    radial-gradient(2px 2px at 157px 62px, rgba(224, 242, 254, 0.9), transparent 70%),
    radial-gradient(1.7px 1.7px at 211px 238px, rgba(224, 242, 254, 0.6), transparent 70%),
    radial-gradient(1.7px 1.7px at 276px 119px, rgba(125, 211, 252, 0.75), transparent 70%),
    radial-gradient(2.1px 2.1px at 44px 279px, rgba(224, 242, 254, 0.8), transparent 70%),
    radial-gradient(1.7px 1.7px at 313px 21px, rgba(224, 242, 254, 0.55), transparent 70%),
    radial-gradient(1.7px 1.7px at 128px 301px, rgba(125, 211, 252, 0.6), transparent 70%),
    radial-gradient(1.7px 1.7px at 241px 331px, rgba(224, 242, 254, 0.7), transparent 70%),
    radial-gradient(1.7px 1.7px at 332px 204px, rgba(224, 242, 254, 0.5), transparent 70%);
  background-size: 240px 240px;
  opacity: 1;
}
body::after {
  background-image:
    radial-gradient(2.5px 2.5px at 70px 90px, rgba(224, 242, 254, 0.95), transparent 70%),
    radial-gradient(2.2px 2.2px at 380px 260px, rgba(125, 211, 252, 0.9), transparent 70%),
    radial-gradient(2.7px 2.7px at 520px 60px, rgba(224, 242, 254, 0.9), transparent 70%),
    radial-gradient(2.2px 2.2px at 230px 470px, rgba(224, 242, 254, 0.85), transparent 70%),
    radial-gradient(2.5px 2.5px at 600px 420px, rgba(125, 211, 252, 0.9), transparent 70%);
  background-size: 420px 380px;
  animation: stars-twinkle 7s ease-in-out infinite alternate;
}
@keyframes stars-twinkle { from { opacity: 0.35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body::after { animation: none; opacity: 0.6; } }
/* pinned bars let the stars show through softly instead of sitting as flat blocks */
.sticky-header, .section-nav {
  background: rgba(9, 12, 19, 0.82) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* left panes: the starship hull from static/pane-wall.js, behind the pane's links (the pane is its own
   stacking context, so z-index -1 still sits above the pane's background) */
.section-nav { isolation: isolate; }
.pane-wall { position: absolute; top: 0; left: 0; z-index: -1; display: block; pointer-events: none; }
.section-nav a:hover { background: rgba(8, 10, 15, 0.7); }
@media (max-width: 700px) { .pane-wall { display: none; } }
/* embedded dashboard widgets and the contact page's own space scene keep their own backgrounds */
.is-embed body::before, .is-embed body::after, .space-page::before, .space-page::after { display: none; }
/* ---------------------------------------------------------------- phones: navbar menu */
.nav-toggle { display: none; }
@media (max-width: 760px) {
  .navbar { flex-wrap: wrap; row-gap: 0; padding: 0.75rem 1rem; }
  .navbar .brand { font-size: 1.45rem; }
  .navbar .nav-wall { display: none; }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid rgba(125, 211, 252, 0.45);
    border-radius: 10px;
    background: #171a23;
    color: #7dd3fc;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
  }
  .nav-toggle:hover, .nav-toggle[aria-expanded="true"] { border-color: #7dd3fc; box-shadow: 0 0 12px rgba(56, 189, 248, 0.4); }
  /* the links become a full-width dropdown list, Dashboard first */
  .nav-links { display: none; flex-basis: 100%; flex-direction: column-reverse; gap: 0; margin: 0.6rem 0 0; }
  .navbar.nav-open .nav-links { display: flex; }
  .nav-links a, .nav-logout { padding: 0.75rem 0.4rem; border: 0; border-top: 1px solid #2a2e3a; border-radius: 0; background: none; box-shadow: none; font-size: 1.05rem; }
  .nav-logout { justify-content: flex-start; }
  /* Data & Analytics: a heading with its pages listed under it, indented, always open */
  .nav-dropdown { flex-direction: column; align-items: stretch; }
  .nav-dropdown-toggle { padding: 0.75rem 0.4rem; border-top: 1px solid #2a2e3a; text-align: left; font-size: 1.05rem; cursor: default; }
  .nav-caret { display: none; }
  .nav-dropdown-menu { position: static; display: flex; min-width: 0; padding: 0 0 0 1.1rem; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .nav-dropdown-menu::before { display: none; }
  .nav-dropdown-menu a.active { background: none; }
}

/* ---------------------------------------------------------------- phones: background that stays put */
/* Phone browsers (iPhone Safari especially) ignore fixed page backgrounds, so the night gradient lives in the
   fixed star layer instead, which they do keep in place. */
body { background: #0b0e15; }
body::before {
  background-image:
    radial-gradient(1.7px 1.7px at 23px 41px, rgba(224, 242, 254, 0.85), transparent 70%),
    radial-gradient(1.7px 1.7px at 91px 173px, rgba(125, 211, 252, 0.7), transparent 70%),
    radial-gradient(2px 2px at 157px 62px, rgba(224, 242, 254, 0.9), transparent 70%),
    radial-gradient(1.7px 1.7px at 211px 238px, rgba(224, 242, 254, 0.6), transparent 70%),
    radial-gradient(1.7px 1.7px at 276px 119px, rgba(125, 211, 252, 0.75), transparent 70%),
    radial-gradient(2.1px 2.1px at 44px 279px, rgba(224, 242, 254, 0.8), transparent 70%),
    radial-gradient(1.7px 1.7px at 313px 21px, rgba(224, 242, 254, 0.55), transparent 70%),
    radial-gradient(1.7px 1.7px at 128px 301px, rgba(125, 211, 252, 0.6), transparent 70%),
    radial-gradient(1.7px 1.7px at 241px 331px, rgba(224, 242, 254, 0.7), transparent 70%),
    radial-gradient(1.7px 1.7px at 332px 204px, rgba(224, 242, 254, 0.5), transparent 70%),
    radial-gradient(ellipse at 50% 100%, rgba(56, 189, 248, 0.10), transparent 60%),
    linear-gradient(180deg, #080b11 0%, #0f1420 72%, #0b0e15 100%);
  background-size: 240px 240px, 240px 240px, 240px 240px, 240px 240px, 240px 240px,
                   240px 240px, 240px 240px, 240px 240px, 240px 240px, 240px 240px, 100% 100%, 100% 100%;
  background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat;
}

/* ---------------------------------------------------------------- phones: wide tables scroll inside their card */
.dash-card-body { overflow-x: auto; }
/* ---------------------------------------------------------------- phones: tables and the tab strip */
@media (max-width: 760px) {
  /* a table wider than the phone scrolls sideways on its own instead of stretching the page
     (tables already inside a scrolling box are left alone) */
  .content table:not(.scroll-window table):not(.chain-scroll table):not(.wl-table-wrap table):not(.dash-card-body table) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
  /* the left pane becomes a "Sections" menu (static/section-menu.js): a full-width button naming the open tab,
     which drops down every tab as a full-width list, grouped as on the desktop pane */
  .section-nav { display: flex; flex-direction: column; gap: 0.5rem; }
  .section-menu-toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(125, 211, 252, 0.5);
    border-radius: 10px;
    background: #171a23;
    color: #e0f2fe;
    font: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
  }
  .section-menu-toggle:hover, .section-nav.is-menu-open .section-menu-toggle { border-color: #7dd3fc; box-shadow: 0 0 12px rgba(56, 189, 248, 0.35); }
  .section-menu-icon { color: #7dd3fc; font-size: 1.2rem; line-height: 1; }
  .section-menu-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .section-menu-caret { color: #7dd3fc; transition: transform 0.2s ease; }
  .section-nav.is-menu-open .section-menu-caret { transform: rotate(180deg); }
  .section-nav .elite-heading { display: none; margin: 0; }
  .section-nav.is-menu-open .elite-heading { display: block; }
  .section-nav-links { display: none !important; }
  .section-nav.is-menu-open .section-nav-links {
    display: flex !important;
    flex-direction: column;
    gap: 0.3rem;
    overflow: visible;
    padding: 0.2rem 0 0.4rem;
  }
  .section-nav-group { margin: 0.6rem 0 0.1rem; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; }
  .section-nav-group:first-child { margin-top: 0; }
  .section-nav a { display: block; padding: 0.6rem 0.9rem; border: 1px solid #2a2e3a !important; border-radius: 8px; background: rgba(23, 26, 35, 0.85); font-size: 0.95rem; white-space: normal; }
  .section-nav a.active, .section-nav a:hover { border-color: var(--brand-color) !important; background: rgba(88, 166, 255, 0.14); }
  .section-nav a.elite-heading-link { border: 0 !important; background: none; padding: 0.2rem 0; }
}
/* on wider screens the pane shows as usual, so the menu button isn't needed */
@media (min-width: 761px) { .section-menu-toggle { display: none; } }@media (max-width: 760px) {
  /* phone tables: give columns room so sentences don't wrap one word per line; the table scrolls sideways instead */
  .content table:not(.scroll-window table):not(.chain-scroll table):not(.wl-table-wrap table):not(.dash-card-body table) :is(td, th) { min-width: 5.5rem; }
  .content table:not(.scroll-window table):not(.chain-scroll table):not(.wl-table-wrap table):not(.dash-card-body table) td.muted { min-width: 15rem; }
  /* the sentence column in the liquidity-zone table */
  .level-table td:nth-child(4) { min-width: 15rem !important; }
}
/* ---------------------------------------------------------------- landing: "Enter the Bridge" just under the tagline */
.hero-access {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--hero-title-bottom, 9rem);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1rem;
  pointer-events: none;   /* only the button and the console take clicks; the animation shows around them */
}
.hero-access > * { pointer-events: auto; }
.hero-access .bridge-enter {
  position: static;
  transform: none;
  font: inherit;
  font-weight: 800;
  letter-spacing: 0.1em;
  white-space: nowrap;
  cursor: pointer;
  animation: bridge-in 0.8s ease both 0.4s;
}
.hero-access .bridge-enter[hidden] { display: none; }
@keyframes bridge-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* the console drops down in the button's place, under the tagline */
.hero-access .console { position: static; display: block; width: 100%; padding: 0; pointer-events: auto; }
.hero-access .console[hidden] { display: none; }
.hero-access .console-panel {
  margin: 0 auto;
  transform-origin: top center;
  transform: translateY(-18px) scaleY(0.92);
  opacity: 0;
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.2, 0.9, 0.25, 1.05);
}
.hero-access .console.is-open .console-panel { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .hero-access .bridge-enter { padding: 0.7rem 1.3rem; font-size: 0.95rem; letter-spacing: 0.08em; }
  /* on phones a tall form scrolls inside the panel rather than running off the bottom of the screen */
  .hero-access .console-panel {
    max-height: calc(100vh - var(--navbar-height, 64px) - var(--hero-title-bottom, 9rem) - 1rem);
    max-height: calc(100svh - var(--navbar-height, 64px) - var(--hero-title-bottom, 9rem) - 1rem);
    overflow-y: auto;
  }
}
@media (prefers-reduced-motion: reduce) { .hero-access .bridge-enter { animation: none; } }
/* ---------------------------------------------------------------- console: retract button (top right) */
.console-close {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 2;
  width: 1.9rem;
  height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(125, 211, 252, 0.4);
  border-radius: 8px;
  background: rgba(2, 8, 18, 0.7);
  color: #7dd3fc;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, color 0.15s;
}
.console-close:hover, .console-close:focus-visible { border-color: #7dd3fc; color: #e0f2fe; box-shadow: 0 0 12px rgba(56, 189, 248, 0.45); outline: none; }
.hero-access .console-head { padding: 0 2rem; }  /* keeps the header text clear of the retract button */

/* Money Flow Index: the Current and History table with Hot / Cold / Weakest beside it (stacked when narrow) */
/* Hot / Cold / Weakest sit side by side in one row to the right of the heading, and the table runs full width
   below both. The main block is display: contents so its heading, text and table can be placed separately
   while staying one section in the page (for its widget button). */
.mfi-split { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 3rem; align-items: start; }
.mfi-split-main { display: contents; }
.mfi-split-main > h3 { grid-column: 1; grid-row: 1; }
.mfi-split-main > .heat-scroll { grid-column: 1 / -1; grid-row: 2; }
.mfi-split-side { grid-column: 2; grid-row: 1; display: flex; gap: 2.5rem; }
.mfi-split-side h3, .mfi-split-side p, .mfi-split-side li { white-space: nowrap; }
.mfi-split-side ul { margin: 0.5rem 0; padding-left: 1.1rem; }
/* Hot sectors: the letters themselves are on fire (a flame gradient rising through the glyphs, with a tight
   flickering ember glow around them, not flames shooting up off the top). Cold sectors are frozen ice, the
   weakest is lavender. The ticker link inside gets the same fill, since a clipped background doesn't reach it. */
.mfi-fire, .mfi-ice { list-style: none; padding-left: 0; }
.mfi-fire-text, .mfi-fire-text .etf-link {
  font-weight: 800;
  background-image: linear-gradient(0deg, #ff2200 0%, #ff6a00 18%, #ffb300 34%, #fff2a8 46%, #ffb300 58%, #ff6a00 74%, #ff2200 88%, #b31200 100%);
  background-size: 100% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  animation: mfi-flames 1.6s linear infinite;
}
.mfi-fire-text { animation: mfi-flames 1.6s linear infinite, mfi-embers 0.9s ease-in-out infinite alternate; }
.mfi-fire-text .etf-link { text-decoration-color: #ff8a00; }
@keyframes mfi-flames { from { background-position: 50% 0%; } to { background-position: 50% 100%; } }
@keyframes mfi-embers {
  0%   { filter: drop-shadow(0 0 2px rgba(255, 120, 0, 0.9)) drop-shadow(0 0 6px rgba(255, 50, 0, 0.55)); }
  50%  { filter: drop-shadow(0 0 3px rgba(255, 150, 0, 1)) drop-shadow(0 0 9px rgba(255, 60, 0, 0.7)); }
  100% { filter: drop-shadow(0 0 1px rgba(255, 110, 0, 0.8)) drop-shadow(0 0 5px rgba(255, 40, 0, 0.45)); }
}
.mfi-ice-text {
  color: #e8faff;
  font-weight: 800;
  -webkit-text-stroke: 0.4px #bae6fd;
  text-shadow: 0 0 1px #fff, 0 0 5px #7dd3fc, 0 0 12px #38bdf8, 0 2px 0 rgba(186, 230, 253, 0.55), 0 3px 6px rgba(14, 116, 144, 0.6);
  animation: mfi-frost 3s ease-in-out infinite alternate;
}
.mfi-ice-text::before { content: "❄️ "; }
@keyframes mfi-frost { from { filter: brightness(1); } to { filter: brightness(1.25) drop-shadow(0 0 4px rgba(224, 242, 254, 0.7)); } }
.mfi-weak-text { color: var(--pastel-lavender); font-weight: 700; text-shadow: 0 0 8px rgba(196, 181, 253, 0.55); }
.mfi-ice-text .etf-link, .mfi-weak-text .etf-link { text-decoration-color: currentColor; }
@media (prefers-reduced-motion: reduce) {
  .mfi-fire-text, .mfi-fire-text .etf-link, .mfi-ice-text { animation: none; }
  .mfi-fire-text { filter: drop-shadow(0 0 3px rgba(255, 120, 0, 0.9)); }
}
@media (max-width: 1100px) {
  .mfi-split { grid-template-columns: minmax(0, 1fr); }
  .mfi-split-side { grid-column: 1; grid-row: auto; flex-wrap: wrap; gap: 0 2rem; }
  .mfi-split-main > .heat-scroll { grid-row: auto; }
}

/* Money Flow Index calendar: the sector and month dropdowns */
.mfi-period-label { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0 0.75rem; font-weight: 600; }
.mfi-cal-controls select { padding: 0.3rem 0.6rem; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.2); background: #0b0b0b; color: inherit; font: inherit; }
.mfi-cal-controls { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.mfi-cals { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem 1.25rem; }
.mfi-cal-month-block h4 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.mfi-cal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.mfi-cal-head { font-size: 0.75rem; color: var(--muted, #8b949e); text-align: center; padding-bottom: 2px; }
.mfi-cal-day { min-height: 3.2rem; padding: 4px 6px; border-radius: 6px; background: #171a23; display: flex; flex-direction: column; justify-content: space-between; }
.mfi-cal-day.is-empty { background: transparent; }
.mfi-cal-day.is-closed { background: transparent; border: 1px dashed rgba(255, 255, 255, 0.12); }
.mfi-cal-closed { font-size: 0.7rem; text-align: right; opacity: 0.6; }
.mfi-cal-date { font-size: 0.7rem; opacity: 0.75; }
.mfi-cal-value { font-size: 1.05rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }