/* The Investing Score panel (showcase/chapters/regimes/_investing.html, regime-investing.js) of the Market
   Regimes chapter on /how-it-works/. One app window with the tool's two pages:
     Investing Score Leaderboard (intrinio_stock/templates/stock_data/investing_regime_leaderboard.html)
     Ticker Investing Score      (intrinio_stock/templates/stock_data/investing_regime.html)
   Colours inside the window are the pages' own; the panel around it uses landing.css tokens.
   Everything is rgv-* and scoped under .rgv so it beats landing.css's element reset.
   Only transform and opacity animate; nothing moves under reduced motion (landing.css section 13,
   plus .rgv-still) or while the demo is paused. */

.rgv {
  --rgv-bg: #14132b; --rgv-card: linear-gradient(160deg, rgba(18, 20, 40, .98), rgba(12, 14, 30, .99));
  --rgv-line: rgba(169, 158, 245, .12); --rgv-line2: rgba(255, 255, 255, .06);
  --rgv-text: #e2e8f0; --rgv-dim: #cbd5e1; --rgv-muted: #94a3b8; --rgv-bright: #ffffff;
  --rgv-p: #a99ef5; --rgv-p2: #c4b5fd; --rgv-p3: #6759d1;
  --rgv-green: #34d399; --rgv-lav: #a5b4fc; --rgv-grey: #94a3b8; --rgv-red: #f87171; --rgv-amber: #fbbf24;
  --rgv-tk-green: #00C853; --rgv-tk-red: #FF1744; --rgv-tk-orange: #FF9800;
  --rgv-num: 'Poppins', 'Inter', system-ui, sans-serif;
  --rgv-h: 720px;
  display: flex; flex-direction: column; gap: var(--lp-sp-4); min-width: 0;
}
html:not(.js) .rgv-js, .rgv.rgv-nodata .rgv-js, .rgv.rgv-still .rgv-play { display: none !important; }
.rgv :focus-visible { outline: 2px solid var(--rgv-p2); outline-offset: 2px; }

/* ---- head ---- */
.rgv .rgv-head { display: flex; flex-direction: column; gap: var(--lp-sp-2); max-width: 76ch; }
.rgv .rgv-title { margin: 0; color: var(--lp-text); font: 700 var(--lp-fs-lg)/1.25 var(--lp-font-title); letter-spacing: -.01em; }
.rgv .rgv-lead { margin: 0; color: var(--lp-muted); font-size: var(--lp-fs-base); line-height: 1.6; }

/* ---- the window ---- */
.rgv-window {
  position: relative; overflow: hidden; min-width: 0;
  border: 1px solid var(--lp-border-strong); border-radius: var(--lp-r-lg); background: var(--rgv-bg);
  box-shadow: var(--lp-shadow), 0 0 80px color-mix(in srgb, var(--lp-g-investing) 10%, transparent);
}
.rgv-bar {
  display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px;
  background: #0c0a17; border-bottom: 1px solid var(--rgv-line2); white-space: nowrap; overflow: hidden;
}
.rgv-lights { display: inline-flex; gap: 6px; flex: none; }
.rgv-lights i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.rgv-lights i + i { background: #febc2e; }
.rgv-lights i + i + i { background: #28c840; }
.rgv-bar-tab { flex: none; padding: 4px 12px; border-radius: 8px 8px 0 0; background: var(--rgv-bg); color: var(--rgv-muted); font-size: 12px; }
.rgv-bar-tab b { color: var(--rgv-bright); font-weight: 800; }
.rgv-bar-url { overflow: hidden; text-overflow: ellipsis; color: #8e8ab4; font: 11.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.rgv-scroll {
  position: relative; height: clamp(460px, 78vh, var(--rgv-h)); overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: rgba(103, 89, 209, .4) transparent;
}
@media (hover: hover) and (pointer: fine) { .rgv-scroll { overscroll-behavior: contain; } }
.rgv-scroll:focus-visible { outline-offset: -3px; }
.rgv-page {
  position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 16px;
  color: var(--rgv-text); font-size: 13px; line-height: 1.45;
}
.rgv .rgv-page p { margin: 0; }
.rgv-pg-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rgv-pg-top .lp-sample { margin-left: auto; }
.rgv-pg-name { color: var(--rgv-bright); font: 700 16px/1.3 var(--lp-font-title); }
.rgv-pane { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rgv-pane.is-new { animation: rgv-in .35s var(--lp-ease) both; }
@keyframes rgv-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- page nav (the two pages) ---- */
.rgv-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.rgv .rgv-nav-btn {
  padding: 8px 18px; border-radius: 10px; cursor: pointer; margin: 0;
  border: 1px solid rgba(169, 158, 245, .2); background: rgba(255, 255, 255, .03); color: var(--rgv-muted);
  font: 600 13px/1.3 var(--lp-font);
}
.rgv .rgv-nav-btn:hover { border-color: rgba(169, 158, 245, .45); color: var(--rgv-p2); }
.rgv .rgv-nav-btn[aria-selected="true"] {
  background: linear-gradient(135deg, rgba(103, 89, 209, .25), rgba(169, 158, 245, .15));
  border-color: rgba(169, 158, 245, .5); color: #e0e7ff;
}

/* ---- KPI cards ---- */
.rgv-kpis { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.rgv-kpi {
  --acc: rgba(196, 181, 253, .7); --c: #c4b5fd;
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 8px 12px; border-radius: 14px; text-align: center;
  background: var(--rgv-card); border: 1px solid rgba(169, 158, 245, .1);
}
.rgv-kpi::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--acc); }
.rgv-kpi--elite, .rgv-kpi--ready { --acc: rgba(52, 211, 153, .7); --c: #34d399; }
.rgv-kpi--watch { --acc: rgba(165, 180, 252, .7); --c: #a5b4fc; }
.rgv-kpi--neutral { --acc: rgba(148, 163, 184, .5); --c: #94a3b8; }
.rgv-kpi--avoid { --acc: rgba(248, 113, 113, .7); --c: #f87171; }
.rgv-kpi-v { color: var(--c); font: 800 26px/1 var(--rgv-num); font-variant-numeric: tabular-nums; }
.rgv-kpi-l { color: var(--rgv-bright); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* ---- toolbar ---- */
.rgv-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rgv-zones { display: flex; flex-wrap: wrap; gap: 6px; }
.rgv .rgv-pill {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); color: #fff;
  font: 600 12px/1.3 var(--lp-font); white-space: nowrap;
}
.rgv .rgv-pill:hover { border-color: rgba(169, 158, 245, .35); }
.rgv .rgv-pill[aria-pressed="true"] { background: rgba(103, 89, 209, .22); border-color: rgba(169, 158, 245, .55); }
.rgv .rgv-pill--ready { color: var(--rgv-green); border-color: rgba(16, 185, 129, .3); }
.rgv .rgv-pill--ready[aria-pressed="true"] { background: rgba(16, 185, 129, .16); border-color: rgba(52, 211, 153, .6); }
.rgv-pill-dot { width: 9px; height: 9px; border-radius: 50%; background: #22c55e; }
.rgv-pill--WATCHLIST .rgv-pill-dot { border-radius: 2px; background: #3b82f6; }
.rgv-pill--NEUTRAL .rgv-pill-dot { border-radius: 2px; background: #e5e7eb; }
.rgv-pill--AVOID .rgv-pill-dot { background: #ef4444; }
.rgv .rgv-search {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0 10px; height: 31px; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); color: var(--rgv-muted);
}
.rgv .rgv-search:focus-within { border-color: rgba(169, 158, 245, .55); }
.rgv .rgv-search input {
  width: 120px; margin: 0; padding: 0; border: 0; background: none; outline: none; color: var(--rgv-text);
  font: 600 12px/1 var(--lp-font); text-transform: uppercase; letter-spacing: .04em;
}
.rgv .rgv-search input::placeholder { color: #8b93a7; }
.rgv-tb-right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.rgv .rgv-chk {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03);
  color: #fff; font: 600 11px/1.3 var(--lp-font); white-space: nowrap; user-select: none;
}
.rgv .rgv-chk:hover { border-color: rgba(169, 158, 245, .3); }
.rgv .rgv-chk input { width: 13px; height: 13px; margin: 0; accent-color: #a99ef5; cursor: pointer; }
.rgv-cols { position: relative; }
.rgv .rgv-cols-btn {
  display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 6px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(169, 158, 245, .3); background: rgba(103, 89, 209, .1); color: #fff; font: 600 12px/1.3 var(--lp-font);
}
.rgv .rgv-cols-btn[aria-expanded="true"] { background: rgba(103, 89, 209, .24); }
.rgv-colpanel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 3; width: 250px; max-width: calc(100vw - 48px);
  padding: 12px 14px; border-radius: 12px; background: #0f1123; border: 1px solid rgba(169, 158, 245, .25);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
}
.rgv-colpanel-h {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px;
  color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.rgv .rgv-colpanel-reset {
  margin: 0; padding: 0; border: 0; background: none; cursor: pointer; color: #a5b4fc;
  font: 600 11px/1.3 var(--lp-font); text-decoration: underline; text-transform: none; letter-spacing: 0;
}
.rgv .rgv-colgroup { margin: 0 0 8px; padding: 0; border: 0; min-width: 0; }
.rgv .rgv-colgroup legend {
  display: block; width: 100%; margin: 0 0 4px; padding: 0 0 4px; border-bottom: 1px solid rgba(169, 158, 245, .12);
  color: #8b93a7; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.rgv .rgv-colitem {
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 3px 0; cursor: pointer;
  color: var(--rgv-dim); font: 500 12px/1.3 var(--lp-font);
}
.rgv .rgv-colitem input { width: 14px; height: 14px; margin: 0; accent-color: #a99ef5; }
.rgv-coldot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ---- table ---- */
.rgv-table-wrap {
  overflow-x: auto; border-radius: 14px; border: 1px solid var(--rgv-line); background: rgba(15, 17, 35, .99);
  scrollbar-width: thin; scrollbar-color: rgba(103, 89, 209, .4) transparent;
}
.rgv .rgv-table { width: 100%; margin: 0; border-collapse: collapse; font-size: 12px; color: var(--rgv-dim); }
.rgv .rgv-table th {
  padding: 10px 12px; background: rgba(22, 24, 42, .95); border-bottom: 1px solid rgba(169, 158, 245, .1);
  color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-align: left; text-transform: uppercase; white-space: nowrap;
}
.rgv .rgv-sort {
  display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
}
.rgv .rgv-sort:hover { color: var(--rgv-p); }
.rgv .rgv-sort.is-on { color: var(--rgv-p2); }
.rgv-sort-arrow { min-width: .7em; }
/* Category-coloured headers and picker dots (COLS[].color on the live page, at full strength here for contrast). */
.rgv-tone--q, .rgv .rgv-table th.rgv-th--q { color: #34d399; }
.rgv-tone--v, .rgv .rgv-table th.rgv-th--v { color: #a5b4fc; }
.rgv-tone--h, .rgv .rgv-table th.rgv-th--h { color: #6ee7b7; }
.rgv-tone--g, .rgv .rgv-table th.rgv-th--g { color: #f59e0b; }
.rgv-tone--ef, .rgv .rgv-table th.rgv-th--ef { color: #fb923c; }
.rgv-tone--m, .rgv .rgv-table th.rgv-th--m { color: #818cf8; }
.rgv-tone--se, .rgv .rgv-table th.rgv-th--se { color: #a78bfa; }
.rgv-tone--rs, .rgv .rgv-table th.rgv-th--rs { color: #38bdf8; }
.rgv-tone--wa, .rgv .rgv-table th.rgv-th--wa { color: #fb923c; }
.rgv-tone--ly, .rgv .rgv-table th.rgv-th--ly { color: #f59e0b; }
.rgv .rgv-table td { padding: 9px 12px; border-bottom: 1px solid rgba(255, 255, 255, .035); white-space: nowrap; vertical-align: middle; }
.rgv-row { cursor: pointer; }
.rgv-row:hover td { background: rgba(169, 158, 245, .06); }
.rgv .rgv-row:focus-visible { outline: 2px solid var(--rgv-p2); outline-offset: -2px; }
.rgv .rgv-row:focus-visible td { background: rgba(169, 158, 245, .12); box-shadow: inset 0 2px 0 var(--rgv-p2), inset 0 -2px 0 var(--rgv-p2); }
.rgv-row.is-press { opacity: .7; }
.rgv-rank { color: #fff; font-size: 11px; font-weight: 600; }
.rgv-sym { color: var(--rgv-p); font-weight: 800; letter-spacing: .02em; }
.rgv-sec { color: #8b93a7; font-size: 11px; }
.rgv .rgv-empty td { padding: 36px 16px; text-align: center; white-space: normal; }
.rgv-empty b { display: block; color: #cbd5e1; font-size: 15px; margin-bottom: 4px; }
.rgv-count { color: var(--rgv-muted); font-size: 11px; text-align: right; }

.rgv-sbar { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.rgv-sbar-t { flex: 1; height: 6px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, .07); }
.rgv-sbar-t i { display: block; height: 100%; border-radius: 3px; background: currentColor; transform-origin: left center; }
.rgv-sbar b { min-width: 36px; text-align: right; font: 800 13px/1 var(--rgv-num); font-variant-numeric: tabular-nums; }
.rgv-c-elite { color: #34d399; } .rgv-c-watch { color: #a5b4fc; } .rgv-c-neutral { color: #94a3b8; } .rgv-c-avoid { color: #f87171; }

.rgv-heat {
  display: inline-flex; justify-content: center; min-width: 46px; padding: 4px 8px; border-radius: 6px;
  font: 700 12px/1.2 var(--rgv-num); font-variant-numeric: tabular-nums;
}
.rgv-heat--hi { background: rgba(16, 185, 129, .2); color: #34d399; }
.rgv-heat--mid { background: rgba(99, 102, 241, .15); color: #a5b4fc; }
.rgv-heat--lo { background: rgba(255, 255, 255, .05); color: #94a3b8; }
.rgv-heat--bad { background: rgba(239, 68, 68, .12); color: #f87171; }
.rgv-wa { font: 700 12px/1.2 var(--rgv-num); }
.rgv-wa--hi { color: #34d399; } .rgv-wa--mid { color: #94a3b8; } .rgv-wa--bad { color: #f87171; }
.rgv-chg { color: #fff; font-weight: 700; }
.rgv-chg.is-up { color: #34d399; } .rgv-chg.is-dn { color: #f87171; }
.rgv-drivers { display: inline-flex; gap: 4px; }
.rgv-driver { padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; background: rgba(169, 158, 245, .12); color: #a99ef5; border: 1px solid rgba(169, 158, 245, .2); }

.rgv-zone, .rgv-entry {
  display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 10px; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
}
.rgv-zone--ELITE { background: rgba(16, 185, 129, .15); color: #34d399; border: 1px solid rgba(16, 185, 129, .3); }
.rgv-zone--WATCHLIST { background: rgba(99, 102, 241, .15); color: #a5b4fc; border: 1px solid rgba(99, 102, 241, .3); }
.rgv-zone--NEUTRAL { background: rgba(148, 163, 184, .1); color: #94a3b8; border: 1px solid rgba(148, 163, 184, .2); }
.rgv-zone--AVOID { background: rgba(239, 68, 68, .12); color: #f87171; border: 1px solid rgba(239, 68, 68, .25); }
.rgv-entry--READY { background: rgba(16, 185, 129, .15); color: #34d399; border: 1px solid rgba(16, 185, 129, .3); }
.rgv-entry--WAIT { background: rgba(251, 191, 36, .12); color: #fbbf24; border: 1px solid rgba(251, 191, 36, .25); }
.rgv-entry--PASS { background: rgba(239, 68, 68, .12); color: #f87171; border: 1px solid rgba(239, 68, 68, .25); }

.rgv .rgv-important {
  padding: 14px 18px; border-radius: 12px; text-align: center;
  background: rgba(169, 158, 245, .06); border: 1px solid rgba(169, 158, 245, .18);
  color: var(--rgv-p2); font-size: 12.5px; font-weight: 600; line-height: 1.6;
}
.rgv-important b { color: #e0e7ff; }

/* ---- ticker view ---- */
.rgv-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 6px 4px; }
.rgv-hero-l { min-width: 0; }
.rgv .rgv-tk-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.rgv-tk-sym {
  font: 900 32px/1 var(--lp-font-title); letter-spacing: -.02em;
  background: linear-gradient(90deg, #e0e7ff, #a99ef5, #38bdf8); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rgv-tk-px { color: #fff; font: 700 24px/1 var(--rgv-num); font-variant-numeric: tabular-nums; }
.rgv .rgv-tk-lbl { margin-top: 6px; color: #fff; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.rgv .rgv-tk-form { display: flex; gap: 10px; margin: 0; }
.rgv .rgv-tk-input {
  width: 110px; margin: 0; padding: 9px 14px; border-radius: 10px; border: 1px solid rgba(169, 158, 245, .3);
  background: rgba(255, 255, 255, .05); color: #e0e7ff; font: 700 14px/1.2 var(--lp-font); letter-spacing: .06em; text-transform: uppercase;
}
.rgv .rgv-tk-input:focus { border-color: #a99ef5; }
.rgv .rgv-tk-btn {
  margin: 0; padding: 9px 20px; border: 0; border-radius: 10px; cursor: pointer;
  background: linear-gradient(135deg, #6759d1, #a99ef5); color: #fff; font: 700 14px/1.2 var(--lp-font);
  box-shadow: 0 4px 16px rgba(103, 89, 209, .45);
}
.rgv .rgv-tk-btn:hover { transform: translateY(-1px); }
.rgv .rgv-tk-btn.is-press { transform: scale(.95); }
.rgv .rgv-tk-note {
  padding: 10px 14px; border-radius: 10px; border: 1px dashed rgba(251, 191, 36, .45); background: rgba(251, 191, 36, .06);
  color: #fde68a; font-size: 12.5px;
}

.rgv-banner {
  position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  padding: 20px 24px; border-radius: 18px; border: 1px solid rgba(100, 116, 139, .28);
  background: linear-gradient(135deg, rgba(100, 116, 139, .14), rgba(100, 116, 139, .05));
}
.rgv-banner--ELITE { background: linear-gradient(135deg, rgba(0, 200, 83, .18), rgba(0, 200, 83, .06)); border-color: rgba(0, 200, 83, .38); --z: #00C853; }
.rgv-banner--WATCHLIST { background: linear-gradient(135deg, rgba(99, 102, 241, .2), rgba(99, 102, 241, .06)); border-color: rgba(99, 102, 241, .4); --z: #a5b4fc; }
.rgv-banner--NEUTRAL { --z: #94a3b8; }
.rgv-banner--AVOID { background: linear-gradient(135deg, rgba(255, 23, 68, .18), rgba(255, 23, 68, .06)); border-color: rgba(255, 23, 68, .38); --z: #FF1744; }
.rgv .rgv-banner-z { color: var(--z, #94a3b8); font: 900 28px/1 var(--lp-font-title); letter-spacing: .01em; }
.rgv-banner-tick { font-size: .8em; }
.rgv .rgv-banner-n { color: var(--z, #94a3b8); font: 900 60px/1 var(--rgv-num); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rgv .rgv-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rgv-tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700;
  background: rgba(255, 255, 255, .05); color: #fff; border: 1px solid rgba(255, 255, 255, .1);
}
.rgv-tag b.is-up { color: #00C853; } .rgv-tag b.is-dn { color: #FF1744; }
.rgv-tag--READY { background: rgba(0, 200, 83, .15); color: #00C853; border-color: rgba(0, 200, 83, .25); }
.rgv-tag--WAIT { background: rgba(255, 152, 0, .15); color: #FF9800; border-color: rgba(255, 152, 0, .25); }
.rgv-tag--PASS { background: rgba(255, 23, 68, .15); color: #FF1744; border-color: rgba(255, 23, 68, .25); }
.rgv-tag--sec { background: rgba(169, 158, 245, .1); color: #a99ef5; border-color: rgba(169, 158, 245, .2); }

/* Score bar: four equal zone bands; the needle rides a full-width rail moved by translateX(%). */
.rgv-gauge {
  overflow: hidden; padding: 16px 20px; border-radius: 14px;
  background: linear-gradient(145deg, rgba(22, 24, 42, .95), rgba(15, 17, 35, .98)); border: 1px solid rgba(169, 158, 245, .1);
}
.rgv .rgv-gauge-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; margin-bottom: 12px; color: #fff; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
.rgv-gauge-h b { color: #a99ef5; font-size: 13px; letter-spacing: .04em; }
.rgv-gauge-t {
  position: relative; height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, #FF1744 0 25%, #757575 25% 50%, #a5b4fc 50% 75%, #00C853 75% 100%);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .4);
}
.rgv-gauge-rail { position: absolute; inset: 0; transform: translateX(0); pointer-events: none; }
.rgv-gauge-needle {
  position: absolute; left: -1.5px; top: -6px; width: 3px; height: 24px; border-radius: 2px; background: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, .8), 0 0 20px rgba(255, 255, 255, .3);
}
.rgv .rgv-gauge-l { display: flex; justify-content: space-between; margin-top: 8px; color: #fff; font-size: 9.5px; letter-spacing: .04em; }

.rgv .rgv-sec-h {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px;
  color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.rgv-sec-h::after { content: ""; flex: 1; min-width: 20px; height: 1px; background: linear-gradient(90deg, rgba(169, 158, 245, .2), transparent); }
.rgv-sec-hint { color: #cbd5e1; font-size: 10px; font-weight: 500; letter-spacing: 0; text-transform: none; }

.rgv-cats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.rgv-cat {
  min-width: 0; padding: 14px 10px; border-radius: 14px; text-align: center;
  background: linear-gradient(145deg, rgba(22, 24, 42, .98), rgba(15, 17, 35, .99));
  border: 1px solid rgba(169, 158, 245, .1); border-top: 2px solid rgba(169, 158, 245, .2);
}
.rgv .rgv-cat-l { color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rgv .rgv-cat-n { margin-top: 8px; font: 900 24px/1 var(--rgv-num); font-variant-numeric: tabular-nums; }
.rgv-cat-t, .rgv-mc-t { display: block; height: 5px; margin-top: 10px; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, .06); }
.rgv-cat-t i, .rgv-mc-t i { display: block; height: 100%; border-radius: 3px; background: currentColor; transform-origin: left center; }
.rgv-mc-t { height: 3px; margin-top: 8px; }

.rgv-mgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.rgv-mc {
  min-width: 0; padding: 11px 9px; border-radius: 11px; text-align: center; cursor: default;
  background: linear-gradient(145deg, rgba(22, 24, 42, .96), rgba(15, 17, 35, .98)); border: 1px solid rgba(169, 158, 245, .08);
  transition: transform .2s var(--lp-ease);
}
.rgv-mc:hover, .rgv-mc.is-tip { transform: translateY(-2px); border-color: rgba(169, 158, 245, .35); }
.rgv .rgv-mc-l { color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.rgv .rgv-mc-r { margin-top: 6px; font: 700 14px/1.2 var(--rgv-num); font-variant-numeric: tabular-nums; }
.rgv .rgv-mc-s { margin-top: 3px; color: #fff; font-size: 10px; }

.rgv-info3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rgv-info4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rgv-info {
  display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 14px 16px; border-radius: 13px;
  background: linear-gradient(145deg, rgba(22, 24, 42, .96), rgba(15, 17, 35, .98)); border: 1px solid rgba(169, 158, 245, .09);
}
.rgv-info--READY, .rgv-info--bull { background: rgba(0, 200, 83, .06); border-color: rgba(0, 200, 83, .22); }
.rgv-info--WAIT { background: rgba(255, 152, 0, .06); border-color: rgba(255, 152, 0, .22); }
.rgv-info--PASS, .rgv-info--bear { background: rgba(255, 23, 68, .06); border-color: rgba(255, 23, 68, .22); }
.rgv-info-ico {
  display: flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 10px;
  background: rgba(169, 158, 245, .1); color: #c4b5fd;
}
.rgv-info--READY .rgv-info-ico, .rgv-info--bull .rgv-info-ico { color: #00C853; }
.rgv-info--WAIT .rgv-info-ico { color: #FF9800; }
.rgv-info--PASS .rgv-info-ico, .rgv-info--bear .rgv-info-ico { color: #FF1744; }
.rgv-info-b { min-width: 0; }
.rgv .rgv-info-n { color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.rgv .rgv-info-n--gap { margin-top: 10px; }
.rgv .rgv-info-v { margin-top: 4px; color: #fff; font: 800 20px/1.15 var(--rgv-num); }
.rgv .rgv-info-v--lg { font-size: 26px; }
.rgv .rgv-info-v--sm { font-size: 15px; color: #cbd5e1; }
.rgv .rgv-info-s { margin-top: 4px; color: #fff; font-size: 11px; }

/* The metric definition tip. Lives inside the page, so it scrolls with its card. */
.rgv-tip {
  position: absolute; left: 0; top: 0; z-index: 4; width: max-content; max-width: min(280px, calc(100% - 16px));
  padding: 8px 11px; border-radius: 9px; pointer-events: none;
  background: #0b0a1a; border: 1px solid rgba(169, 158, 245, .45); box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  color: #e9e6ff; font-size: 12px; line-height: 1.45; opacity: 0; transition: opacity .18s ease;
}
.rgv-tip.is-on { opacity: 1; }

/* Press feedback (autoplay and clicks). */
.rgv .is-press { transform: scale(.95); }
.rgv .rgv-pill, .rgv .rgv-chk, .rgv .rgv-sort, .rgv .rgv-nav-btn, .rgv .rgv-tk-btn { transition: transform .18s var(--lp-ease); }

/* ---- static frame (no JS) ---- */
.rgv-static-tk { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; padding-top: 16px; border-top: 1px dashed rgba(169, 158, 245, .2); }

/* ---- controls, legend, foot ---- */
.rgv-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--lp-sp-3); }
.rgv-play { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lp-sp-2); }
.rgv-auto {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border-radius: var(--lp-r-pill);
  border: 1px solid var(--lp-border); background: var(--lp-surface-2); color: var(--lp-muted); font-size: var(--lp-fs-xs); font-weight: 600;
}
.rgv-auto-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lp-green); }
.rgv-auto[data-mode="hold"] .rgv-auto-dot, .rgv-auto[data-mode="paused"] .rgv-auto-dot { background: var(--lp-amber); }
.rgv-auto-bar { position: relative; width: 56px; height: 3px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--lp-text) 12%, transparent); }
.rgv-auto-bar i { position: absolute; inset: 0; background: var(--lp-primary); transform: scaleX(0); transform-origin: left center; }
.rgv-auto[data-mode="hold"] .rgv-auto-bar i, .rgv-auto[data-mode="paused"] .rgv-auto-bar i { opacity: .45; }
.rgv .rgv-ico-play { display: none; }
.rgv.is-paused .rgv-ico-play { display: inline; }
.rgv.is-paused .rgv-ico-pause { display: none; }
.rgv .rgv-note { margin: 0; color: var(--lp-muted); font-size: var(--lp-fs-sm); line-height: 1.5; max-width: 72ch; }
.rgv .rgv-note .lp-sample { margin-right: 6px; }

.rgv .rgv-legend { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; color: var(--lp-muted); font-size: var(--lp-fs-xs); }
.rgv-legend > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rgv .rgv-legend dt { color: var(--lp-text); font-weight: 700; margin-right: 4px; }
.rgv .rgv-legend dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; line-height: 1.8; }

.rgv-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lp-sp-3); }
.rgv-foot-tier { display: inline-flex; align-items: center; gap: 6px; color: var(--lp-muted); font-size: var(--lp-fs-sm); }

/* ---- responsive ---- */
@media (max-width: 1100px) {
  .rgv-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rgv-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .rgv-mgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rgv-info4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rgv-tb-right { margin-left: 0; }
}
@media (max-width: 720px) {
  .rgv-info3 { grid-template-columns: 1fr; }
  .rgv-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rgv-mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rgv .rgv-banner-n { font-size: 44px; }
  .rgv-tk-sym { font-size: 26px; }
  .rgv-page { padding: 12px; }
  .rgv-bar-tab { display: none; }
}
@media (max-width: 520px) {
  .rgv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rgv-info4 { grid-template-columns: 1fr; }
  .rgv .rgv-search input { width: 96px; }
  .rgv .rgv-tk-form { width: 100%; }
  .rgv .rgv-tk-input { flex: 1; min-width: 0; }
}

/* ---- motion off ---- */
.rgv.rgv-still *, .rgv.rgv-still *::before, .rgv.rgv-still *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .rgv *, .rgv *::before, .rgv *::after { transition: none !important; animation: none !important; }
}