@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #111221;
  --rail: #202132;
  --panel: #242536;
  --panel-2: #292a3c;
  --panel-3: #1d1e2d;
  --line: #393a4e;
  --soft-line: rgba(255,255,255,.055);
  --text: #eef1fb;
  --muted: #9297aa;
  --green: #35c773;
  --green-dark: #1b9f58;
  --red: #e63c63;
  --red-dark: #a42145;
  --cyan: #28c5c8;
  --blue: #2f7ef7;
  --purple: #7c5cff;
  --yellow: #ffc428;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-width: 1080px;
  color: var(--text);
  background: #10111d;
  font-family: Inter, Cairo, system-ui, sans-serif;
  overflow-x: auto;
}
button, input { font: inherit; }
button { color: inherit; }

.app-frame {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 64px minmax(1010px, 1fr);
  direction: ltr;
}

.left-rail {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  background: linear-gradient(180deg, #252638, #1d1e2d);
  border-right: 1px solid #34364a;
  z-index: 50;
}
.rail-logo {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, #43368b, #222442);
  border: 1px solid #6559ad;
  color: #bcb0ff;
  font-weight: 800;
  font-size: 12px;
}
.rail-divider { width: 24px; height: 1px; background: #3a3b50; margin: 4px 0; }
.rail-button {
  width: 39px; height: 39px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 8px;
  color: #969baf;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
}
.rail-button:hover { color: white; background: rgba(255,255,255,.055); }
.rail-button.active {
  color: white;
  background: #6c50ed;
  box-shadow: 0 8px 22px rgba(108,80,237,.28);
}
.rail-spacer { flex: 1; }

.workspace {
  min-width: 0;
  direction: ltr;
  background:
    radial-gradient(circle at 46% -10%, rgba(68,62,123,.15), transparent 32%),
    #161725;
}

.topbar {
  min-height: 76px;
  padding: 10px 18px;
  display: grid;
  grid-template-columns: 255px minmax(500px, 1fr) 48px;
  align-items: center;
  gap: 18px;
  background: #242536;
  border-bottom: 1px solid #3a3b50;
}
.symbol-card {
  height: 57px;
  padding: 7px 10px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #3b3d55;
  border-radius: 8px;
  color: var(--text);
  background: linear-gradient(180deg, #303145, #292a3c);
  cursor: pointer;
  text-align: left;
}
.symbol-card:hover { border-color: #5e5b85; }
.symbol-logo {
  width: 37px; height: 37px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: linear-gradient(145deg, #ef1649, #a70e31);
  font-size: 12px;
  font-weight: 800;
}
.symbol-info { min-width: 0; display: grid; gap: 3px; }
.symbol-title-line { display: flex; align-items: baseline; gap: 12px; }
.symbol-title-line strong { font-size: 16px; }
.symbol-title-line b { color: #eef1fb; font-size: 15px; }
.symbol-meta-line { display: flex; gap: 8px; align-items: center; font-size: 10.5px; }
.stars { color: var(--yellow); letter-spacing: 1px; }
.price-change { padding: 1px 5px; border-radius: 4px; font-weight: 700; }
.price-change.up { color: #35d582; background: rgba(53,213,130,.12); }
.price-change.down { color: #ff5578; background: rgba(255,85,120,.12); }
.search-hint { color: #6f748b; font-size: 8px; }

.clock-cluster {
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(4, minmax(115px, 1fr));
  border: 1px solid #34364c;
  border-radius: 8px;
  overflow: hidden;
  background: #292a3c;
}
.clock-card {
  min-height: 52px;
  padding: 7px 13px;
  display: grid;
  align-content: center;
  gap: 2px;
  border-right: 1px solid #393a4e;
  text-align: center;
}
.clock-card:last-child { border-right: 0; }
.clock-card span { color: #7f8499; font-size: 8px; letter-spacing: .6px; }
.clock-card strong { color: #dddff0; font-size: 12px; font-weight: 600; }
.clock-card small { color: #6f7489; font-size: 8px; }

.top-menu-button {
  width: 40px; height: 40px;
  display: grid; place-content: center; gap: 4px;
  border: 1px solid #3a3c52;
  border-radius: 9px;
  background: #2c2d40;
  cursor: pointer;
}
.top-menu-button i { display: block; width: 17px; height: 2px; border-radius: 4px; background: #aeb3c7; }

.breadcrumb-row {
  min-height: 38px;
  padding: 0 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #858a9e;
  background: #202131;
  border-bottom: 1px solid #35364a;
  font-size: 10.5px;
}
.breadcrumb-row div { display: flex; gap: 9px; align-items: center; }
.breadcrumb-row strong { color: #ced1dd; }

.expiry-section {
  min-height: 122px;
  padding: 10px 15px;
  display: grid;
  grid-template-columns: 55px minmax(0,1fr);
  gap: 8px;
  background: #242536;
  border-bottom: 1px solid #393a4f;
}
.expiry-side-controls {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
}
.sigma-control {
  width: 43px; height: 43px;
  display: grid; place-items: center;
  border-radius: 10px;
  color: #4f3b00;
  background: linear-gradient(145deg, #ffd850, #ffad00);
  font: 800 24px Georgia, serif;
  box-shadow: 0 7px 20px rgba(255,177,0,.2);
}
.mini-switch { position: relative; width: 38px; height: 20px; }
.mini-switch input { opacity: 0; width: 0; height: 0; }
.mini-switch span {
  position: absolute; inset: 0;
  border-radius: 99px;
  background: #44475d;
  cursor: pointer;
}
.mini-switch span::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px; top: 2px; left: 2px;
  border-radius: 50%;
  background: white;
  transition: .2s;
}
.mini-switch input:checked + span { background: #1478ff; }
.mini-switch input:checked + span::after { transform: translateX(18px); }
.expiry-side-controls small { color: #70758b; font-size: 6px; }

.expiry-cards {
  min-width: 0;
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding-bottom: 5px;
  scrollbar-width: thin;
}
.expiry-card {
  flex: 0 0 78px;
  min-height: 89px;
  padding: 7px 5px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 3px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #a2a6b7;
  background: transparent;
  cursor: pointer;
}
.expiry-card:hover { background: rgba(255,255,255,.035); }
.expiry-card.active {
  border: 2px solid #1479ff;
  color: white;
  background: rgba(20,121,255,.08);
  box-shadow: 0 0 16px rgba(20,121,255,.16);
}
.expiry-card .date { font-size: 8px; font-weight: 700; }
.expiry-card .dte { font-size: 8px; color: #c7cad6; }
.expiry-card .code { font-size: 10.5px; font-weight: 800; }
.expiry-card .sign {
  width: 23px; height: 23px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #dffcf2;
  background: #159b76;
  font-size: 12px;
  font-weight: 800;
}
.expiry-card .summary { color: #788094; font-size: 8px; }
.expiry-card.negative .sign { background: #be204b; }
.expiry-card.negative .summary { color: #e24269; }
.expiry-card.positive .summary { color: #31c67b; }
.loading-message { padding: 35px; color: #7e8498; font-size: 10.5px; }

.matrix-card {
  margin: 0;
  background: #252637;
  border-top: 1px solid #34364b;
}
.matrix-toolbar {
  min-height: 44px;
  display: grid;
  grid-template-columns: 120px 1fr 210px;
  align-items: center;
  border-bottom: 1px solid #3a3b4e;
  background: #202131;
}
.zoom-tools { display: flex; gap: 4px; padding-left: 12px; align-items: center; }
.zoom-tools button, .zoom-tools span {
  width: 28px; height: 26px;
  display: grid; place-items: center;
  border: 1px solid #3b3d52;
  border-radius: 5px;
  color: #9ca1b4;
  background: #2a2b3e;
  font-size: 10.5px;
}
.matrix-tabs { justify-self: center; display: flex; height: 44px; }
.matrix-tabs button {
  min-width: 130px;
  border: 0;
  border-left: 1px solid #393a4d;
  color: #8f94a8;
  background: transparent;
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 700;
}
.matrix-tabs button:last-child { border-right: 1px solid #393a4d; }
.matrix-tabs button.active {
  color: white;
  background: linear-gradient(180deg, #2587ff, #1b68d8);
}
.matrix-status { padding-right: 12px; display: flex; justify-content: end; gap: 10px; color: #71768b; font-size: 8px; }

.matrix-column-headings {
  min-height: 34px;
  display: grid;
  grid-template-columns: 8% 21% 25% 21% 8% 17%;
  align-items: center;
  text-align: center;
  color: #8b90a3;
  background: #1e1f2e;
  border-bottom: 1px solid #34364a;
  font-size: 8px;
}
.matrix-column-headings strong { color: #aaaec0; font-size: 8px; }

.matrix-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) 285px;
  min-height: 770px;
}
.matrix-chart-pane {
  position: relative;
  min-width: 0;
  overflow: auto;
  border-right: 1px solid #3b3c50;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    #28293a;
  background-size: 100% 29px, auto;
}
#matrixChart { width: 100%; min-width: 990px; height: auto; display: block; }

.loading-overlay {
  position: absolute; inset: 0;
  z-index: 20;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  color: #d5d8e4;
  background: rgba(25,26,39,.78);
  backdrop-filter: blur(3px);
}
.spinner {
  width: 25px; height: 25px;
  border: 3px solid #575a70;
  border-top-color: #4ca0ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.loading-overlay strong { font-size: 12px; }
.loading-overlay span { color: #858a9e; font-size: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }

.analytics-panel {
  margin-top: -6px;
  padding: 4px 12px 12px;
  display: grid;
  align-content: start;
  gap: 8px;
  background: #242536;
}
.analytics-date {
  min-height: 39px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #3a3b4d;
}
.analytics-date div { display: flex; gap: 7px; align-items: center; }
.analytics-date div span { color: #ffc928; font: 800 20px Georgia,serif; }
.analytics-date strong { font-size: 12px; }
.analytics-date b { padding: 3px 6px; border-radius: 4px; color: #624a00; background: #ffd129; font-size: 8px; }

.totals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #3a3b4e;
}
.totals-grid div { padding: 8px 6px; display: grid; gap: 3px; }
.totals-grid span { color: #7c8195; font-size: 6px; }
.totals-grid strong { color: #d8dbe6; font-size: 10.5px; }
.totals-grid div:nth-child(odd) strong { color: #e04b6c; }
.totals-grid div:nth-child(even) strong { color: #38c478; }

.profile-card, .oi-card, .data-health-card, .details-card {
  border: 1px solid #3a3b50;
  border-radius: 7px;
  background: #292a3c;
  overflow: hidden;
}
.profile-card { padding: 9px; }
.profile-card > header { display: flex; gap: 8px; align-items: center; }
.profile-sign {
  width: 29px; height: 29px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: white;
  background: #149d83;
  font-size: 15px;
}
.profile-card header small { display: block; color: #777d91; font-size: 6px; }
.profile-card header strong { display: block; margin-top: 2px; color: #45d59b; font-size: 8px; }
.profile-card p { margin: 8px 0; color: #c1c4d0; font-size: 8px; line-height: 1.5; }
.profile-levels { display: grid; gap: 3px; }
.profile-level-row {
  display: grid;
  grid-template-columns: 45px 1fr 45px;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.035);
  font-size: 8px;
}
.profile-level-row span:first-child { color: #3ed28d; }
.profile-level-row strong { color: #cbd0dc; text-align: center; }
.profile-level-row span:last-child { color: #35ca7d; text-align: right; }

.oi-card header, .data-health-card header, .details-card header {
  padding: 7px 9px;
  color: #6f91cc;
  background: #252638;
  border-bottom: 1px solid #3a3b4e;
  font-size: 8px;
  font-weight: 800;
}
.oi-card-content {
  padding: 10px;
  display: grid;
  grid-template-columns: 75px 1fr;
  gap: 10px;
  align-items: center;
}
.oi-ratio-gauge {
  width: 67px; height: 67px;
  display: grid; place-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #292a3c 53%, transparent 55%),
    conic-gradient(var(--green) 0 52%, var(--red) 52% 100%);
  text-align: center;
}
.oi-ratio-gauge span { font-size: 15px; }
.oi-ratio-gauge small { color: #858a9d; font-size: 6px; }
.oi-values { display: grid; gap: 10px; font-size: 8px; }
.oi-values span:first-child { color: #5fd88c; }
.oi-values span:last-child { color: #ee5578; }
.oi-values strong { float: right; }

.data-health-card { padding-bottom: 6px; }
.data-health-card p { margin: 8px; color: #9ca1b4; font-size: 8px; }
.health-line { padding: 4px 8px; display: flex; justify-content: space-between; color: #7f8497; font-size: 8px; }
.health-line strong { color: #c3c6d2; }

.details-card { padding-bottom: 6px; }
.details-grid { padding: 10px; display: grid; gap: 7px; }
.detail-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: 8px;
}
.detail-line:last-child { border-bottom: none; }
.detail-line span { color: #8b90a5; }
.detail-line strong { color: #d7dbe8; text-align: right; }

.backdrop {
  position: fixed; inset: 0;
  z-index: 200;
  background: rgba(8,8,15,.72);
  backdrop-filter: blur(3px);
}
.side-menu {
  position: fixed; top: 0; left: 0;
  z-index: 210;
  width: 330px; height: 100vh;
  padding: 16px;
  transform: translateX(-105%);
  transition: transform .22s ease;
  background: #202131;
  border-right: 1px solid #46475e;
  box-shadow: 30px 0 80px rgba(0,0,0,.45);
  direction: rtl;
}
.side-menu.open { transform: translateX(0); }
.side-menu header { min-height: 65px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #393a4e; }
.side-menu header strong, .side-menu header span { display: block; }
.side-menu header span { margin-top: 4px; color: #777c90; font-size: 8px; }
.side-menu header button, #closePriceChart {
  width: 35px; height: 35px;
  border: 1px solid #41435a;
  border-radius: 8px;
  color: #c7cad8;
  background: #2a2b3e;
  cursor: pointer;
  font-size: 20px;
}
.menu-action {
  width: 100%;
  min-height: 67px;
  margin-top: 9px;
  padding: 10px;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: center;
  border: 1px solid #3a3c51;
  border-radius: 9px;
  color: #e4e7f1;
  background: #292a3c;
  cursor: pointer;
  text-align: right;
}
.menu-action > span { width: 38px; height: 38px; display: grid; place-items:center; border-radius: 9px; color: #70b4ff; background: #202d43; font-size: 18px; }
.menu-action strong, .menu-action small { display: block; }
.menu-action small { margin-top: 4px; color: #7c8195; font-size: 8px; }

.search-modal, .price-chart-modal {
  position: fixed; inset: 0;
  z-index: 300;
  display: none;
  place-items: center;
  padding: 22px;
  background: rgba(8,8,15,.84);
  backdrop-filter: blur(5px);
}
.search-modal.open, .price-chart-modal.open { display: grid; }
.search-dialog {
  width: min(470px, 92vw);
  max-height: 78vh;
  display: grid;
  grid-template-rows: auto auto minmax(0,1fr) auto;
  border: 1px solid #484a62;
  border-radius: 8px;
  overflow: hidden;
  background: #292a3c;
  box-shadow: 0 30px 100px rgba(0,0,0,.65);
  direction: ltr;
}
.search-dialog > header {
  min-height: 52px;
  padding: 0 13px;
  display: grid;
  grid-template-columns: 25px 1fr 35px;
  gap: 7px;
  align-items: center;
  border-bottom: 1px solid #3d3e53;
}
.search-dialog input { width: 100%; border: 0; outline: 0; color: #e7eaf4; background: transparent; font-size: 10.5px; }
kbd { padding: 2px 5px; border: 1px solid #44465c; border-radius: 4px; color: #969bad; background: #333448; font: 7px Inter; }
.search-section-title { padding: 8px 13px; color: #777c91; font-size: 8px; border-bottom: 1px solid #38394d; }
.search-results { overflow-y: auto; padding: 4px 0; }
.search-result {
  min-height: 48px;
  padding: 6px 13px;
  display: grid;
  grid-template-columns: 35px 1fr auto;
  gap: 10px;
  align-items: center;
  border: 0;
  border-left: 2px solid transparent;
  color: #d7dae5;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.search-result:hover, .search-result.selected { border-left-color: #7b5fff; background: #393953; }
.search-result-logo { width: 29px; height: 29px; display: grid; place-items:center; border-radius: 7px; color:white; background:#304160; font-size:9px; font-weight:800; }
.search-result strong, .search-result small { display:block; }
.search-result small { margin-top: 3px; color:#777c90; font-size:8px; }
.search-result-price { text-align:right; }
.search-result-price strong { font-size:9px; }
.search-result-price small { font-size:8px; color:#797e92; }
.search-dialog footer { min-height: 34px; padding: 0 12px; display:flex; justify-content:center; gap:16px; align-items:center; color:#777c90; border-top:1px solid #3c3d52; font-size:8px; }

.price-chart-dialog {
  width: min(1450px, 96vw);
  max-height: 94vh;
  overflow: auto;
  border: 1px solid #46485e;
  border-radius: 10px;
  background: #202131;
  box-shadow: 0 30px 100px rgba(0,0,0,.7);
}
.price-chart-header {
  min-height: 68px;
  padding: 10px 15px;
  display: grid;
  grid-template-columns: 1fr auto 40px;
  gap: 15px;
  align-items: center;
  border-bottom: 1px solid #3a3b50;
}
.price-chart-header strong, .price-chart-header span { display:block; }
.price-chart-header strong { font-size:12px; }
.price-chart-header span { margin-top:4px; color:#777c91; font-size:8px; }
.price-intervals { display:flex; gap:4px; }
.price-intervals button { min-width:42px; height:30px; border:1px solid #3d3f54; border-radius:6px; color:#8d92a5; background:#2a2b3d; cursor:pointer; font-size:9px; }
.price-intervals button.active { color:white; background:#246fdc; border-color:#3184f5; }
.chart-info-row { min-height:36px; padding:0 16px; display:flex; gap:15px; align-items:center; color:#7e8397; border-bottom:1px solid #393a4e; font-size:9px; }
.chart-info-row strong { color:#d2d5e0; }
#priceChart { width:100%; min-width:1000px; height:auto; display:block; background:#252637; }

@media (max-width: 1250px) {
  .topbar { grid-template-columns: 240px 1fr 45px; }
  .clock-cluster { grid-template-columns: repeat(2, minmax(115px,1fr)); }
  .matrix-layout { grid-template-columns: minmax(0,1fr) 220px; }
}


/* V7.1 fallback status */
.data-health-card strong.demo-warning {
  color: #ffc857;
}


/* V7.4 — loading overlay must never remain above completed data */
.loading-overlay[hidden],
.loading-overlay:not(.is-visible) {
  display: none !important;
  pointer-events: none !important;
}

.loading-overlay.is-visible {
  display: grid !important;
  pointer-events: auto;
}

.matrix-chart-pane.has-data .loading-overlay {
  display: none !important;
}


/* V8 — GEX Live Chart */
.price-chart-modal {
  padding: 10px;
  background: rgba(4, 7, 13, .94);
}

.gex-live-dialog {
  width: min(1180px, 98vw);
  height: min(920px, 97vh);
  display: grid;
  grid-template-rows: 78px 135px 58px 46px minmax(0, 1fr) 34px;
  overflow: hidden;
  border: 1px solid #26344a;
  border-radius: 12px;
  background: #070d17;
  box-shadow: 0 34px 110px rgba(0,0,0,.76);
}

.gex-live-topbar {
  padding: 10px 22px;
  display: grid;
  grid-template-columns: 45px minmax(330px, 430px) 1fr 42px;
  gap: 15px;
  align-items: center;
  background: linear-gradient(180deg, #171e31, #111827);
  border-bottom: 1px solid #28354a;
}

.live-hamburger {
  width: 40px;
  height: 40px;
  display: grid;
  place-content: center;
  gap: 5px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}
.live-hamburger:hover { background: rgba(255,255,255,.05); }
.live-hamburger i {
  width: 21px;
  height: 2px;
  display: block;
  border-radius: 4px;
  background: #aeb9ca;
}

.gex-live-symbol-card {
  min-height: 55px;
  padding: 7px 12px;
  display: grid;
  grid-template-columns: 45px 1fr;
  gap: 10px;
  align-items: center;
  border: 1px solid #2d3b54;
  border-radius: 11px;
  background: linear-gradient(180deg, #1d263a, #151d2d);
}
.live-symbol-logo {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(145deg, #ec1647, #a50e2f);
  font-size: 12px;
  font-weight: 800;
}
.live-symbol-line {
  display: flex;
  align-items: baseline;
  gap: 16px;
  direction: ltr;
}
.live-symbol-line strong {
  color: #f2f5fb;
  font-size: 20px;
}
.live-symbol-line b {
  color: #dce5f3;
  font-size: 18px;
}
.live-symbol-line span {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 4px;
  color: #ff9c24;
  background: rgba(255,156,36,.08);
  font-size: 15px;
  font-weight: 800;
}
.live-symbol-meta {
  margin-top: 2px;
  display: flex;
  gap: 12px;
  align-items: center;
  direction: ltr;
  font-size: 12px;
}
.live-symbol-meta #liveChartChange {
  padding: 1px 5px;
  border-radius: 4px;
  color: #38d98a;
  background: rgba(56,217,138,.11);
}
.live-symbol-meta #liveChartIv { color: #a6b1c4; }
.live-chart-close {
  grid-column: 4;
  width: 36px;
  height: 36px;
  border: 1px solid #33425b;
  border-radius: 9px;
  color: #c5cede;
  background: #1a2435;
  cursor: pointer;
  font-size: 21px;
}

.live-expiry-strip {
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 64px 55px 1fr;
  gap: 13px;
  align-items: center;
  background: linear-gradient(180deg, #101724, #0a111c);
  border-bottom: 1px solid #243047;
}
.live-expiry-strip::after {
  content: "";
  grid-column: 3;
  height: 5px;
  margin-top: -6px;
  border-radius: 20px;
  background: linear-gradient(90deg, #302b8e, #6335be, #7337aa);
}
.live-sigma {
  width: 55px;
  height: 55px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #5e4300;
  background: linear-gradient(145deg, #ffd64a, #ffac00);
  font: 800 32px Georgia, serif;
  box-shadow: 0 10px 25px rgba(255,180,0,.2);
}
.live-switch {
  position: relative;
  width: 51px;
  height: 27px;
}
.live-switch input { opacity: 0; }
.live-switch span {
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: #28354b;
}
.live-switch span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #fff;
  transition: .2s;
}
.live-switch input:checked + span { background: #1677ff; }
.live-switch input:checked + span::after { transform: translateX(24px); }
.live-expiry-cards {
  min-width: 0;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.live-expiry-card {
  flex: 0 0 82px;
  min-height: 102px;
  padding: 8px 5px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #8e9aaf;
  background: transparent;
  cursor: pointer;
}
.live-expiry-card.active {
  border: 2px solid #1479ff;
  color: #fff;
  background: rgba(20,121,255,.08);
  box-shadow: 0 0 16px rgba(20,121,255,.18);
}
.live-expiry-card .date { font-size: 10.5px; font-weight: 800; }
.live-expiry-card .code { font-size: 12px; font-weight: 800; }
.live-expiry-card .sign {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #e9fff6;
  background: #169b7b;
  font-weight: 800;
}
.live-expiry-card.negative .sign { background: #c51e4b; }
.live-expiry-card small {
  color: #6fe19e;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}

.live-chart-toolbar {
  padding: 8px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #080f19;
  border-bottom: 1px solid #263247;
}
.live-symbol-select {
  min-width: 120px;
  height: 38px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #26364d;
  border-radius: 8px;
  color: #dfe8f5;
  background: #101927;
  cursor: pointer;
}
.purple-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7b62ff;
}
.live-symbol-select small { margin-left: auto; color: #75849a; }
.toolbar-square {
  width: 38px;
  height: 38px;
  border: 1px solid #26364d;
  border-radius: 8px;
  color: #9cabc0;
  background: #101927;
  cursor: pointer;
  font-size: 10.5px;
}
.live-timeframe-select {
  width: 75px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid #26364d;
  border-radius: 8px;
  outline: none;
  color: #e8eef8;
  background: #101927;
  font-weight: 800;
}
.toolbar-spacer { flex: 1; }
.net-volume-title {
  color: #9daabd;
  font-size: 15px;
}
.net-volume-title::first-letter { color: #25c47e; }

.chart-settings-row {
  padding: 6px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #080e17;
  border-bottom: 1px solid #202c40;
}
.chart-settings-box {
  min-height: 34px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #26344b;
  border-radius: 7px;
  background: #101927;
}
.chart-settings-box strong { font-size: 12px; }
.chart-settings-box span {
  min-width: 21px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
}
.setting-green { color: #31ca7d; }
.setting-blue { color: #59a7ff; }
.setting-muted { color: #77859b; }
.chart-settings-box button {
  border: 0;
  color: #a5b0c2;
  background: transparent;
  cursor: pointer;
}
.derived-price-status {
  color: #5ed0b0;
  font-size: 10.5px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.live-chart-stage {
  min-height: 0;
  overflow: auto;
  background: #060c14;
}
#priceChart {
  width: 100%;
  min-width: 1050px;
  height: auto;
  display: block;
  background: #060c14;
}

.live-chart-footer {
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 18px;
  color: #718096;
  background: #080e17;
  border-top: 1px solid #202c40;
  font-size: 10.5px;
}
.live-chart-footer span { direction: ltr; }

@media (max-width: 900px) {
  .gex-live-dialog {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
  .gex-live-topbar {
    grid-template-columns: 38px 1fr 38px;
  }
  .gex-live-symbol-card { grid-column: 2; }
  .live-chart-close { grid-column: 3; }
}


/* V8.1 — interactive chart zoom and pan */
.chart-settings-row {
  gap: 12px;
}

.chart-zoom-controls {
  padding: 4px 7px;
  gap: 5px;
  user-select: none;
}

.chart-zoom-controls > strong {
  margin-right: 4px;
  color: #cbd5e4;
}

.zoom-control-button,
.zoom-auto-button {
  height: 26px;
  min-width: 29px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border: 1px solid #304158 !important;
  border-radius: 5px;
  color: #c7d2e2 !important;
  background: #162235 !important;
  cursor: pointer !important;
  font-size: 15px;
  font-weight: 800;
}

.zoom-control-button:hover,
.zoom-auto-button:hover {
  color: #ffffff !important;
  border-color: #4385d7 !important;
  background: #1b3150 !important;
}

.zoom-control-button.vertical {
  min-width: 38px;
  font-size: 10.5px;
}

.zoom-auto-button {
  min-width: 46px;
  color: #71c0ff !important;
  font-size: 10.5px;
}

.zoom-value {
  min-width: 48px !important;
  color: #58d899 !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px !important;
}

.zoom-divider {
  width: 1px !important;
  min-width: 1px !important;
  height: 19px;
  margin: 0 3px;
  background: #35445b;
}

.chart-zoom-help {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #66778d;
  font-size: 8px;
  direction: ltr;
  white-space: nowrap;
}

#priceChart {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

#priceChart.is-panning {
  cursor: grabbing;
}

#priceChart:focus {
  outline: none;
}

@media (max-width: 1050px) {
  .chart-zoom-help {
    display: none;
  }

  .chart-settings-row {
    overflow-x: auto;
  }
}


/* V8.2 — complete GEX annotation layer */
.header-caret {
  margin-left: -4px;
  color: #e64f6e;
  font-size: 8px;
}

.annotation-settings-button {
  min-height: 28px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #3d435a;
  border-radius: 6px;
  color: #d1d6e1;
  background: #282b3d;
  cursor: pointer;
  font-size: 8px;
}
.annotation-settings-button b,
.annotation-settings-button span {
  min-width: 15px;
  text-align: center;
}
.annotation-settings-button b { color: #35ca7e; }
.annotation-settings-button .settings-green { color: #54a5ff; }
.annotation-settings-button .settings-muted { color: #777d91; }

.column-metric-button {
  border: 0;
  color: #aaaec0;
  background: transparent;
  cursor: pointer;
  font-size: 8px;
  font-weight: 800;
}
.column-metric-button span {
  margin-left: 5px;
  color: #6f7589;
}

.gex-refreshed-badge {
  position: absolute;
  left: 18px;
  bottom: 17px;
  z-index: 8;
  min-width: 165px;
  min-height: 53px;
  padding: 8px 11px;
  display: grid;
  grid-template-columns: 31px 1fr;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  border: 1px solid #30415a;
  border-radius: 9px;
  color: #d4dbe7;
  background: rgba(20, 28, 42, .94);
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  pointer-events: none;
}
.gex-refreshed-badge > span {
  grid-row: 1 / 3;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 2px solid #6758ec;
  border-radius: 50%;
  color: #6fdaac;
  font-size: 15px;
}
.gex-refreshed-badge strong {
  font-size: 10.5px;
}
.gex-refreshed-badge small {
  color: #777f93;
  font-size: 8px;
}

.matrix-annotation-badge {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.28));
}

.matrix-annotation-guide {
  stroke-width: 1.15;
  opacity: .74;
}

.matrix-zone-bracket {
  fill: none;
  stroke-width: 3;
  opacity: .72;
}

.matrix-zone-label {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .5px;
  opacity: .8;
}

.matrix-chart-pane {
  position: relative;
}


/* V8.3 visual replica tuning */
.matrix-chart-pane svg {
  background: radial-gradient(circle at 50% 45%, rgba(21,56,42,.14), transparent 38%),
              #07101b;
}
.matrix-header-row .matrix-column-title {
  letter-spacing: .4px;
}


/* V8.3.2 — expiration values and demo-source clarity */
.expiry-card.demo-expiry {
  border-color: rgba(255, 190, 66, .55);
  background: rgba(115, 78, 18, .16);
}

.expiry-card.demo-expiry .summary {
  color: #ffc857 !important;
  font-size: 6.5px;
}

.expiry-card.demo-expiry .sign {
  box-shadow: 0 0 0 2px rgba(255, 200, 87, .28);
}

.matrix-status #sourceStatus {
  max-width: 270px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* V8.4.1 — compact horizontal spacing */
.matrix-chart-pane {
  --compact-column-gap: 1;
}

#matrixChart {
  overflow: visible;
}


/* V8.4.2 — tighter matrix spacing */
.matrix-column-headings {
  grid-template-columns: 9% 18% 24% 18% 7% 24%;
}

.matrix-chart-pane {
  letter-spacing: -0.05px;
}


/* V8.4.3 — corrected compact spacing */
.matrix-column-headings {
  grid-template-columns: 9% 19% 23% 19% 7% 23%;
}

/* Keep the chart content compact but allow long volume bars to reach the panel. */
#matrixChart {
  overflow: visible;
}


/* ================================================================
   V8.5 — reference-image layout
   ================================================================ */

body {
  min-width: 900px;
  background: #050a12;
}

/* Remove the persistent rail; the hamburger becomes the navigation control. */
.left-rail {
  display: none !important;
}

.app-frame {
  grid-template-columns: minmax(0, 1fr) !important;
}

.workspace {
  width: 100%;
  background: #060c15;
}

/* Header: menu left, symbol card centered, avatar right. */
.topbar {
  position: relative;
  min-height: 96px;
  padding: 9px 26px;
  display: grid;
  grid-template-columns: 54px minmax(360px, 440px) 1fr 54px;
  align-items: center;
  gap: 18px;
  background: linear-gradient(180deg, #171d30, #111827);
  border-bottom: 1px solid #273248;
}

.top-menu-button {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
}

.symbol-card {
  grid-column: 2;
  grid-row: 1;
  min-width: 365px;
  height: 62px;
  padding: 7px 13px;
  border-color: #2f3b52;
  border-radius: 10px;
  background: linear-gradient(180deg, #1b2437, #141d2d);
  box-shadow: 0 5px 20px rgba(0,0,0,.18);
}

.symbol-logo {
  width: 42px;
  height: 42px;
  font-size: 12px;
}

.symbol-title-line strong {
  font-size: 20px;
}

.symbol-title-line b {
  font-size: 19px;
}

.symbol-meta-line {
  position: relative;
  min-height: 18px;
  gap: 10px;
  font-size: 12px;
}

.header-ivr {
  position: absolute;
  right: 1px;
  top: -22px;
  padding: 2px 7px;
  border-radius: 5px;
  color: #ff9c26 !important;
  background: rgba(255,156,38,.09);
  font-size: 15px;
  font-weight: 800;
}

.header-ivx {
  position: absolute;
  right: 14px;
  top: 0;
  color: #a9b3c4;
  font-size: 12px;
  font-weight: 700;
}

.header-caret {
  position: absolute;
  right: 0;
  top: 2px;
  color: #36c985;
}

.search-hint,
.clock-cluster,
.breadcrumb-row {
  display: none !important;
}

.header-avatar-button {
  grid-column: 4;
  grid-row: 1;
  justify-self: end;
  position: relative;
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  border: 1px solid #394762;
  border-radius: 50%;
  color: #c2b8ff;
  background: radial-gradient(circle at 35% 30%, #413b78, #161d31 68%);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.header-avatar-button i {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 10px;
  height: 10px;
  border: 2px solid #121929;
  border-radius: 50%;
  background: #35d18b;
}

/* Expiries run across the full page. */
.expiry-section {
  min-height: 150px;
  padding: 13px 25px 9px;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 14px;
  background: linear-gradient(180deg, #0f1624, #09111c);
  border-bottom: 1px solid #273249;
}

.expiry-side-controls {
  gap: 9px;
}

.sigma-control {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  font-size: 31px;
}

.mini-switch {
  width: 51px;
  height: 27px;
}

.mini-switch span::after {
  width: 21px;
  height: 21px;
  top: 3px;
  left: 3px;
}

.mini-switch input:checked + span::after {
  transform: translateX(24px);
}

.expiry-side-controls small {
  display: none;
}

.expiry-cards {
  gap: 4px;
  padding-bottom: 11px;
  border-bottom: 5px solid #5631a0;
}

.expiry-card {
  flex-basis: 92px;
  min-height: 116px;
  padding-top: 9px;
}

.expiry-card .date {
  font-size: 10.5px;
}

.expiry-card .dte,
.expiry-card .code {
  font-size: 12px;
}

.expiry-card .sign {
  width: 28px;
  height: 28px;
  margin-top: 3px;
}

.expiry-card .summary {
  display: block;
  margin-top: 2px;
  color: #31c67b;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}

/* Matrix is full width; analytics becomes a drawer. */
.matrix-card {
  position: relative;
  background: #060c15;
}

.reference-matrix-toolbar {
  position: relative;
  min-height: 65px;
  padding: 0 27px;
  display: grid;
  grid-template-columns: 230px 1fr 260px;
  align-items: center;
  background: #07101b;
  border-bottom: 1px solid #1d2a3e;
}

.reference-zoom-tools {
  justify-self: start;
  padding: 0;
}

.reference-zoom-tools button,
.reference-zoom-tools span {
  width: 35px;
  height: 33px;
  border-color: #26354a;
  color: #aab6c7;
  background: #101927;
}

.reference-settings-button {
  margin-left: 15px;
  font-size: 16px !important;
}

.reference-counts {
  width: auto !important;
  display: flex !important;
  gap: 8px;
  color: #8f9bae;
  background: transparent !important;
  border: 0 !important;
}

.reference-counts b {
  color: #31cf82;
  font-size: 15px;
}

.reference-counts i,
.reference-counts em {
  font-style: normal;
  font-size: 12px;
}

.reference-gex-title {
  position: absolute;
  left: 54%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 10px;
  color: #eef3fb;
  font-size: 20px;
  pointer-events: none;
}

.reference-gex-title span {
  color: #28c77e;
  font-size: 18px;
}

.reference-volume-title {
  position: absolute;
  right: 86px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  color: #9ca8ba;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
}

.reference-gex-title strong,
.reference-volume-title strong {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .2px;
}

.reference-volume-title > span {
  color: #25bd84;
}

.reference-volume-title small {
  color: #6c7b91;
}

.reference-hidden-controls {
  display: none !important;
}

.reference-column-headings {
  min-height: 30px;
  grid-template-columns: 16% 45% 39%;
  color: #6f7b8e;
  background: #060d16;
  border-bottom: 1px solid #1b283b;
}

.reference-column-headings strong {
  visibility: hidden;
}

.matrix-layout {
  display: block !important;
  min-height: 860px;
}

.matrix-chart-pane {
  width: 100%;
  min-height: 860px;
  overflow: hidden;
  border-right: 0;
  background: #060c15;
}

#matrixChart {
  width: 100%;
  min-width: 0;
  height: auto;
  display: block;
}

.analytics-panel {
  position: fixed;
  top: 95px;
  right: 18px;
  bottom: 18px;
  z-index: 260;
  width: 285px;
  padding: 11px;
  display: grid;
  overflow-y: auto;
  transform: translateX(calc(100% + 35px));
  transition: transform .24s ease;
  border: 1px solid #35445c;
  border-radius: 12px;
  background: #202638;
  box-shadow: 0 24px 75px rgba(0,0,0,.55);
}

.analytics-panel.open {
  transform: translateX(0);
}

.analytics-toggle-button {
  position: fixed;
  right: 28px;
  bottom: 25px;
  z-index: 270;
  width: 57px;
  height: 57px;
  display: grid;
  place-items: center;
  border: 1px solid #33445e;
  border-radius: 14px;
  color: #775dff;
  background: rgba(18,27,43,.96);
  box-shadow: 0 12px 35px rgba(0,0,0,.38);
  cursor: pointer;
  font-size: 25px;
}

.gex-refreshed-badge {
  display: none !important;
}

@media (max-width: 1000px) {
  .topbar {
    grid-template-columns: 48px minmax(300px, 1fr) 48px;
  }

  .symbol-card {
    grid-column: 2;
    min-width: 0;
  }

  .header-avatar-button {
    grid-column: 3;
  }

  .reference-matrix-toolbar {
    grid-template-columns: 190px 1fr 200px;
  }
}


/* ================================================================
   V8.5.1 — reduce white-gap and keep the right panel visible
   ================================================================ */

.matrix-card {
  display: block;
}

.reference-matrix-toolbar {
  padding-right: 448px;
  grid-template-columns: 220px 1fr 210px;
}

.reference-column-headings {
  padding-right: 430px;
  grid-template-columns: 14% 50% 36%;
}

.matrix-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 420px;
  min-height: 860px;
  align-items: stretch;
}

.matrix-chart-pane {
  min-width: 0;
  min-height: 860px;
  overflow: hidden;
}

.analytics-panel {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 20;
  width: 420px !important;
  min-height: 860px;
  padding: 11px;
  overflow-y: auto;
  transform: none !important;
  transition: none !important;
  border: 0;
  border-left: 1px solid #2f3d55;
  border-radius: 0;
  background: #202638;
  box-shadow: none;
}

.analytics-panel.open {
  transform: none !important;
}

.analytics-toggle-button {
  display: none !important;
}

/* make the center/volume header sit above the chart area rather than over the side panel */
.reference-volume-title {
  justify-self: center;
  margin-right: 8px;
}

.reference-gex-title {
  margin-left: 18px;
}

@media (max-width: 1200px) {
  .reference-matrix-toolbar {
    padding-right: 398px;
  }
  .reference-column-headings {
    padding-right: 382px;
  }
  .matrix-layout {
    grid-template-columns: minmax(0, 1fr) 380px;
  }
  .analytics-panel {
    width: 380px !important;
  }
}


/* V8.5.2 — show all derived markers and level connectors */
.matrix-annotation-badge {
  opacity: 1;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.42));
}

.matrix-annotation-guide {
  opacity: .9;
  stroke-width: 1.15;
}

.matrix-zone-bracket {
  stroke-width: 3.2;
  opacity: .92;
}

.data-health-card .health-line strong {
  text-transform: none;
}

.data-health-card .health-line span {
  min-width: 54px;
}


/* V8.5.3 — full-screen live chart and visible expiry numbers */
.price-chart-modal {
  padding: 0 !important;
  place-items: stretch !important;
  background: #050b14 !important;
  backdrop-filter: none !important;
}

.gex-live-dialog {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.live-chart-stage {
  overflow: auto;
}

#priceChart {
  min-width: 1180px;
}

.expiry-card.negative .summary,
.live-expiry-card.negative small {
  color: #f15a7a;
}

.expiry-card.demo-expiry .summary,
.live-expiry-card small {
  white-space: nowrap;
}


/* ========================================================================
   V8.6 — separate pages + All-in-One
   ======================================================================== */
.page-navigation {
  position: sticky;
  top: 0;
  z-index: 120;
  min-height: 48px;
  padding: 6px 18px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  border-bottom: 1px solid #263349;
  background: rgba(7, 14, 24, .96);
  backdrop-filter: blur(9px);
}

.page-nav-button,
.open-all-window-button {
  min-height: 34px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  border: 1px solid #2b3a52;
  border-radius: 7px;
  color: #8e9caf;
  background: #101927;
  cursor: pointer;
  font-size: 10.5px;
}

.page-nav-button span { color: #3bcf91; font-size: 15px; }
.page-nav-button.active {
  color: #fff;
  border-color: #326fd1;
  background: linear-gradient(180deg, #1d62bf, #164a91);
  box-shadow: 0 0 18px rgba(39,112,215,.18);
}
.page-nav-button.active span { color: #fff; }
.page-nav-button.all-view span { color: #ffc857; }
.open-all-window-button {
  margin-left: auto;
  color: #8fc8ff;
}
.open-all-window-button:hover,
.page-nav-button:hover { border-color: #477aaa; color: #fff; }

.dashboard-page[hidden] { display: none !important; }
body[data-dashboard-view="all"] .dashboard-page {
  display: block !important;
  margin-bottom: 18px;
}
body[data-dashboard-view="all"] .advanced-dashboard-page {
  border-top: 3px solid #243550;
}

.advanced-dashboard-page {
  min-height: 760px;
  color: #d9e4f2;
  background: #050b13;
  border-bottom: 1px solid #263349;
}

.advanced-page-header {
  min-height: 72px;
  padding: 10px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid #223149;
  background: linear-gradient(180deg, #101a2a, #09121e);
}
.advanced-page-header small {
  color: #25cda0;
  font-size: 8px;
  letter-spacing: 1px;
}
.advanced-page-header h2 {
  margin: 3px 0 1px;
  color: #eef5ff;
  font-size: 18px;
}
.advanced-page-header p {
  margin: 0;
  color: #718198;
  font-size: 8px;
}
.advanced-page-tools {
  display: flex;
  align-items: center;
  gap: 5px;
}
.advanced-page-tools button,
.advanced-page-tools select,
.advanced-page-tools span {
  min-width: 34px;
  height: 29px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border: 1px solid #30415a;
  border-radius: 5px;
  color: #b7c6d8;
  background: #111c2c;
  font-size: 10.5px;
}
.advanced-page-tools button { cursor: pointer; }
.advanced-page-tools button:hover { color: #fff; border-color: #4b88ce; }
.advanced-page-tools span { min-width: 52px; color: #58da9e; }
.advanced-page-tools select { display: block; min-width: 60px; }

.advanced-svg-stage,
.embedded-chart-stage {
  min-height: 690px;
  overflow: auto;
  background: #050b13;
  cursor: grab;
  touch-action: none;
}
.advanced-svg-stage.is-dragging,
.embedded-chart-stage.is-dragging { cursor: grabbing; }
.advanced-svg-stage svg,
.embedded-chart-stage svg {
  width: 100%;
  min-width: 1050px;
  height: auto;
  display: block;
  transform-origin: 0 0;
  user-select: none;
}

.chart-dashboard-page { min-height: 850px; }
.embedded-chart-stage { min-height: 760px; }
#embeddedPriceChart { background: #060c14; }

/* Matrix supports mouse zoom and drag too. */
.matrix-chart-pane { cursor: grab; touch-action: none; }
.matrix-chart-pane.is-dragging { cursor: grabbing; }

@media (max-width: 850px) {
  .advanced-page-header { align-items: flex-start; flex-direction: column; }
  .open-all-window-button { margin-left: 0; }
}


/* ================================================================
   V8.6.1 — chart-only mouse controls and one-page workspace
   ================================================================ */

/* Old all-mode stacking is disabled. */
body[data-dashboard-view="all"] .dashboard-page {
  display: none !important;
}

/* Matrix, Heatmap and Mover Tape are static. */
.matrix-chart-pane,
#heatmapStage,
#moverStage,
#matrixChart,
#heatmapChart,
#moverTapeChart {
  cursor: default !important;
  touch-action: auto !important;
}

#matrixChart,
#heatmapChart,
#moverTapeChart {
  transform: none !important;
  transform-origin: initial !important;
}

/* Live Chart remains the only mouse-interactive visualization. */
#embeddedPriceChart,
#priceChart,
.embedded-chart-stage,
.live-chart-stage {
  cursor: grab;
  touch-action: none;
}

#embeddedPriceChart:active,
#priceChart:active,
.embedded-chart-stage.is-dragging,
.live-chart-stage.is-dragging {
  cursor: grabbing;
}

.workspace-window-button {
  margin-left: auto;
  border-color: #4d3da4;
  background: rgba(82, 57, 170, .16);
}

body.workspace-mode .page-navigation {
  position: sticky;
  top: 0;
  z-index: 190;
  box-shadow: 0 8px 25px rgba(0,0,0,.28);
}

body.workspace-mode .workspace-window-button {
  display: none;
}

.static-matrix-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Non-chart pages no longer advertise zoom controls. */
#pageHeatmap .advanced-page-header,
#pageMover .advanced-page-header {
  grid-template-columns: 1fr;
}

#pageHeatmap .advanced-page-header p,
#pageMover .advanced-page-header p {
  color: #718096;
}


/* ================================================================
   V8.6.2 — all pages side by side in one browser window
   ================================================================ */

.dashboard-pages-shell {
  display: block;
  width: 100%;
}

/* In the side-by-side workspace all four pages live in one horizontal row. */
body.side-by-side-mode {
  overflow: hidden;
}

body.side-by-side-mode .workspace {
  height: 100vh;
  overflow: hidden;
}

body.side-by-side-mode .topbar,
body.side-by-side-mode .page-navigation,
body.side-by-side-mode .expiry-section {
  position: relative;
  z-index: 150;
}

body.side-by-side-mode .dashboard-pages-shell {
  height: calc(100vh - 286px);
  min-height: 620px;
  padding: 8px;
  display: grid;
  grid-template-columns:
    minmax(1180px, 1180px)
    minmax(1100px, 1100px)
    minmax(1100px, 1100px)
    minmax(1180px, 1180px);
  grid-template-rows: minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-gutter: stable;
  background: #040910;
}

body.side-by-side-mode .dashboard-page,
body.side-by-side-mode .dashboard-page[hidden] {
  display: block !important;
  min-width: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0 !important;
  overflow: auto;
  scroll-snap-align: start;
  border: 1px solid #27364d;
  border-radius: 8px;
  background: #050b13;
  box-shadow: 0 8px 25px rgba(0,0,0,.24);
}

body.side-by-side-mode #pageMatrix {
  grid-column: 1;
  grid-row: 1;
}

body.side-by-side-mode #pageHeatmap {
  grid-column: 2;
  grid-row: 1;
}

body.side-by-side-mode #pageMover {
  grid-column: 3;
  grid-row: 1;
}

body.side-by-side-mode #pageChart {
  grid-column: 4;
  grid-row: 1;
}

/* Each pane scrolls independently; no page is placed under another. */
body.side-by-side-mode .matrix-layout,
body.side-by-side-mode .advanced-dashboard-page,
body.side-by-side-mode .chart-dashboard-page {
  min-height: 100%;
}

body.side-by-side-mode .matrix-chart-pane {
  min-height: 780px;
}

body.side-by-side-mode .advanced-svg-stage,
body.side-by-side-mode .embedded-chart-stage {
  min-height: 720px;
}

/* Keep the mouse interactions limited to Live Chart. */
body.side-by-side-mode #pageMatrix,
body.side-by-side-mode #pageHeatmap,
body.side-by-side-mode #pageMover {
  cursor: default;
}

body.side-by-side-mode #pageChart .embedded-chart-stage,
body.side-by-side-mode #pageChart #embeddedPriceChart {
  cursor: grab;
  touch-action: none;
}

body.side-by-side-mode #pageChart .embedded-chart-stage.is-dragging {
  cursor: grabbing;
}

body.side-by-side-mode .workspace-window-button {
  color: #fff;
  border-color: #8067ff;
  background: linear-gradient(
    180deg,
    rgba(102,78,224,.35),
    rgba(61,43,145,.32)
  );
}

.page-nav-button.workspace-focus {
  color: #fff;
  border-color: #45a0e7;
  box-shadow: 0 0 16px rgba(69,160,231,.2);
}

@media (max-height: 820px) {
  body.side-by-side-mode .dashboard-pages-shell {
    height: calc(100vh - 250px);
  }
}


/* ================================================================
   V8.6.3 — compact four-page workspace + TradingView controls
   ================================================================ */

:root {
  --side-pane-scale: .34;
}

/* Fit all four pages inside the current window. */
body.side-by-side-mode .dashboard-pages-shell {
  height: calc(100vh - 204px);
  min-height: 520px;
  padding: 5px;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 6px;
  overflow-x: hidden;
  overflow-y: hidden;
  scroll-snap-type: none;
}

body.side-by-side-mode .dashboard-page,
body.side-by-side-mode .dashboard-page[hidden] {
  min-width: 0;
  width: auto;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-align: none;
  border-radius: 6px;
}

.dashboard-page-scale {
  transform-origin: top left;
}

/* Compact global controls in four-page mode. */
body.side-by-side-mode .topbar {
  min-height: 54px;
  height: 54px;
  padding-top: 4px;
  padding-bottom: 4px;
}

body.side-by-side-mode .symbol-card {
  transform: scale(.78);
  transform-origin: left center;
}

body.side-by-side-mode .page-navigation {
  min-height: 42px;
  padding: 4px 8px;
}

body.side-by-side-mode .page-nav-button {
  min-height: 34px;
  padding: 3px 8px;
}

body.side-by-side-mode .expiry-section {
  min-height: 98px;
  padding-top: 5px;
  padding-bottom: 4px;
}

body.side-by-side-mode .expiry-card {
  min-height: 72px;
  padding-top: 4px;
}

body.side-by-side-mode .expiry-card .summary {
  display: none;
}

body.side-by-side-mode .sigma-control {
  width: 44px;
  height: 44px;
}

body.side-by-side-mode .matrix-chart-pane,
body.side-by-side-mode .advanced-svg-stage,
body.side-by-side-mode .embedded-chart-stage {
  min-height: 640px;
}

/* TradingView-like chart pointer behavior. */
.live-chart-stage,
.embedded-chart-stage {
  position: relative;
}

.tradingview-chart-stage {
  cursor: crosshair !important;
  overscroll-behavior: contain;
}

.tradingview-chart-stage.is-dragging {
  cursor: grabbing !important;
}

.tradingview-chart-stage.is-price-zone,
.tradingview-chart-stage.is-price-scaling {
  cursor: ns-resize !important;
}

.tradingview-crosshair {
  --crosshair-x: 0px;
  --crosshair-y: 0px;
  position: absolute;
  inset: 0;
  z-index: 40;
  display: none;
  pointer-events: none;
  overflow: hidden;
}

.tradingview-crosshair.visible {
  display: block;
}

.tradingview-crosshair-x,
.tradingview-crosshair-y {
  position: absolute;
  display: block;
}

.tradingview-crosshair-x {
  left: var(--crosshair-x);
  top: 0;
  bottom: 0;
  width: 1px;
  border-left:
    1px dashed rgba(150,164,184,.48);
}

.tradingview-crosshair-y {
  top: var(--crosshair-y);
  left: 0;
  right: 0;
  height: 1px;
  border-top:
    1px dashed rgba(150,164,184,.48);
}

.tradingview-crosshair-price,
.tradingview-crosshair-time {
  position: absolute;
  padding: 3px 6px;
  border: 1px solid #3e4b61;
  border-radius: 3px;
  color: #f2f6fb;
  background: #253044;
  font:
    10px/1.2 ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
  white-space: nowrap;
}

.tradingview-crosshair-price {
  right: 3px;
  top: calc(var(--crosshair-y) - 11px);
}

.tradingview-crosshair-time {
  left: calc(var(--crosshair-x) - 48px);
  bottom: 3px;
}

#priceChart,
#embeddedPriceChart {
  cursor: inherit !important;
  touch-action: none;
  user-select: none;
}

@media (max-height: 820px) {
  body.side-by-side-mode .dashboard-pages-shell {
    height: calc(100vh - 178px);
    min-height: 450px;
  }

  body.side-by-side-mode .expiry-section {
    min-height: 82px;
  }
}


/* V8.6.4 — tighter matrix center gap and larger analytics sidebar */
.analytics-panel {
  font-size: 15px;
}
.analytics-panel .panel-section {
  padding-left: 4px;
  padding-right: 4px;
}
.analytics-panel .profile-level-row {
  gap: 10px;
}
.analytics-panel .oi-stats,
.analytics-panel .data-status {
  font-size: 12px;
}


/* ================================================================
   V8.6.5 — Heatmap and Mover use the GEX Matrix palette
   ================================================================ */

#pageHeatmap,
#pageMover,
#heatmapStage,
#moverStage {
  color: #d7dce6;
  background: #07101b;
}

#pageHeatmap .advanced-page-header,
#pageMover .advanced-page-header {
  min-height: 58px;
  padding: 9px 16px;
  border-bottom: 1px solid #1b283b;
  background: linear-gradient(
    180deg,
    #0d1725,
    #07101b
  );
}

#pageHeatmap .advanced-page-header small,
#pageMover .advanced-page-header small {
  color: #2dd480;
  font-size: 8px;
  letter-spacing: 1px;
}

#pageHeatmap .advanced-page-header h2,
#pageMover .advanced-page-header h2 {
  margin: 3px 0 0;
  color: #eef3fb;
  font-size: 18px;
}

#pageHeatmap .advanced-page-header p,
#pageMover .advanced-page-header p {
  display: none !important;
}

#heatmapChart,
#moverTapeChart {
  background: #07101b;
}

#pageHeatmap .advanced-svg-stage,
#pageMover .advanced-svg-stage {
  border-top: 1px solid #202d41;
}


/* ================================================================
   V8.6.6 — cleaned controls, tighter matrix, larger panel,
   corrected chart placement
   ================================================================ */

.header-avatar-button,
.workspace-window-button,
.expiry-side-controls {
  display: none !important;
}

.topbar {
  grid-template-columns:
    54px minmax(360px, 440px) 1fr !important;
}

.expiry-section {
  grid-template-columns:
    minmax(0, 1fr) !important;
  padding-left: 18px !important;
}

.expiry-cards {
  width: 100%;
}

/* Larger analytics panel and no white scrollbar. */
.analytics-panel {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.analytics-panel::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.analytics-panel .panel-section {
  padding: 13px 14px;
}

.analytics-panel .panel-section h3 {
  font-size: 15px;
}

.analytics-panel .profile-level-row,
.analytics-panel .health-line {
  font-size: 12px;
  line-height: 1.45;
}

/* Put the Live Chart directly under the expiry row. */
#pageChart > .advanced-page-header {
  display: none !important;
}

.chart-dashboard-page {
  min-height: 760px !important;
}

.embedded-chart-stage {
  min-height: 700px !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#embeddedPriceChart {
  display: block;
  margin-top: 0;
}

body[data-dashboard-view="chart"]
.dashboard-pages-shell,
body[data-dashboard-view="chart"]
#pageChart {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* ================================================================
   V8.6.7 — restore expiry cards and complete startup loading
   ================================================================ */

.expiry-section {
  min-height: 118px !important;
  height: auto !important;
  padding: 8px 18px 7px !important;
  display: block !important;
  overflow: hidden;
}

.expiry-cards {
  min-height: 100px;
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
  border-bottom: 4px solid #5631a0;
  scrollbar-width: thin;
}

.expiry-cards::-webkit-scrollbar {
  height: 7px;
}

.expiry-cards::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #4e596b;
}

.expiry-cards .loading-message {
  min-width: 220px;
  display: grid;
  place-items: center;
  color: #8e9caf;
}

body.side-by-side-mode .expiry-section {
  min-height: 91px !important;
}

body.side-by-side-mode .expiry-cards {
  min-height: 78px;
}


/* ================================================================
   V8.6.8 — startup runtime protection
   ================================================================ */

.expiry-cards .loading-message::before {
  content: "";
  width: 13px;
  height: 13px;
  margin-right: 8px;
  display: inline-block;
  vertical-align: -2px;
  border: 2px solid rgba(142,156,175,.28);
  border-top-color: #2dd480;
  border-radius: 50%;
  animation: expiry-loading-spin .8s linear infinite;
}

@keyframes expiry-loading-spin {
  to {
    transform: rotate(360deg);
  }
}


/* ================================================================
   V8.7.1 — smaller page navigation tabs
   ================================================================ */

.page-navigation {
  min-height: 32px !important;
  height: 32px;
  margin-top: 6px;
  padding: 3px 12px !important;
  gap: 4px !important;
  align-items: center;
  overflow-y: hidden;
}

.page-nav-button {
  min-height: 24px !important;
  height: 26px;
  padding: 0 8px !important;
  gap: 4px !important;
  border-radius: 5px !important;
  font-size: 7px !important;
  line-height: 1;
}

.page-nav-button span {
  font-size: 9px !important;
  line-height: 1;
}

.page-nav-button strong {
  font-size: 7px !important;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* Keep the navigation compact in the four-page workspace too. */
body.side-by-side-mode .page-navigation {
  min-height: 27px !important;
  height: 27px;
  margin-top: 3px;
  padding: 2px 7px !important;
  gap: 3px !important;
}

body.side-by-side-mode .page-nav-button {
  min-height: 21px !important;
  height: 21px;
  padding: 0 6px !important;
  gap: 3px !important;
  font-size: 6px !important;
}

body.side-by-side-mode .page-nav-button span {
  font-size: 9px !important;
}

body.side-by-side-mode .page-nav-button strong {
  font-size: 6px !important;
}


/* ================================================================
   V8.7.2 — reference-like matrix palette, shading, and smaller page tabs
   ================================================================ */

:root {
  --matrix-bg-deep: #060d17;
  --matrix-bg-mid: #08111d;
  --matrix-panel: #202638;
  --matrix-border: #26354a;
  --matrix-purple: #6c49ef;
  --matrix-green: #2dd480;
  --matrix-green-soft: #39bfd3;
  --matrix-red: #ef476f;
  --matrix-red-soft: #b13859;
  --matrix-text: #eef3fb;
  --matrix-muted: #8ea1b5;
}

.reference-matrix-toolbar {
  min-height: 58px;
  padding: 0 18px 0 18px;
  grid-template-columns: 182px 1fr 200px;
  background: linear-gradient(180deg, #0a1321 0%, #07101b 72%, #060d17 100%);
  border-bottom: 1px solid #25364c;
  box-shadow: inset 0 -1px 0 rgba(108, 73, 239, .18);
}

.reference-zoom-tools {
  display: flex;
  align-items: center;
  gap: 4px;
}

.reference-settings-button {
  width: 26px !important;
  height: 26px !important;
  margin-left: 0;
  border: 1px solid #33445d !important;
  border-radius: 6px !important;
  color: #c5d0de !important;
  background: linear-gradient(180deg, #101b2b, #0b1524) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  font-size: 15px !important;
}

.reference-counts {
  width: auto !important;
  min-width: 74px;
  height: 26px !important;
  padding: 0 8px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  border: 1px solid #32445d !important;
  border-radius: 6px !important;
  color: #a8b5c6;
  background: linear-gradient(180deg, #0f1928, #0a1321) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.reference-counts b {
  color: #34db8e;
  font-size: 16px;
  text-shadow: 0 0 9px rgba(52,219,142,.24);
}

.reference-counts i,
.reference-counts em {
  color: #c9d3df;
  font-size: 12px;
}

.reference-gex-title,
.reference-volume-title {
  text-transform: none;
  letter-spacing: .3px;
}

.reference-gex-title {
  gap: 8px;
  font-size: 18px;
  margin-left: 8px;
  color: #f3f7fd;
}

.reference-gex-title span,
.reference-volume-title > span {
  color: #22d389;
  text-shadow: 0 0 8px rgba(34,211,137,.22);
}

.reference-volume-title {
  justify-self: center;
  gap: 7px;
  margin-right: 10px;
  color: #dfe7f1;
  font-size: 16px;
}

.reference-volume-title small {
  color: #6f83a0;
  font-size: 10.5px;
}

.reference-column-headings {
  min-height: 26px;
  padding-right: 425px;
  color: #71849a;
  background: linear-gradient(180deg, #08111d, #060d17);
  border-bottom: 1px solid #1e2b3f;
}

.matrix-chart-pane {
  background:
    linear-gradient(180deg, rgba(7,16,27,.98) 0%, rgba(5,12,21,.98) 100%),
    radial-gradient(circle at 18% 50%, rgba(39,151,222,.08), transparent 34%),
    radial-gradient(circle at 70% 72%, rgba(226,61,107,.08), transparent 34%);
}

.analytics-panel {
  width: 430px !important;
  min-height: 860px;
  background: #202638;
}

.analytics-date strong,
.totals-grid strong,
.profile-card strong,
.oi-card header,
.data-health-card header {
  font-size: 15px;
}

.profile-card,
.oi-card,
.data-health-card {
  border-color: #33455f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

/* Smaller page tabs — especially the Chart page tab. */
.page-navigation {
  min-height: 26px !important;
  height: 26px;
  margin-top: 4px;
  padding: 2px 10px !important;
  gap: 3px !important;
}

.page-nav-button {
  min-height: 20px !important;
  height: 20px;
  padding: 0 6px !important;
  gap: 3px !important;
  border-radius: 5px !important;
  font-size: 6px !important;
}

.page-nav-button span {
  font-size: 9px !important;
}

.page-nav-button strong {
  font-size: 6px !important;
  letter-spacing: .1px;
}

.page-nav-button[data-view="chart"] {
  padding-inline: 5px !important;
}

body.side-by-side-mode .page-navigation {
  min-height: 24px !important;
  height: 26px;
  margin-top: 2px;
  padding: 2px 6px !important;
}

body.side-by-side-mode .page-nav-button {
  min-height: 18px !important;
  height: 18px;
  padding: 0 5px !important;
  gap: 2px !important;
  font-size: 5.5px !important;
}

body.side-by-side-mode .page-nav-button span {
  font-size: 7px !important;
}

body.side-by-side-mode .page-nav-button strong {
  font-size: 5.5px !important;
}

/* Apply the matrix palette to Heatmap and Mover Tape pages. */
#pageHeatmap,
#pageMover,
#heatmapStage,
#moverStage,
#heatmapChart,
#moverTapeChart {
  background:
    linear-gradient(180deg, rgba(7,16,27,.98) 0%, rgba(5,12,21,.98) 100%),
    radial-gradient(circle at 18% 50%, rgba(39,151,222,.08), transparent 34%),
    radial-gradient(circle at 70% 72%, rgba(226,61,107,.08), transparent 34%);
}

#pageHeatmap .advanced-page-header,
#pageMover .advanced-page-header {
  min-height: 54px;
  padding: 7px 14px;
  border-bottom: 1px solid #23364c;
  background: linear-gradient(180deg, #0a1321, #07101b 72%, #060d17);
  box-shadow: inset 0 -1px 0 rgba(108, 73, 239, .18);
}

#pageHeatmap .advanced-page-header small,
#pageMover .advanced-page-header small {
  color: #2dd480;
  font-size: 8px;
}

#pageHeatmap .advanced-page-header h2,
#pageMover .advanced-page-header h2 {
  margin-top: 2px;
  color: #eef3fb;
  font-size: 16px;
}

#pageHeatmap .advanced-svg-stage,
#pageMover .advanced-svg-stage {
  border-top: 1px solid #1f2f44;
}


/* ================================================================
   V8.7.5 — professional three-part Heatmap layout
   ================================================================ */

#pageHeatmap .advanced-svg-stage {
  min-height: 820px;
  background: #050c15;
}

#heatmapChart {
  min-width: 1500px;
  width: 100%;
  height: auto;
  background: #050c15;
}

body[data-dashboard-view="heatmap"] #pageHeatmap {
  overflow-x: auto;
  overflow-y: auto;
}

body[data-dashboard-view="heatmap"] .dashboard-pages-shell {
  overflow-x: auto;
}


/* ================================================================
   V8.7.6 — dense reference-style professional Heatmap
   ================================================================ */

#pageHeatmap .advanced-svg-stage {
  min-height: 1040px !important;
  padding: 0 !important;
  background: #040a12 !important;
}

#heatmapChart {
  min-width: 1740px !important;
  width: 100% !important;
  height: auto !important;
  display: block;
  background: #040a12 !important;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

body[data-dashboard-view="heatmap"] #pageHeatmap,
body[data-dashboard-view="heatmap"] .dashboard-pages-shell {
  overflow-x: auto !important;
  overflow-y: auto !important;
}

#pageHeatmap .advanced-page-header {
  min-height: 39px !important;
  padding: 4px 10px !important;
}

#pageHeatmap .advanced-page-header small {
  font-size: 6px !important;
}

#pageHeatmap .advanced-page-header h2 {
  font-size: 12px !important;
  margin-top: 1px !important;
}


/* ================================================================
   V8.7.7 — Live Chart viewport fit
   ================================================================ */

/* Runtime wraps page content, so use a descendant selector. */
#pageChart .advanced-page-header {
  display: none !important;
}

body[data-dashboard-view="chart"] .expiry-section {
  min-height: 92px !important;
  padding-top: 5px !important;
  padding-bottom: 4px !important;
}

body[data-dashboard-view="chart"] .expiry-cards {
  min-height: 76px !important;
  padding-bottom: 5px !important;
}

body[data-dashboard-view="chart"] .expiry-card {
  min-height: 70px !important;
  flex-basis: 76px !important;
  padding-top: 4px !important;
}

body[data-dashboard-view="chart"] .chart-dashboard-page {
  min-height: 0 !important;
  height: calc(100vh - 252px) !important;
  overflow: hidden !important;
}

body[data-dashboard-view="chart"] .embedded-chart-stage {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-dashboard-view="chart"] #embeddedPriceChart {
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  display: block !important;
  margin: 0 !important;
  preserve-aspect-ratio: none;
}

/* Full-screen modal chart uses the same compact landscape ratio. */
.live-chart-stage {
  overflow: hidden !important;
}

#priceChart {
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
}

@media (max-height: 780px) {
  body[data-dashboard-view="chart"] .chart-dashboard-page {
    height: calc(100vh - 225px) !important;
  }

  body[data-dashboard-view="chart"] .expiry-section {
    min-height: 78px !important;
  }

  body[data-dashboard-view="chart"] .expiry-cards {
    min-height: 64px !important;
  }
}


/* ================================================================
   V8.8.7 — rebuilt Matrix layout from the clean V8.8.0 base.
   The chart is full width; analytics is a closed drawer by default.
   ================================================================ */
.reference-matrix-toolbar {
  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
  height: 74px !important;
  min-height: 74px !important;
  padding: 0 !important;
  background: linear-gradient(180deg, #09121f 0%, #07101b 72%, #060d17 100%) !important;
  border-top: 1px solid rgba(69, 91, 124, .35) !important;
  border-bottom: 1px solid #24344a !important;
  box-shadow: inset 0 -1px 0 rgba(104, 74, 238, .13) !important;
}

.reference-zoom-tools {
  position: absolute !important;
  left: 20px !important;
  top: 10px !important;
  width: 205px !important;
  height: 58px !important;
  display: block !important;
}

.reference-settings-button {
  position: absolute !important;
  left: 148px !important;
  top: 0 !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #e9eff8 !important;
  font-size: 27px !important;
}

.reference-counts {
  position: absolute !important;
  left: 118px !important;
  top: 36px !important;
  width: 78px !important;
  min-width: 78px !important;
  height: 26px !important;
  padding: 0 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  border: 1px solid #31435a !important;
  border-radius: 14px !important;
  color: #cfd8e4 !important;
  background: linear-gradient(180deg, #111c2c, #0a1422) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}
.reference-counts b { color: #2fd17f !important; font-size: 17px !important; }
.reference-counts i,
.reference-counts em { color: #cdd7e4 !important; font-size: 13px !important; font-style: normal !important; }

.reference-gex-title {
  position: absolute !important;
  left: 44.5% !important;
  top: 24px !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  color: #f1f5fb !important;
}
.reference-gex-title strong { font-size: 24px !important; font-weight: 800 !important; letter-spacing: .3px !important; }
.reference-gex-title span { color: #1cdd94 !important; font-size: 21px !important; transform: rotate(-14deg) !important; }
.reference-gex-title span::before,
.reference-gex-title span::after,
.reference-volume-title > span::before,
.reference-volume-title > span::after { content: none !important; display: none !important; }

.reference-volume-title {
  position: absolute !important;
  right: 7.5% !important;
  top: 25px !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  border: 0 !important;
  color: #dfe7f1 !important;
  background: transparent !important;
}
.reference-volume-title strong { font-size: 23px !important; font-weight: 700 !important; }
.reference-volume-title > span { color: #1cdd94 !important; font-size: 17px !important; transform: rotate(-16deg) !important; }
.reference-volume-title small { color: #71839c !important; font-size: 12px !important; }

.reference-column-headings { display: none !important; }

.matrix-layout {
  display: block !important;
  min-height: 860px !important;
}
.matrix-chart-pane {
  width: 100% !important;
  min-height: 860px !important;
  overflow: hidden !important;
  border-top: 3px solid #6f49ff !important;
  border-right: 0 !important;
  background: #060c15 !important;
}
#matrixChart {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  display: block !important;
}

.analytics-panel {
  position: fixed !important;
  top: 88px !important;
  right: 16px !important;
  bottom: 18px !important;
  z-index: 260 !important;
  width: 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
  min-height: 0 !important;
  padding: 11px !important;
  overflow-y: auto !important;
  transform: translateX(calc(100% + 42px)) !important;
  transition: transform .24s ease !important;
  border: 1px solid #35445c !important;
  border-radius: 12px !important;
  background: #202638 !important;
  box-shadow: 0 24px 75px rgba(0,0,0,.55) !important;
}
.analytics-panel.open { transform: translateX(0) !important; }
.analytics-toggle-button {
  position: fixed !important;
  right: 28px !important;
  bottom: 25px !important;
  z-index: 270 !important;
  width: 57px !important;
  height: 57px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid #33445e !important;
  border-radius: 14px !important;
  color: #775dff !important;
  background: rgba(18,27,43,.96) !important;
  box-shadow: 0 12px 35px rgba(0,0,0,.38) !important;
  cursor: pointer !important;
  font-size: 25px !important;
}

@media (max-width: 1200px) {
  .reference-gex-title { left: 45% !important; }
  .reference-volume-title { right: 5% !important; }
}


/* V8.8.7 reference top-left controls */
.reference-tool-icon,
.reference-level-chip {
  position: absolute !important;
  top: 9px !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #34465f !important;
  border-radius: 7px !important;
  color: #e3eaf4 !important;
  background: linear-gradient(180deg, #111c2c, #0b1523) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
  font-size: 18px !important;
  line-height: 1 !important;
}
.reference-search-icon { left: 0 !important; }
.reference-level-chip { left: 40px !important; font-size: 20px !important; font-weight: 800 !important; }
.reference-zoom-icon { left: 80px !important; }
.reference-settings-button { left: 142px !important; }
.reference-counts { left: 116px !important; }


/* ================================================================
   V8.8.9 — explicit Matrix zoom minus / plus controls
   ================================================================ */
.reference-matrix-zoom-minus,
.reference-matrix-zoom-plus {
  font-family: Arial, sans-serif !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

.reference-matrix-zoom-minus {
  color: #d4dde9 !important;
}

.reference-matrix-zoom-plus {
  color: #d4dde9 !important;
}

.reference-matrix-zoom-minus:hover,
.reference-matrix-zoom-plus:hover {
  color: #ffffff !important;
  border-color: #4f6688 !important;
  background: linear-gradient(180deg, #152338 0%, #0d1829 100%) !important;
}

.reference-matrix-zoom-minus:disabled,
.reference-matrix-zoom-plus:disabled {
  opacity: .38 !important;
  cursor: default !important;
}

/* Keep the settings gear after the two zoom controls. */
.reference-settings-button {
  left: 134px !important;
}


/* ================================================================
   V8.8.10 — Matrix zoom icon buttons + no mouse wheel zoom
   ================================================================ */
.reference-matrix-zoom-minus { left: 0 !important; }
.reference-level-chip { left: 40px !important; }
.reference-matrix-zoom-plus { left: 80px !important; }
.reference-settings-button { left: 120px !important; }
.reference-counts { left: 0 !important; top: 48px !important; }

.reference-matrix-zoom-minus,
.reference-matrix-zoom-plus {
  padding: 0 !important;
}

.reference-zoom-svg {
  width: 18px;
  height: 18px;
  display: block;
}

.reference-zoom-svg circle,
.reference-zoom-svg path {
  fill: none;
  stroke: #dfe8f4;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.reference-matrix-zoom-minus:hover .reference-zoom-svg circle,
.reference-matrix-zoom-minus:hover .reference-zoom-svg path,
.reference-matrix-zoom-plus:hover .reference-zoom-svg circle,
.reference-matrix-zoom-plus:hover .reference-zoom-svg path {
  stroke: #ffffff;
}

.reference-level-chip {
  font-size: 18px !important;
  font-weight: 800 !important;
}


/* ================================================================
   V8.8.11 — Exact matrix control styling from reference screenshot
   ================================================================ */
.static-matrix-tools {
  position: absolute !important;
  left: 14px !important;
  top: 14px !important;
  width: 190px !important;
  height: 76px !important;
  pointer-events: auto !important;
  z-index: 45 !important;
}

.reference-matrix-zoom-minus,
.reference-matrix-zoom-plus,
.reference-level-chip,
.reference-settings-button {
  position: absolute !important;
  top: 0 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

.reference-matrix-zoom-minus { left: 0 !important; }
.reference-level-chip { left: 42px !important; }
.reference-matrix-zoom-plus { left: 84px !important; }
.reference-settings-button { left: 138px !important; }
.reference-counts { left: 0 !important; top: 44px !important; }

.reference-matrix-zoom-minus,
.reference-matrix-zoom-plus,
.reference-settings-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(9, 18, 31, 0.92) !important;
  border: 1px solid rgba(105, 124, 152, 0.6) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px rgba(0,0,0,0.12) !important;
}

.reference-level-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(10, 18, 30, 0.96) !important;
  border: 1px solid rgba(117, 133, 156, 0.72) !important;
  color: #ffffff !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

.reference-settings-button {
  color: #eef5ff !important;
  font-size: 28px !important;
  line-height: 1 !important;
  padding: 0 !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.reference-settings-button:hover {
  color: #ffffff !important;
  background: rgba(9, 18, 31, 0.35) !important;
  border-color: rgba(105, 124, 152, 0.35) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

.reference-zoom-svg {
  width: 17px !important;
  height: 17px !important;
}

.reference-zoom-svg circle,
.reference-zoom-svg path {
  fill: none;
  stroke: #eef5ff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.reference-matrix-zoom-minus:hover,
.reference-matrix-zoom-plus:hover {
  border-color: rgba(166, 184, 205, 0.85) !important;
  background: rgba(15, 27, 44, 0.98) !important;
}

.reference-counts {
  position: absolute !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 2px 8px !important;
  border-radius: 12px !important;
  background: rgba(10, 17, 28, 0.72) !important;
  border: 1px solid rgba(77, 94, 116, 0.32) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

.reference-counts b { color: #2fdb71 !important; font-size: 23px !important; font-weight: 800 !important; line-height: 1 !important; }
.reference-counts i { color: #d7e3ef !important; font-size: 15px !important; font-weight: 700 !important; font-style: normal !important; line-height: 1 !important; }
.reference-counts em { color: #7f8b99 !important; font-size: 15px !important; font-weight: 700 !important; font-style: normal !important; line-height: 1 !important; }


/* ================================================================
   V8.8.12 — Header proportions and placement matched to reference
   ================================================================ */
#pageMatrix {
  width: calc(100% - 20px) !important;
  margin: 0 10px 16px !important;
  border: 1px solid #1b2a3e !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #060d17 !important;
}

.reference-matrix-toolbar {
  height: 110px !important;
  min-height: 110px !important;
  border-top: 0 !important;
  border-bottom: 1px solid #1b2a3e !important;
  box-shadow: none !important;
  background: linear-gradient(180deg, #08111e 0%, #06101b 100%) !important;
}

.static-matrix-tools {
  left: 22px !important;
  top: 34px !important;
  width: 205px !important;
  height: 68px !important;
}

.reference-matrix-zoom-minus,
.reference-matrix-zoom-plus,
.reference-level-chip {
  top: 0 !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 7px !important;
}

.reference-matrix-zoom-minus { left: 0 !important; }
.reference-level-chip { left: 44px !important; }
.reference-matrix-zoom-plus { left: 88px !important; }
.reference-settings-button {
  left: 142px !important;
  top: -3px !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  font-size: 30px !important;
}
.reference-counts {
  left: 122px !important;
  top: 36px !important;
  height: 30px !important;
  min-width: 92px !important;
  padding: 0 10px !important;
  gap: 10px !important;
  border-radius: 15px !important;
}
.reference-counts b { font-size: 20px !important; }
.reference-counts i,
.reference-counts em { font-size: 15px !important; }

.reference-gex-title {
  left: 47% !important;
  top: 37px !important;
  gap: 10px !important;
}
.reference-gex-title strong { font-size: 27px !important; }
.reference-gex-title span { font-size: 22px !important; }

.reference-volume-title {
  right: 5.4% !important;
  top: 38px !important;
  gap: 9px !important;
}
.reference-volume-title strong { font-size: 24px !important; }
.reference-volume-title > span { font-size: 20px !important; }
.reference-volume-title small { font-size: 12px !important; }

.matrix-chart-pane {
  border-top: 0 !important;
}


/* V8.8.13 — fixes requested after header fit */
.reference-gex-title { left: 46.6% !important; top: 35px !important; }
.reference-volume-title { right: 5.8% !important; top: 35px !important; }
.reference-level-chip { min-width: 46px !important; width: auto !important; padding: 0 8px !important; }
.reference-matrix-toolbar { padding-right: 18px !important; }


/* ================================================================
   V8.8.14 — align NET GEX / Net Volume with their chart columns
   ================================================================ */
.reference-matrix-toolbar {
  position: relative !important;
}

.reference-gex-title,
.reference-volume-title {
  position: absolute !important;
  top: 38px !important;
  right: auto !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  gap: 9px !important;
  line-height: 1 !important;
}

/* GEX bars are in the left-center column. */
.reference-gex-title {
  left: 41.5% !important;
}

/* The right metric bars are in the center-right column, not at the page edge. */
.reference-volume-title {
  left: 77.5% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.reference-gex-title strong {
  font-size: 27px !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
  color: #f2f6fc !important;
}

.reference-volume-title strong {
  font-size: 23px !important;
  font-weight: 700 !important;
  color: #eef3fa !important;
}

.reference-volume-title small {
  margin-left: 1px !important;
  color: #8092aa !important;
  font-size: 12px !important;
}

.metric-title-icon {
  width: 23px !important;
  height: 23px !important;
  flex: 0 0 23px !important;
  overflow: visible !important;
}

.metric-title-icon path {
  fill: none !important;
  stroke: #19d99a !important;
  stroke-width: 2.1 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 0 5px rgba(25, 217, 154, .16));
}

@media (max-width: 1250px) {
  .reference-gex-title { left: 42% !important; }
  .reference-volume-title { left: 77% !important; }
  .reference-gex-title strong { font-size: 24px !important; }
  .reference-volume-title strong { font-size: 23px !important; }
  .metric-title-icon { width: 20px !important; height: 20px !important; flex-basis: 20px !important; }
}

/* ================================================================
   V8.8.15 — title positions measured from the supplied reference image
   Reference image: NET GEX ≈ 44%, Net Volume ≈ 84%
   ================================================================ */
.reference-gex-title {
  left: 44% !important;
  top: 38px !important;
  transform: translateX(-50%) !important;
}

.reference-volume-title {
  left: 84% !important;
  top: 38px !important;
  transform: translateX(-50%) !important;
}

.reference-gex-title strong {
  font-size: 25px !important;
}

.reference-volume-title strong {
  font-size: 22px !important;
}


/* ================================================================
   V8.8.16 — final reference-matched toolbar positions
   ================================================================ */
.reference-matrix-toolbar {
  position: relative !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.reference-gex-title,
.reference-volume-title {
  position: absolute !important;
  top: 36px !important;
  margin: 0 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  line-height: 1 !important;
}

.reference-gex-title {
  left: 43.8% !important;
  transform: translateX(-50%) !important;
}

.reference-volume-title {
  left: 89.0% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.reference-gex-title strong {
  font-size: 24px !important;
  font-weight: 800 !important;
}

.reference-volume-title strong {
  font-size: 20px !important;
  font-weight: 700 !important;
}

.reference-volume-title small {
  font-size: 12px !important;
}

/* ================================================================
   V8.8.16 — live chart matched to supplied reference
   ================================================================ */
body[data-dashboard-view="chart"] .breadcrumb-row {
  display: none !important;
}

.chart-reference-page {
  min-height: 820px !important;
  overflow: hidden;
  border-top: 1px solid #1d2b40;
  background: #050b13 !important;
}

.chart-reference-toolbar {
  min-height: 58px;
  padding: 7px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #213047;
  background: linear-gradient(180deg, #0c1523, #07101a);
}

.chart-reference-toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chart-symbol-picker {
  min-width: 190px;
  height: 42px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #26364d;
  border-radius: 6px;
  color: #dce7f5;
  background: #0b1421;
  cursor: pointer;
}

.chart-symbol-picker strong {
  font-size: 18px;
  letter-spacing: .2px;
}

.chart-symbol-picker small {
  margin-right: 5px;
  color: #8392a7;
}

.chart-symbol-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #795cff;
  box-shadow: 0 0 10px rgba(121,92,255,.55);
}

.chart-tv-badge {
  width: 27px;
  height: 27px;
  margin-left: auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #f0f4fb;
  background: #05080d;
  font-size: 8px;
  font-weight: 800;
}

.chart-copy-icon {
  color: #9675ff;
  font-size: 18px;
}

.chart-timeframe-select {
  min-width: 82px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid #26364d;
  border-radius: 6px;
  color: #e7edf7;
  background: #0b1421;
  font-size: 15px;
  font-weight: 700;
}

.chart-reference-metric {
  height: 42px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  color: #eef4fc;
  background: transparent;
  cursor: pointer;
}

.chart-reference-metric svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #22d69b;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart-reference-metric strong {
  font-size: 18px;
  font-weight: 700;
}

.chart-reference-metric small {
  color: #7d8ca1;
}

.chart-reference-settings {
  min-height: 52px;
  padding: 8px 18px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid #172438;
  background: #060d16;
}

.chart-settings-pill {
  min-height: 38px;
  padding: 0 8px 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #2d3d53;
  border-radius: 6px;
  color: #e6edf7;
  background: #080e17;
  box-shadow: 0 7px 18px rgba(0,0,0,.22);
}

.chart-settings-pill strong {
  margin-right: 4px;
  font-size: 15px;
}

.chart-settings-pill b {
  font-size: 15px;
}

.chart-settings-pill .setting-green { color: #25c982; }
.chart-settings-pill .setting-blue { color: #4ea6ff; }
.chart-settings-pill .setting-muted { color: #8b97a9; }

.chart-settings-pill button {
  width: 31px;
  height: 31px;
  margin-left: 2px;
  border: 0;
  color: #dfe8f5;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
}

.chart-reference-zoom {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.chart-reference-zoom button,
.chart-reference-zoom span {
  min-width: 34px;
  height: 31px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border: 1px solid #2c3b51;
  border-radius: 5px;
  color: #b7c5d7;
  background: #0d1725;
  font-size: 12px;
}

.chart-reference-zoom button {
  cursor: pointer;
  font-size: 16px;
}

.chart-reference-stage {
  min-height: 690px !important;
  height: calc(100vh - 330px);
  overflow: hidden !important;
  border-top: 0;
  background: #050b13;
}

.chart-reference-stage svg {
  width: 100% !important;
  min-width: 1040px !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
  background: #060c14;
}

@media (max-width: 1000px) {
  .chart-symbol-picker { min-width: 145px; }
  .chart-reference-stage { height: 690px; }
  .chart-reference-metric strong { font-size: 15px; }
}


/* ================================================================
   V8.8.18 — Market details replaces the old DATA STATUS card
   ================================================================ */
.market-details-card {
  border: 1px solid #3a3b50;
  border-radius: 7px;
  background: #292a3c;
  overflow: hidden;
}

.market-details-card > header {
  padding: 8px 10px;
  color: #78a2e1;
  background: #252638;
  border-bottom: 1px solid #3a3b4e;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .25px;
}

.market-detail-section {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.market-detail-section:last-of-type {
  border-bottom: 0;
}

.market-detail-section h4 {
  margin: 0 0 8px;
  color: #aeb8cc;
  font-size: 8px;
  font-weight: 800;
}

.market-detail-row {
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 8px;
}

.market-detail-row span {
  font-weight: 800;
}

.market-detail-row strong {
  color: #d9deea;
  text-align: right;
  font-size: 8px;
}

.market-detail-row.call-row span { color: #45d590; }
.market-detail-row.put-row span { color: #f05b7c; }

.market-level-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.market-level-grid div {
  padding: 6px 3px;
  display: grid;
  gap: 3px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 5px;
  background: rgba(14,20,32,.24);
  text-align: center;
}

.market-level-grid span {
  color: #7f8ca2;
  font-size: 6px;
  font-weight: 800;
}

.market-level-grid div:nth-child(1) strong { color: #35d487; }
.market-level-grid div:nth-child(2) strong { color: #3bc6dc; }
.market-level-grid div:nth-child(3) strong { color: #ef5577; }
.market-level-grid strong { font-size: 8px; }

.market-atm-strike {
  margin-top: 5px;
  padding-top: 5px;
  display: flex;
  justify-content: space-between;
  color: #7f8ba0;
  border-top: 1px solid rgba(255,255,255,.05);
  font-size: 8px;
}

.market-atm-strike strong { color: #d9deea; }

.market-breakdown-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.market-breakdown-grid div {
  min-height: 39px;
  padding: 6px;
  display: grid;
  align-content: center;
  gap: 4px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 5px;
  background: rgba(14,20,32,.24);
}

.market-breakdown-grid span {
  color: #7f8ba0;
  font-size: 6px;
}

.market-breakdown-grid strong {
  color: #d9deea;
  font-size: 8px;
}

.market-breakdown-grid .positive-value { color: #35d487; }
.market-breakdown-grid .negative-value { color: #ef5577; }


/* V8.8.20 — split Detailed OI palette */
.reference-volume-title[data-metric="oi"] .metric-title-icon path {
  stroke: #42d69a !important;
}
.reference-volume-title[data-metric="oi"] strong {
  color: #f1f5fb !important;
}


/* ================================================================
   V8.8.30 — live Matrix counters
   Positive / Neutral / Negative and Call / Balanced / Put
   ================================================================ */
.reference-counts b { color: #2fdb71 !important; }
.reference-counts i { color: #d7e3ef !important; }
.reference-counts em { color: #ef5678 !important; }

/* V8.8.32 — dynamic chart settings counters */
.setting-red { color: #ef5678; }

/* ================================================================
   V8.8.47 — GEX Live Table reference layout
   Visual-only. No market-data or analytics formulas changed.
   ================================================================ */
body[data-dashboard-view="matrix"] .matrix-layout {
  display: block !important;
  min-height: 910px !important;
}

body[data-dashboard-view="matrix"] .matrix-chart-pane {
  width: 100% !important;
  min-height: 910px !important;
  border-right: 0 !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, #07111d 0%, #050c15 100%) !important;
}

body[data-dashboard-view="matrix"] .analytics-panel {
  display: none !important;
}

body[data-dashboard-view="matrix"] .reference-matrix-toolbar {
  min-height: 54px !important;
  padding: 0 18px !important;
  grid-template-columns: 200px 1fr 220px !important;
  background: #07101b !important;
  border-bottom: 1px solid #223148 !important;
}

body[data-dashboard-view="matrix"] .reference-gex-title {
  left: 50% !important;
  margin-left: 0 !important;
  font-size: 21px !important;
}

body[data-dashboard-view="matrix"] .reference-volume-title {
  right: 32px !important;
  margin-right: 0 !important;
  font-size: 16px !important;
}

body[data-dashboard-view="matrix"] .reference-counts {
  min-width: 78px !important;
  padding: 0 7px !important;
  border: 0 !important;
  background: transparent !important;
}

body[data-dashboard-view="matrix"] .matrix-column-headings {
  display: none !important;
}

body[data-dashboard-view="matrix"] #matrixChart {
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  max-height: none !important;
}

body[data-dashboard-view="matrix"] .expiry-section {
  padding-bottom: 7px !important;
  border-bottom: 3px solid #6b3eea !important;
}

body[data-dashboard-view="matrix"] .expiry-cards {
  gap: 7px !important;
}

body[data-dashboard-view="matrix"] .expiry-card {
  min-width: 94px !important;
  border-radius: 7px !important;
}

body[data-dashboard-view="matrix"] .expiry-card.active {
  border-color: #168bf4 !important;
  box-shadow: 0 0 0 1px rgba(22,139,244,.30), inset 0 0 18px rgba(22,139,244,.08) !important;
}

body[data-dashboard-view="matrix"] .gex-refreshed-badge {
  display: none !important;
}


/* ================================================================
   Reference Matrix Exact — match the supplied third reference image
   Matrix only; Live Chart and analytics calculations are unchanged.
   ================================================================ */
body[data-dashboard-view="matrix"] .matrix-chart-pane {
  background: #07101b !important;
}
body[data-dashboard-view="matrix"] .reference-matrix-toolbar {
  grid-template-columns: 205px 1fr 245px !important;
}
body[data-dashboard-view="matrix"] .reference-gex-title {
  left: 50% !important;
  font-size: 18px !important;
}
body[data-dashboard-view="matrix"] .reference-volume-title {
  right: 56px !important;
  font-size: 15px !important;
}


/* ================================================================
   Reference Pro Phase 1
   Adds the reference table's core columns and pins the existing
   analytics panel on the right. Market-data formulas are unchanged.
   ================================================================ */
body[data-dashboard-view="live-table"] .matrix-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 304px !important;
  gap: 10px !important;
  min-height: 900px !important;
  align-items: start !important;
}
body[data-dashboard-view="live-table"] .matrix-chart-pane {
  min-width: 0 !important;
  width: 100% !important;
  min-height: 900px !important;
  overflow: hidden !important;
  border-right: 1px solid #1d2b3f !important;
}
body[data-dashboard-view="live-table"] #matrixChart {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
}
body[data-dashboard-view="live-table"] .analytics-panel {
  display: block !important;
  position: sticky !important;
  top: 8px !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 304px !important;
  min-width: 304px !important;
  max-width: 304px !important;
  height: calc(100vh - 112px) !important;
  min-height: 650px !important;
  overflow-y: auto !important;
  padding: 10px !important;
  border: 1px solid #24344d !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg,#101827 0%,#0b1320 100%) !important;
  box-shadow: none !important;
  z-index: 4 !important;
}
body[data-dashboard-view="live-table"] .analytics-toggle-button { display: none !important; }
body[data-dashboard-view="live-table"] .analytics-panel .analytics-date,
body[data-dashboard-view="live-table"] .analytics-panel .totals-grid,
body[data-dashboard-view="live-table"] .analytics-panel .profile-card,
body[data-dashboard-view="live-table"] .analytics-panel .oi-card,
body[data-dashboard-view="live-table"] .analytics-panel .market-details-card,
body[data-dashboard-view="live-table"] .analytics-panel .details-card {
  background: rgba(15,24,39,.92) !important;
  border-color: #25354d !important;
}
body[data-dashboard-view="live-table"] .analytics-panel .totals-grid {
  grid-template-columns: 1fr 1fr !important;
}
body[data-dashboard-view="live-table"] .reference-gex-title,
body[data-dashboard-view="live-table"] .reference-volume-title {
  opacity: .22 !important;
  pointer-events: auto !important;
}
body[data-dashboard-view="live-table"] .reference-matrix-toolbar {
  grid-template-columns: 210px 1fr 210px !important;
}
@media (max-width: 1200px) {
  body[data-dashboard-view="live-table"] .matrix-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body[data-dashboard-view="live-table"] .analytics-panel {
    display: none !important;
  }
}


/* V8.8.59/60 — separate GEX Matrix and GEX Live Table tabs */
.page-nav-button[data-view="live-table"] strong { white-space: nowrap; }
body[data-dashboard-view="live-table"] .matrix-card { display: block; }

/* ================================================================
   V8.8.71 — Yahoo Reference Chart Pro
   Reference-inspired chart workspace using ABU NADER data/branding.
   ================================================================ */
.chart-pro-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 286px;
  min-height: 690px;
  background: #050b13;
  border-top: 1px solid #182538;
}

.chart-pro-main {
  min-width: 0;
  border-right: 1px solid #223149;
  background: #050b13;
}

.chart-pro-subtoolbar {
  min-height: 44px;
  padding: 5px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #1b293d;
  background: #07101a;
}

.chart-pro-chip,
.chart-pro-level-pill,
.chart-pro-status {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #293950;
  border-radius: 5px;
  color: #dfe8f4;
  background: #0a1421;
}

.chart-pro-chip {
  padding: 0 10px;
  cursor: pointer;
}

.chart-pro-chip .chip-icon {
  color: #22d69b;
  font-size: 12px;
}

.chart-pro-chip strong { font-size: 12px; }
.chart-pro-chip small { color: #75849a; }

.chart-pro-level-pill {
  padding: 0 9px;
  gap: 9px;
}

.chart-pro-level-pill > span {
  color: #aeb9c9;
  font-size: 10.5px;
  font-weight: 700;
}

.chart-pro-level-pill b {
  font-size: 10.5px;
  font-weight: 800;
}

.chart-pro-level-pill .setting-green { color: #34d28e; }
.chart-pro-level-pill .setting-cyan { color: #38c9df; }
.chart-pro-level-pill .setting-yellow { color: #f5b942; }
.chart-pro-level-pill .setting-red { color: #f05173; }

.chart-pro-status {
  margin-left: 4px;
  padding: 0 10px;
  color: #88a0b8;
  font-size: 10.5px;
}

.chart-pro-status {
  background: linear-gradient(90deg, rgba(37,210,138,.10) 0%, rgba(240,81,115,.10) 100%);
  border-color: #31445e;
}

.chart-pro-status strong {
  color: #dce8f5;
}



 .chart-ohlc-bar {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
  border: none;
  border-radius: 0;
  color: #2fd3cf;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  flex: 1 1 auto;
  min-width: 0;
}

.chart-ohlc-bar span {
  color: #2fd3cf;
}

.chart-ohlc-bar .chart-ohlc-value {
  color: #2fd3cf;
}

.chart-ohlc-bar .chart-ohlc-delta,
.chart-ohlc-bar .chart-ohlc-positive {
  color: #28c980;
}

.chart-ohlc-bar .chart-ohlc-negative {
  color: #ef4a67;
}

.chart-ohlc-bar .chart-ohlc-neutral {
  color: #9db0c7;
}

.chart-pro-status-live {
  color: #dce8f5 !important;
  font-weight: 800;
  letter-spacing: .02em;
  background: linear-gradient(90deg, #35d58f 0%, #f05173 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #25d28a;
  box-shadow: 0 0 8px rgba(37,210,138,.65);
}

.chart-pro-layout .chart-reference-stage {
  height: calc(100vh - 370px);
  min-height: 650px !important;
}

.chart-pro-sidebar {
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(180deg, #08111d, #050b13);
  overflow-y: auto;
  max-height: calc(100vh - 270px);
}

.chart-pro-card {
  border: 1px solid #27364d;
  border-radius: 7px;
  overflow: hidden;
  background: #0a1421;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}

.chart-pro-card > header {
  min-height: 34px;
  padding: 7px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid #1f2d41;
  color: #8fa0b6;
  background: #0d1725;
}

.chart-pro-card > header strong {
  color: #aebbd0;
  font-size: 10.5px;
  letter-spacing: .55px;
}

.chart-pro-badge {
  padding: 3px 6px;
  border-radius: 4px;
  color: #221a00;
  background: #ffc92f;
  font-size: 8px;
  font-weight: 900;
}

.chart-pro-level-grid,
.chart-pro-two-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #1b293c;
}

.chart-pro-two-col { grid-template-columns: repeat(2, 1fr); }

.chart-pro-level-grid > div,
.chart-pro-two-col > div {
  min-height: 58px;
  padding: 9px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #09131f;
}

.chart-pro-level-grid small,
.chart-pro-two-col small {
  margin-bottom: 5px;
  color: #73869c;
  font-size: 8px;
  font-weight: 800;
}

.chart-pro-level-grid b,
.chart-pro-two-col b {
  color: #edf3fa;
  font-size: 12px;
  line-height: 1.15;
}

.chart-pro-level-grid > div:nth-child(1) b { color: #2dd58c; }
.chart-pro-level-grid > div:nth-child(2) b { color: #43cbe2; }
.chart-pro-level-grid > div:nth-child(3) b { color: #f05272; }

.chart-pro-two-col.compact > div { min-height: 52px; }

.chart-pro-profile {
  min-height: 72px;
  padding: 11px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.profile-dot {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #b92f51;
  box-shadow: 0 0 0 5px rgba(185,47,81,.12);
}

.chart-pro-profile b {
  display: block;
  margin-bottom: 4px;
  color: #ecf2f9;
  font-size: 12px;
}

.chart-pro-profile small {
  display: block;
  color: #8090a5;
  font-size: 8px;
  line-height: 1.35;
}

.chart-pro-muted {
  color: #66778d;
  font-size: 8px;
}

.chart-pro-em-row {
  padding: 13px 10px 7px;
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: center;
  gap: 8px;
}

.chart-pro-em-row b {
  color: #dbe5f2;
  font-size: 10.5px;
  text-align: center;
}

.chart-pro-em-track {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7547cf, #edc14d, #7547cf);
}

.chart-pro-em-track::before,
.chart-pro-em-track::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 1px;
  height: 14px;
  background: rgba(228,235,246,.65);
}
.chart-pro-em-track::before { left: 0; }
.chart-pro-em-track::after { right: 0; }

.chart-pro-em-track span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #f4d06a;
  box-shadow: 0 0 8px rgba(244,208,106,.65);
}

.chart-pro-footnote {
  display: block;
  padding: 0 10px 10px;
  color: #7b8aa0;
  font-size: 8px;
  text-align: center;
}

@media (max-width: 1180px) {
  .chart-pro-layout { grid-template-columns: minmax(0, 1fr) 235px; }
  .chart-pro-level-pill > span { display: none; }
  .chart-pro-sidebar { padding: 6px; }
}

@media (max-width: 920px) {
  .chart-pro-layout { grid-template-columns: 1fr; }
  .chart-pro-sidebar {
    max-height: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid #24334a;
  }
  .chart-pro-layout .chart-reference-stage { height: 640px; }
}

/* ================================================================
   V8.8.72 — Yahoo Reference Sidebar Exact
   Right analytics rail closely follows the supplied reference panel.
   Data stays sourced from the existing Yahoo snapshot; visual only.
   ================================================================ */
.chart-pro-layout {
  grid-template-columns: minmax(0, 1fr) 382px !important;
}
.chart-pro-sidebar-exact {
  width: 382px;
  padding: 10px 10px 16px !important;
  gap: 10px !important;
  background:
    radial-gradient(circle at 40% 5%, rgba(54,73,126,.13), transparent 30%),
    linear-gradient(180deg, #07101d 0%, #050b14 100%) !important;
  border-left: 1px solid #1e2d43;
  scrollbar-width: thin;
}
.chart-pro-sidebar-exact .chart-pro-card {
  border: 1px solid #24354e !important;
  border-radius: 11px !important;
  background: linear-gradient(180deg, #0a1422 0%, #07111d 100%) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.018), 0 8px 22px rgba(0,0,0,.2) !important;
}
.chart-pro-sidebar-exact .chart-pro-card > header,
.chart-pro-sidebar-exact .chart-pro-section-header {
  background: rgba(11,21,35,.92) !important;
  border-bottom: 1px solid #1e2d43 !important;
}
.chart-pro-date-header {
  min-height: 58px !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto 18px;
  gap: 10px !important;
  align-items: center !important;
  padding: 10px 12px !important;
}
.chart-pro-date-header > strong {
  color: #edf3ff !important;
  font-size: 15px !important;
  letter-spacing: 1.2px !important;
  white-space: nowrap;
}
.chart-pro-badge {
  width: auto !important;
  min-width: 0 !important;
  justify-self: end !important;
  padding: 4px 9px !important;
  border-radius: 6px !important;
  background: #ffc32f !important;
  color: #1a1606 !important;
  font-size: 9px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  box-shadow: inset 0 -1px rgba(116,72,0,.28), 0 0 0 1px rgba(159,101,0,.24);
}
.chart-pro-chevrons {
  color: #8597ff;
  font-size: 10.5px;
  line-height: 7px;
  text-align: center;
  opacity: .9;
}
.chart-pro-section-header {
  min-height: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 10px 12px !important;
}
.chart-pro-section-header .chart-pro-chevrons { margin-left: auto; }
.chart-pro-section-header strong {
  color: #bdc8dd !important;
  font-size: 12px !important;
  letter-spacing: 1.2px !important;
}
.chart-pro-section-icon { color: #8079ff; font-size: 18px; }
.chart-pro-exposure-grid { background: transparent !important; padding: 8px; gap: 10px !important; }
.chart-pro-metric-card {
  min-height: 122px !important;
  padding: 14px 12px !important;
  border: 1px solid #22334b;
  border-radius: 8px;
  background: linear-gradient(180deg, #091525, #08111d) !important;
  justify-content: flex-start !important;
}
.chart-pro-metric-card small {
  margin: 0 0 11px !important;
  color: #ff718e !important;
  font-size: 11px !important;
  letter-spacing: .75px;
}
.chart-pro-metric-card > b {
  color: #eef4ff !important;
  font-size: 23px !important;
  letter-spacing: .4px;
}
.chart-pro-metric-card em {
  margin-top: 9px;
  color: #77879e;
  font-size: 10.5px;
  font-style: normal;
}
.chart-pro-profile-card .chart-pro-profile {
  min-height: 104px;
  padding: 13px 12px !important;
  display: grid !important;
  grid-template-columns: 50px minmax(0,1fr) 18px;
  gap: 11px !important;
}
.chart-pro-profile-card .profile-dot {
  width: 46px !important;
  height: 46px !important;
  display: grid;
  place-items: center;
  background: #e92f56;
  border: 5px solid rgba(255,62,94,.22);
  color: white;
  box-shadow: 0 0 16px rgba(235,47,86,.24) !important;
}
.chart-pro-profile-card .profile-dot i { font-size: 15px; font-style: normal; }
.chart-pro-profile-card small {
  display: block;
  margin-bottom: 3px;
  color: #8c9ab3 !important;
  font-size: 9px !important;
  letter-spacing: 1.1px;
}
.chart-pro-profile-card b {
  margin: 0 !important;
  color: #f04e70 !important;
  font-size: 21px !important;
  letter-spacing: .5px;
}
.chart-pro-profile-note { display: none; }

/* Profile polarity colors must stay synchronized with the modeled GEX sign. */
.chart-pro-profile-card.profile-positive .profile-dot {
  background: #25c982 !important;
  border-color: rgba(37,201,130,.25) !important;
  box-shadow: 0 0 16px rgba(37,201,130,.28) !important;
}
.chart-pro-profile-card.profile-positive .chart-pro-profile b {
  color: #31d993 !important;
}

.chart-pro-profile-card.profile-negative .profile-dot {
  background: #e92f56 !important;
  border-color: rgba(255,62,94,.22) !important;
  box-shadow: 0 0 16px rgba(235,47,86,.24) !important;
}
.chart-pro-profile-card.profile-negative .chart-pro-profile b {
  color: #f04e70 !important;
}

.chart-pro-profile-card.profile-neutral .profile-dot {
  background: #d4a72c !important;
  border-color: rgba(212,167,44,.24) !important;
  box-shadow: 0 0 16px rgba(212,167,44,.24) !important;
}
.chart-pro-profile-card.profile-neutral .chart-pro-profile b {
  color: #e2bd50 !important;
}

.chart-pro-em-body { padding: 12px 13px 14px; }
.chart-pro-mode-pill {
  margin-left: auto;
  padding: 4px 9px;
  border: 1px solid #36437a;
  border-radius: 999px;
  color: #9ea7ff;
  background: #101a38;
  font-size: 10.5px;
  font-weight: 900;
}
.chart-pro-smart-label {
  color: #c57bff;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 8px;
}
.chart-pro-em-values {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.chart-pro-em-values > span { display: flex; align-items: baseline; gap: 5px; }
.chart-pro-em-values > span:first-child b,
.chart-pro-em-values > span:first-child small {
  color: #f05173;
}
.chart-pro-em-values > span:last-child b,
.chart-pro-em-values > span:last-child small {
  color: #35d58f;
}
.chart-pro-em-values b { font-size: 15px; }
.chart-pro-em-values small { font-size: 10.5px; }
.chart-pro-em-track.exact {
  height: 4px !important;
  margin: 4px 0 6px;
  background: linear-gradient(90deg, #f05173 0%, #b92f51 49%, #35d58f 51%, #25c982 100%) !important;
  box-shadow: -4px 0 8px rgba(240,81,115,.18), 4px 0 8px rgba(53,213,143,.18);
}
.chart-pro-em-track.exact span {
  width: 11px !important; height: 11px !important;
  background: #dbe5f4 !important;
  border: 2px solid #0b1523;
  box-shadow: 0 0 7px rgba(219,229,244,.38) !important;
}
.chart-pro-em-bounds { display:flex; justify-content:space-between; margin-bottom: 9px; }
.chart-pro-em-bounds b { font-size: 12px; }
.chart-pro-em-bounds b:first-child { color: #f05173; }
.chart-pro-em-bounds b:last-child { color: #35d58f; }
.chart-pro-settings-button {
  display: block;
  margin: 0 auto 7px;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid #263853;
  border-radius: 8px;
  color: #8d9bb2;
  background: #0a1422;
  font-size: 10.5px;
  font-weight: 700;
}
.chart-pro-settings-button span { margin-left: 5px; color: #dbe5f4; }
.chart-pro-footnote { padding: 0 !important; font-size: 8px !important; }
.chart-pro-muted { margin-left: auto; font-size: 8px !important; }
.chart-pro-chain-body { padding: 11px 12px 6px; }
.chart-pro-activity-row {
  display: grid;
  grid-template-columns: 72px minmax(0,1fr) 58px;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}
.chart-pro-activity-row > b { color:#cbd5e6; font-size:11px; letter-spacing:.4px; }
.chart-pro-activity-row:first-child > b { color:#f3bf4b; }
.chart-pro-activity-track {
  position:relative; height: 26px; overflow:hidden; border-radius:5px;
  border:1px solid #24354c;
  background: linear-gradient(90deg, rgba(122,38,62,.28), rgba(29,132,124,.30));
}
.chart-pro-activity-track span {
  position:absolute; top:4px; bottom:4px; left:50%; width:4px; border-radius:4px;
  background:#ffc22f; box-shadow:0 0 8px rgba(255,194,47,.7);
  transform:translateX(-50%);
}
.chart-pro-activity-track.volume span {
  width:13px; height:13px; top:50%; bottom:auto; border-radius:50%;
  background:#121827; border:3px solid #ff456d; box-shadow:0 0 8px rgba(255,69,109,.55);
  transform:translate(-50%,-50%);
}
.chart-pro-activity-row em {
  padding:6px 6px; border:1px solid #4a263b; border-radius:5px;
  color:#ef6681; background:#171121; font-size:9px; font-style:normal; text-align:center;
}
.chart-pro-ratio-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding: 6px 9px 12px; }
.chart-pro-ratio-card {
  border:1px solid #22334a; border-radius:8px; padding: 11px 10px;
  background:linear-gradient(180deg,#091523,#07111d);
}
.chart-pro-ratio-card header { display:grid; grid-template-columns:22px 1fr auto; align-items:center; gap:4px; }
.chart-pro-ratio-card header span { color:#8395b3; font-size:18px; }
.chart-pro-ratio-card header strong { color:#9ba9c0; font-size:11px; letter-spacing:1px; display:flex; flex-direction:column; gap:1px; }
.chart-pro-ratio-card header strong small { color:#66758d; font-size:7px; font-weight:800; letter-spacing:.55px; }
.chart-pro-ratio-card header b { color:#f36a84; font-size:18px; }
.chart-pro-ratio-card:nth-child(2) header b { color:#e7eef9; }
.chart-pro-split-bar { display:flex; height:8px; margin:10px 0 8px; overflow:hidden; border-radius:999px; background:#111a29; }
.chart-pro-split-bar span { background:#3ba875; min-width:2px; }
.chart-pro-split-bar i { background:#8e2d4d; min-width:2px; }
.chart-pro-ratio-card footer { display:flex; align-items:center; justify-content:space-between; gap:5px; }
.chart-pro-ratio-card footer b { color:#3fbe83; font-size:12px; }
.chart-pro-ratio-card footer em { color:#eb5f7d; font-size:12px; font-style:normal; }
.chart-pro-ratio-card footer small { color:#748198; font-size:8px; }
.chart-pro-side-value { display:flex; align-items:baseline; gap:4px; min-width:0; }
.chart-pro-side-value > small { font-size:7px !important; font-weight:800; letter-spacing:.45px; }
.chart-pro-side-call > small { color:#3fbe83 !important; }
.chart-pro-side-put > small { color:#eb5f7d !important; }
.chart-pro-vs { flex:0 0 auto; }
.chart-pro-chain-footnote {
  display:block; padding:0 11px 10px; color:#64748b; font-size:7.5px;
  letter-spacing:.15px; text-align:center;
}
.chart-pro-refresh-card { margin-top: 1px; background:transparent !important; border:none !important; box-shadow:none !important; }
.chart-pro-refresh-status {
  width: 78%; min-height:48px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:10px;
  border:1px solid #2a3b56; border-radius:9px; background:#0a1422; color:#e2e9f5;
}
.chart-pro-refresh-status span {
  width:25px; height:25px; display:grid; place-items:center; border:2px solid #6d72ff; border-radius:50%;
  color:#74d1d8; font-weight:900;
}
.chart-pro-refresh-status strong { font-size:12px; letter-spacing:.7px; }
.chart-pro-hidden-values { display:none !important; }
@media (max-width: 1180px) {
  .chart-pro-layout { grid-template-columns:minmax(0,1fr) 340px !important; }
  .chart-pro-sidebar-exact { width:340px; }
}
@media (max-width: 920px) {
  .chart-pro-sidebar-exact { width:auto; display:flex !important; }
}

/* ================================================================
   V8.8.91 — Dealer Positioning Estimate
   Uses Yahoo OI/Volume/IV inputs with locally modeled Black-Scholes Greeks.
   This is an estimate/proxy, not an identified market-maker book.
   ================================================================ */
.chart-pro-dealer-card .chart-pro-section-header {
  gap: 7px !important;
}
.chart-pro-dealer-est-pill {
  margin-left: auto;
  padding: 4px 9px;
  border: 1px solid #584b21;
  border-radius: 999px;
  color: #f1c74f;
  background: rgba(103,79,14,.20);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .7px;
}
.chart-pro-dealer-card .chart-pro-chevrons { margin-left: 0 !important; }
.chart-pro-dealer-primary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
}
.chart-pro-dealer-box {
  min-height: 96px;
  padding: 11px 10px;
  border: 1px solid #22344d;
  border-radius: 8px;
  background: linear-gradient(180deg,#091523,#07111d);
}
.chart-pro-dealer-box small {
  display: block;
  margin-bottom: 10px;
  color: #8797af;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .8px;
}
.chart-pro-dealer-box b {
  display: block;
  min-height: 30px;
  color: #e9f1fc;
  font-size: 15px;
  line-height: 1.15;
}
.chart-pro-dealer-box em {
  display: block;
  margin-top: 8px;
  color: #7d8da5;
  font-size: 9px;
  font-style: normal;
}
.chart-pro-dealer-box b.dealer-positive { color:#38d48f; }
.chart-pro-dealer-box b.dealer-negative { color:#f05173; }
.chart-pro-dealer-box b.dealer-neutral { color:#d3dbe9; }
.chart-pro-dealer-levels {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  margin:0 10px 10px;
  overflow:hidden;
  border:1px solid #22344b;
  border-radius:8px;
  background:#1b293c;
}
.chart-pro-dealer-levels > div {
  padding:9px 6px;
  text-align:center;
  background:#08121f;
}
.chart-pro-dealer-levels span {
  display:block;
  margin-bottom:4px;
  color:#7f8da3;
  font-size:8px;
  font-weight:900;
  letter-spacing:.7px;
}
.chart-pro-dealer-levels b {
  color:#eaf2fd;
  font-size:11px;
}
.chart-pro-dealer-levels > div:first-child b { color:#42c9dd; }
.chart-pro-dealer-levels > div:nth-child(2) b { color:#37cf8b; }
.chart-pro-dealer-levels > div:nth-child(3) b { color:#ef5a78; }
.chart-pro-dealer-quality {
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin:0 10px 8px;
  padding:8px 9px;
  border:1px solid #1e3047;
  border-radius:7px;
  background:#08121e;
  color:#75859b;
  font-size:8px;
  letter-spacing:.5px;
}
.chart-pro-dealer-quality b { color:#b9c8dc; font-size:9px; }
.chart-pro-dealer-note {
  display:block;
  padding:0 10px 10px;
  color:#728198;
  font-size:8px;
  line-height:1.35;
  text-align:center;
}


/* ================================================================
   V8.8.93 — Dealer Metrics Clear
   Readability only. No data/calculation changes.
   ================================================================ */
.chart-pro-dealer-card {
  overflow: visible !important;
}
.chart-pro-dealer-primary {
  gap: 12px !important;
  padding: 11px !important;
}
.chart-pro-dealer-box {
  min-height: 110px !important;
  padding: 12px 11px !important;
  overflow: visible !important;
}
.chart-pro-dealer-box small {
  font-size: 9px !important;
  margin-bottom: 9px !important;
}
.chart-pro-dealer-box b {
  min-height: 28px !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
.chart-pro-dealer-box em {
  margin-top: 9px !important;
  color: #aab8cd !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}
.chart-pro-dealer-levels {
  margin: 0 11px 10px !important;
  min-height: 62px !important;
}
.chart-pro-dealer-levels > div {
  min-width: 0 !important;
  padding: 10px 7px !important;
}
.chart-pro-dealer-levels span {
  font-size: 9px !important;
  margin-bottom: 6px !important;
}
.chart-pro-dealer-levels b {
  display: block !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
.chart-pro-dealer-quality {
  min-height: 38px !important;
  margin: 0 11px 9px !important;
  padding: 9px 10px !important;
  align-items: center !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}
.chart-pro-dealer-quality span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.chart-pro-dealer-quality b {
  font-size: 11px !important;
  font-weight: 900 !important;
  color: #d8e3f3 !important;
}
.chart-pro-dealer-note {
  padding: 0 12px 12px !important;
  color: #8798af !important;
  font-size: 8.5px !important;
  line-height: 1.45 !important;
}

/* ================================================================
   V8.8.94 — Live Chart lower sidebar visibility fix
   Let the chart page grow vertically so every analytics card below
   Dealer Positioning / Expected Move / Chain Activity remains reachable.
   Visual/layout only. No market-data or calculation changes.
   ================================================================ */
body[data-dashboard-view="chart"] .chart-dashboard-page {
  height: auto !important;
  min-height: calc(100vh - 252px) !important;
  overflow: visible !important;
}

body[data-dashboard-view="chart"] #pageChart.chart-reference-page {
  overflow: visible !important;
}

body[data-dashboard-view="chart"] .chart-pro-layout {
  height: auto !important;
  min-height: 690px !important;
  align-items: start !important;
  overflow: visible !important;
}

body[data-dashboard-view="chart"] .chart-pro-sidebar,
body[data-dashboard-view="chart"] .chart-pro-sidebar-exact {
  height: auto !important;
  max-height: none !important;
  overflow-y: visible !important;
  overflow-x: hidden !important;
}

/* Keep the chart at its existing size while the right analytics rail
   is allowed to extend below it. The browser page now scrolls normally. */
body[data-dashboard-view="chart"] .chart-pro-main {
  align-self: start !important;
}


/* V8.8.95 — functional Adaptive Expected Move settings */
.chart-pro-settings-button { cursor: pointer; }
.chart-pro-settings-button:hover {
  color: #dbe5f4;
  border-color: #3d587e;
  background: #0d1a2b;
}
.em-settings-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(2, 8, 16, .72);
  backdrop-filter: blur(4px);
}
.em-settings-modal.open { display: grid; }
.em-settings-dialog {
  width: min(440px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid #263853;
  border-radius: 12px;
  background: #091321;
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
  color: #dbe5f4;
}
.em-settings-dialog > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #1e3048;
  background: #0c1828;
}
.em-settings-dialog > header div { display: grid; gap: 3px; }
.em-settings-dialog > header small { color: #7f8da3; font-size: 9px; letter-spacing: .7px; }
.em-settings-dialog > header strong { font-size: 14px; }
.em-settings-dialog > header button {
  width: 30px; height: 30px; border: 1px solid #2c405d; border-radius: 7px;
  color: #cdd8e8; background: #0a1422; cursor: pointer; font-size: 18px;
}
.em-settings-body { display: grid; gap: 12px; padding: 16px; }
.em-setting-field { display: grid; gap: 6px; }
.em-setting-field > span { color: #94a3b8; font-size: 10px; font-weight: 700; }
.em-setting-field select,
.em-setting-field input {
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid #2b405d;
  border-radius: 8px;
  outline: none;
  color: #e5edf8;
  background: #0b1726;
  font: inherit;
}
.em-setting-field select:focus,
.em-setting-field input:focus { border-color: #4d79ad; box-shadow: 0 0 0 2px rgba(77,121,173,.14); }
.em-settings-preview {
  display: grid; gap: 5px; padding: 11px 12px; border: 1px solid #20344d;
  border-radius: 8px; background: #07101c;
}
.em-settings-preview span { color: #6f819a; font-size: 9px; font-weight: 800; letter-spacing: .5px; }
.em-settings-preview b { color: #cfe1f7; font-size: 11px; font-weight: 700; }
.em-settings-preview small { color: #7f8da3; font-size: 9px; line-height: 1.5; }
.em-settings-dialog > footer {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  border-top: 1px solid #1e3048; background: #0a1524;
}
.em-settings-spacer { flex: 1; }
.em-settings-dialog > footer button {
  min-height: 34px; padding: 0 13px; border-radius: 7px; cursor: pointer;
  font-size: 10px; font-weight: 800;
}
.em-settings-dialog > footer .secondary { color: #aab8ca; border: 1px solid #2a3d57; background: #0b1725; }
.em-settings-dialog > footer .primary { color: #07130e; border: 1px solid #38d890; background: #38d890; }

.em-setting-field[hidden] { display: none !important; }


/* V8.9.13 — invisible TradingView-style draggable price scale. */
#priceChart .price-scale-hit-zone,
#embeddedPriceChart .price-scale-hit-zone {
  pointer-events: all;
  cursor: ns-resize;
}

.tradingview-chart-stage.is-price-zone,
.tradingview-chart-stage.is-price-scaling {
  cursor: ns-resize;
}


/* ================================================================
   V8.9.17 — Position Tracker + Contract Quality
   ================================================================ */
.position-tracker-card {
  overflow: visible !important;
}

.position-tracker-status {
  margin-left: auto;
  padding: 3px 7px;
  border: 1px solid #2d4661;
  border-radius: 999px;
  color: #7f93aa;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .5px;
}

.position-tracker-status.saved {
  color: #36d394;
  border-color: rgba(54,211,148,.42);
  background: rgba(54,211,148,.08);
}

.position-tracker-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 6px;
  padding: 9px 9px 6px;
}

.position-tracker-form label {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.position-tracker-form label > span {
  color: #71849b;
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: .65px;
}

.position-entry-field {
  grid-column: 1 / -1;
}

.position-entry-control {
  display: grid;
  grid-template-columns: 112px minmax(0,1fr);
  gap: 6px;
}

.position-entry-summary {
  margin: 0 9px 7px;
  padding: 6px 8px;
  border: 1px solid #20344b;
  border-radius: 6px;
  color: #93a6bb;
  background: rgba(7,17,30,.72);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .25px;
}

.position-entry-summary strong {
  color: #dce7f4;
}

.position-tracker-form select,
.position-tracker-form input {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0 7px;
  border: 1px solid #293c55;
  border-radius: 6px;
  outline: none;
  color: #e8f0fb;
  background: #07111e;
  font-size: 10px;
  font-weight: 800;
}

.position-tracker-form select:focus,
.position-tracker-form input:focus {
  border-color: #3d77a6;
  box-shadow: 0 0 0 2px rgba(61,119,166,.12);
}

.position-tracker-actions {
  display: grid;
  grid-template-columns: 1fr 70px;
  gap: 6px;
  padding: 0 9px 8px;
}

.position-tracker-actions button {
  height: 28px;
  border: 1px solid #2f4761;
  border-radius: 6px;
  color: #b9c8d9;
  background: #0b1726;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .45px;
  cursor: pointer;
}

.position-tracker-actions button:first-child {
  color: #dffaf0;
  border-color: rgba(44,199,139,.42);
  background: linear-gradient(180deg, rgba(44,199,139,.18), rgba(44,199,139,.07));
}

.position-live-contract {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border-top: 1px solid #1e2d42;
  border-bottom: 1px solid #1e2d42;
  background: #1b293d;
}

.position-live-contract > div {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 7px 9px;
  background: #081321;
}

.position-live-contract span,
.position-metrics-grid span,
.contract-quality-grid span {
  color: #6f839b;
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: .45px;
}

.position-live-contract strong {
  overflow: hidden;
  color: #dce7f4;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.position-metrics-grid,
.contract-quality-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1px;
  background: #1b293d;
}

.position-metrics-grid > div,
.contract-quality-grid > div {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 7px 8px;
  background: #081321;
}

.position-metrics-grid strong,
.contract-quality-grid strong {
  color: #e6eef9;
  font-size: 10.5px;
  white-space: nowrap;
}

.position-positive { color: #2bd08e !important; }
.position-negative { color: #ef5673 !important; }
.position-neutral { color: #dce7f4 !important; }

.contract-quality-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px;
  border-top: 1px solid #1f2e43;
  background: linear-gradient(90deg, rgba(37,210,138,.05), rgba(240,81,115,.05));
}

.contract-quality-head > div {
  display: grid;
  gap: 3px;
}

.contract-quality-head small {
  color: #74879f;
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: .7px;
}

.contract-quality-head strong {
  color: #c9d5e5;
  font-size: 11px;
}

.contract-quality-head > b {
  min-width: 42px;
  padding: 6px 7px;
  border: 1px solid #314660;
  border-radius: 7px;
  color: #a8b8ca;
  background: #07111d;
  font-size: 12px;
  text-align: center;
}

.contract-quality-head.quality-good strong,
.contract-quality-head.quality-good > b { color: #2bd08e; }
.contract-quality-head.quality-fair strong,
.contract-quality-head.quality-fair > b { color: #f2c94c; }
.contract-quality-head.quality-risk strong,
.contract-quality-head.quality-risk > b { color: #ef5673; }
.contract-quality-head.quality-incomplete strong,
.contract-quality-head.quality-incomplete > b { color: #9cafc3; }

.contract-quality-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px 9px 4px;
}

.contract-quality-flags span {
  padding: 4px 6px;
  border: 1px solid #2a3b52;
  border-radius: 999px;
  color: #9fb0c3;
  background: #07111d;
  font-size: 7.5px;
  font-weight: 800;
  white-space: nowrap;
}

.contract-quality-flags span.good {
  color: #2bd08e;
  border-color: rgba(43,208,142,.35);
}
.contract-quality-flags span.warn {
  color: #f2c94c;
  border-color: rgba(242,201,76,.35);
}
.contract-quality-flags span.risk {
  color: #ef5673;
  border-color: rgba(239,86,115,.35);
}

.position-tracker-note {
  display: block;
  padding: 3px 9px 10px;
  color: #61748b;
  font-size: 7.5px;
  line-height: 1.45;
}

@media (max-width: 1280px) {
  .position-tracker-form { grid-template-columns: repeat(2, minmax(0,1fr)); }
}


/* V8.9.19 — explicit entry mode and compact two-row tracker form */
.position-tracker-form {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}
.position-entry-mode-field {
  grid-column: 1 / -1 !important;
}
.position-tracker-form select,
.position-tracker-form input {
  width: 100%;
  min-width: 0;
}
.position-entry-summary {
  margin-top: 7px;
  color: #dce8f5;
  background: rgba(35, 210, 145, .055);
  border-color: rgba(35, 210, 145, .25);
}


/* V8.9.21 — Contract Comparison + Exit Manager */
.contract-comparison-section,.exit-manager-section{margin-top:8px;border-top:1px solid #1f2e43;background:rgba(5,13,23,.35)}
.contract-comparison-section>header,.exit-manager-section>header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px}
.contract-comparison-section>header>div,.exit-manager-section>header>div{display:grid;gap:3px}
.contract-comparison-section>header small,.exit-manager-section>header small{color:#7b8da4;font-size:7.5px;font-weight:900;letter-spacing:.7px}
.contract-comparison-section>header strong,.exit-manager-section>header strong{color:#d9e5f3;font-size:9.5px}
.contract-comparison-section>header>span,.exit-manager-status{padding:4px 6px;border:1px solid #314660;border-radius:999px;color:#91a4ba;background:#07111d;font-size:7px;font-weight:900;white-space:nowrap}
.contract-comparison-list{display:grid;gap:6px;padding:0 9px 9px}
.contract-comparison-empty{padding:10px;border:1px dashed #293950;border-radius:7px;color:#71849b;font-size:9px;text-align:center}
.contract-compare-row{display:grid;grid-template-columns:58px minmax(0,1fr) 34px;align-items:center;gap:7px;min-height:47px;padding:7px;border:1px solid #26384f;border-radius:7px;background:#07111d}
.contract-compare-row.selected{border-color:rgba(124,83,255,.8);box-shadow:inset 3px 0 0 #7d53ff}
.contract-compare-row.best:not(.selected){border-color:rgba(43,208,142,.45)}
.contract-compare-strike{display:grid;gap:3px}.contract-compare-strike strong{color:#e9f1fb;font-size:11px}
.contract-compare-badges{display:flex;flex-wrap:wrap;gap:3px}.contract-compare-badges span{padding:2px 4px;border-radius:999px;color:#9db0c7;background:#101d2d;font-size:6px;font-weight:900}
.contract-compare-badges .selected-badge{color:#bca8ff}.contract-compare-badges .best-badge{color:#2bd08e}
.contract-compare-data{display:grid;gap:4px;min-width:0}.contract-compare-data b{color:#d8e4f2;font-size:9px;white-space:nowrap}.contract-compare-data small{color:#8194ab;font-size:7.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.contract-compare-score{display:grid;place-items:center;min-width:32px;min-height:32px;border:1px solid #30455f;border-radius:7px;color:#f2c94c;background:#0a1523;font-size:11px;font-weight:900}
.contract-compare-score.good{color:#2bd08e}.contract-compare-score.risk{color:#ef5673}.contract-compare-score.incomplete{color:#8498af}
.exit-manager-section{border-bottom:1px solid #1f2e43}.exit-manager-status.active,.exit-manager-status.saved,.exit-manager-status.target{color:#2bd08e;border-color:rgba(43,208,142,.55)}.exit-manager-status.stop{color:#ef5673;border-color:rgba(239,86,115,.65)}.exit-manager-status.waiting{color:#9cafc3}
.exit-manager-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:0 9px}.exit-manager-form label{display:grid;gap:4px}.exit-manager-form label>span{color:#75879e;font-size:7px;font-weight:900;letter-spacing:.5px}
.exit-manager-form input,.exit-manager-form select{width:100%;min-width:0;min-height:31px;padding:0 8px;border:1px solid #2a3d56;border-radius:6px;color:#e5eef8;background:#081321;font-size:10px;font-weight:800}.exit-price-source-field{grid-column:1/-1}
.exit-manager-actions{padding:7px 9px 0}.exit-manager-actions button{width:100%;min-height:30px;border:1px solid rgba(43,208,142,.36);border-radius:6px;color:#dff9ef;background:rgba(43,208,142,.12);font-size:8px;font-weight:900;cursor:pointer}
.exit-manager-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:8px 9px 0;border:1px solid #26384e;border-radius:7px;overflow:hidden}.exit-manager-grid>div{min-width:0;padding:7px 6px;border-right:1px solid #223248;border-bottom:1px solid #223248;background:rgba(7,17,29,.82)}.exit-manager-grid>div:nth-child(3n){border-right:none}.exit-manager-grid>div:nth-last-child(-n+3){border-bottom:none}
.exit-manager-grid span{display:block;color:#71849b;font-size:6.8px;font-weight:900;letter-spacing:.35px}.exit-manager-grid strong{display:block;margin-top:4px;color:#e4edf7;font-size:10px;white-space:nowrap}
.exit-manager-flags{display:flex;flex-wrap:wrap;gap:5px;padding:8px 9px 4px}.exit-manager-flags span{padding:4px 6px;border:1px solid #2b3d54;border-radius:999px;color:#9eb0c4;background:#07111d;font-size:7px;font-weight:900;white-space:nowrap}.exit-manager-flags span.good{color:#2bd08e;border-color:rgba(43,208,142,.35)}.exit-manager-flags span.warn{color:#f2c94c;border-color:rgba(242,201,76,.35)}.exit-manager-flags span.risk{color:#ef5673;border-color:rgba(239,86,115,.35)}
.exit-manager-note{display:block;padding:3px 9px 10px;color:#61748b;font-size:7.3px;line-height:1.45}


/* ================================================================
   V8.9.22 — Call / Put setup alerts (context only)
   ================================================================ */
.setup-alert-card {
  overflow: hidden;
}

.setup-alert-status {
  margin-left: auto;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid #32435a;
  color: #8fa2b8;
  background: #0a1421;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
}

.setup-alert-status.on {
  color: #35d58f;
  border-color: rgba(53,213,143,.45);
  background: rgba(53,213,143,.08);
}

.setup-alert-status.off {
  color: #8fa2b8;
}

.setup-alert-state {
  margin: 10px;
  padding: 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #293950;
  border-radius: 8px;
  background: #08121f;
}

.setup-alert-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 900;
  border: 1px solid #42526a;
  color: #9fb0c5;
  background: #0c1725;
  flex: 0 0 auto;
}

.setup-alert-state div {
  min-width: 0;
}

.setup-alert-state small {
  display: block;
  color: #8091a8;
  font-size: 9px;
  letter-spacing: .08em;
}

.setup-alert-state strong {
  display: block;
  margin-top: 2px;
  font-size: 17px;
  letter-spacing: .02em;
}

.setup-alert-state p {
  margin: 4px 0 0;
  color: #98a8bb;
  font-size: 10px;
  line-height: 1.35;
}

.setup-alert-state.call {
  border-color: rgba(45,207,142,.46);
  background: linear-gradient(90deg, rgba(45,207,142,.10), rgba(8,18,31,.96));
}
.setup-alert-state.call .setup-alert-icon {
  color: #d8fff0;
  border-color: #31cf8c;
  background: #159a67;
  box-shadow: 0 0 16px rgba(49,207,140,.35);
}
.setup-alert-state.call strong { color: #35d58f; }

.setup-alert-state.put {
  border-color: rgba(240,81,115,.48);
  background: linear-gradient(90deg, rgba(240,81,115,.10), rgba(8,18,31,.96));
}
.setup-alert-state.put .setup-alert-icon {
  color: #ffe2e9;
  border-color: #f05173;
  background: #b32f50;
  box-shadow: 0 0 16px rgba(240,81,115,.34);
}
.setup-alert-state.put strong { color: #f05173; }

.setup-alert-state.waiting strong { color: #f3c85b; }

/* V8.9.27 — closed market: one clean state, no prior-session alert metrics */
.setup-alert-state.closed {
  border-color: #33465f;
  background: linear-gradient(90deg, rgba(103,120,143,.08), rgba(8,18,31,.96));
}
.setup-alert-state.closed .setup-alert-icon {
  color: #9fb0c5;
  border-color: #42526a;
  background: #0c1725;
  box-shadow: none;
}
.setup-alert-state.closed strong { color: #c2cfde; }
.setup-alert-card.market-closed .setup-alert-state small,
.setup-alert-card.market-closed .setup-alert-state p,
.setup-alert-card.market-closed .setup-alert-grid {
  display: none;
}

/* V8.9.37 Yahoo — separate level plan card; preserve last-session plan after close. */
.level-entry-plan-card.market-closed .level-entry-plan {
  display: block;
  opacity: .96;
}
.level-entry-plan-card.market-closed .level-plan-description {
  background: linear-gradient(90deg, rgba(103,120,143,.08), rgba(6,14,24,.94));
}
#levelPlanState.closed {
  color:#c2cfde;
  border-color:#42526a;
  background:#0c1725;
}
.level-entry-plan-card.market-closed .level-entry-grid article {
  background:#07111d;
}

.setup-alert-controls {
  padding: 0 10px 10px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  gap: 7px;
  align-items: center;
}

.setup-alert-controls button {
  min-height: 32px;
  border: 1px solid #285c54;
  border-radius: 6px;
  color: #d8fff3;
  background: rgba(26,122,96,.28);
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
}

.setup-alert-controls button.secondary {
  padding: 0 10px;
  border-color: #33465f;
  color: #afbdd0;
  background: #0a1421;
}

.setup-alert-controls button.enabled {
  border-color: #31cf8c;
  color: #35d58f;
  background: rgba(49,207,140,.10);
}

.setup-alert-sound {
  min-height: 32px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #33465f;
  border-radius: 6px;
  color: #aebdd0;
  background: #0a1421;
  font-size: 9px;
  font-weight: 800;
}

.setup-alert-sound input { accent-color: #31cf8c; }

.setup-alert-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  border-top: 1px solid #1f2d40;
  border-left: 1px solid #1f2d40;
}

.setup-alert-grid > div {
  min-height: 48px;
  padding: 8px 9px;
  border-right: 1px solid #1f2d40;
  border-bottom: 1px solid #1f2d40;
}

.setup-alert-grid span {
  display: block;
  color: #75879e;
  font-size: 8.5px;
  font-weight: 800;
}

.setup-alert-grid strong {
  display: block;
  margin-top: 3px;
  color: #d7e1ee;
  font-size: 11px;
}

.setup-alert-grid strong.positive { color: #35d58f; }
.setup-alert-grid strong.negative { color: #f05173; }
.setup-alert-grid strong.neutral { color: #f3c85b; }

/* V8.9.33 — exact level entry plan */
.level-entry-plan {
  border-top: 1px solid #1f2d40;
  background: rgba(6,14,24,.88);
}

.level-entry-plan > header {
  min-height: 46px;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.level-entry-plan > header small {
  display: block;
  color: #7f91a8;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .08em;
}

.level-entry-plan > header strong {
  display: block;
  margin-top: 2px;
  color: #dce7f4;
  font-size: 10px;
}

#levelPlanState {
  min-width: 92px;
  padding: 4px 7px;
  border: 1px solid #33465f;
  border-radius: 999px;
  text-align: center;
  color: #f3c85b;
  background: #0a1421;
  font-size: 8px;
  font-weight: 900;
  white-space: nowrap;
}
#levelPlanState.call { color:#35d58f; border-color:rgba(53,213,143,.45); background:rgba(53,213,143,.08); }
#levelPlanState.put { color:#f05173; border-color:rgba(240,81,115,.45); background:rgba(240,81,115,.08); }
#levelPlanState.low { color:#f3c85b; border-color:rgba(243,200,91,.42); }

.level-entry-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  border-top: 1px solid #1f2d40;
}

.level-entry-grid article {
  min-width: 0;
  padding: 9px 10px;
  border-right: 1px solid #1f2d40;
  background: #08121f;
}
.level-entry-grid article:last-child { border-right: none; }
.level-entry-grid article.call { box-shadow: inset 0 2px 0 rgba(53,213,143,.38); }
.level-entry-grid article.put { box-shadow: inset 0 2px 0 rgba(240,81,115,.38); }
.level-entry-grid article > span {
  display:block;
  font-size:8px;
  font-weight:900;
  letter-spacing:.06em;
}
.level-entry-grid article.call > span { color:#35d58f; }
.level-entry-grid article.put > span { color:#f05173; }
.level-entry-grid article > strong {
  display:block;
  margin-top:5px;
  color:#e3edf8;
  font-size:10px;
  line-height:1.35;
  overflow-wrap:anywhere;
}
.level-entry-grid article > small,
.level-entry-grid article > em {
  display:block;
  margin-top:4px;
  color:#8fa1b6;
  font-size:8px;
  line-height:1.3;
  font-style:normal;
  overflow-wrap:anywhere;
}
.level-entry-grid article > em { color:#73869d; }

.level-entry-active {
  padding: 9px 10px 10px;
  border-top: 1px solid #1f2d40;
}
.level-entry-active strong {
  display:block;
  color:#f3c85b;
  font-size:10px;
  font-weight:900;
}
.level-entry-active strong.call { color:#35d58f; }
.level-entry-active strong.put { color:#f05173; }
.level-entry-active strong.low { color:#f3c85b; }
.level-entry-active small {
  display:block;
  margin-top:4px;
  color:#8799ae;
  font-size:8.5px;
  line-height:1.4;
}

.setup-alert-note {
  display: block;
  padding: 9px 10px 11px;
  color: #71839a;
  font-size: 8.5px;
  line-height: 1.35;
}


/* ================================================================
   V8.9.23 — Five-symbol background setup scanner
   ================================================================ */
.setup-watch-scanner {
  border-top: 1px solid #1f2d40;
  background: rgba(7,16,26,.72);
}

.setup-watch-scanner > header {
  min-height: 46px;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.setup-watch-scanner > header small {
  display: block;
  color: #75879e;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .08em;
}

.setup-watch-scanner > header strong {
  display: block;
  margin-top: 2px;
  color: #dce7f4;
  font-size: 11px;
}

#setupWatchCount {
  padding: 4px 8px;
  border: 1px solid #33465f;
  border-radius: 999px;
  color: #38d3ca;
  background: #0a1421;
  font-size: 9px;
  font-weight: 900;
}

.setup-watch-selectors {
  padding: 0 10px 9px;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 6px;
}

.setup-watch-selectors select:last-child {
  grid-column: 1 / -1;
}

.setup-watch-symbol {
  width: 100%;
  min-height: 31px;
  padding: 0 8px;
  border: 1px solid #31435a;
  border-radius: 6px;
  color: #dbe6f3;
  background: #091321;
  font-size: 10px;
  font-weight: 800;
  outline: none;
}

.setup-watch-symbol:focus {
  border-color: #35d58f;
  box-shadow: 0 0 0 2px rgba(53,213,143,.10);
}

.setup-watch-actions {
  padding: 0 10px 9px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  gap: 6px;
  align-items: center;
}

.setup-watch-actions button {
  min-height: 31px;
  padding: 0 10px;
  border: 1px solid #285c54;
  border-radius: 6px;
  color: #d8fff3;
  background: rgba(26,122,96,.28);
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
}

.setup-watch-actions button.secondary {
  border-color: #33465f;
  color: #afbdd0;
  background: #0a1421;
}

#setupWatchScannerState {
  min-width: 58px;
  padding: 4px 7px;
  border: 1px solid #33465f;
  border-radius: 999px;
  text-align: center;
  color: #899bb1;
  background: #0a1421;
  font-size: 8px;
  font-weight: 900;
}

#setupWatchScannerState.running { color: #35d58f; border-color: rgba(53,213,143,.45); }
#setupWatchScannerState.closed { color: #f3c85b; border-color: rgba(243,200,91,.42); }
#setupWatchScannerState.error { color: #f05173; border-color: rgba(240,81,115,.45); }

.setup-watch-results {
  border-top: 1px solid #1f2d40;
}

.setup-watch-empty {
  padding: 11px 10px;
  color: #71839a;
  font-size: 9px;
  line-height: 1.4;
}

.setup-watch-row {
  min-height: 52px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 54px 82px minmax(0,1fr);
  gap: 7px;
  align-items: center;
  border-bottom: 1px solid #1f2d40;
}

.setup-watch-row:last-child { border-bottom: none; }

.setup-watch-symbol-name {
  color: #dce7f4;
  font-size: 11px;
  font-weight: 900;
}

.setup-watch-signal {
  padding: 5px 6px;
  border: 1px solid #34465e;
  border-radius: 5px;
  text-align: center;
  color: #f3c85b;
  background: #0a1421;
  font-size: 8.5px;
  font-weight: 900;
}

.setup-watch-row.call .setup-watch-signal { color: #35d58f; border-color: rgba(53,213,143,.45); background: rgba(53,213,143,.08); }
.setup-watch-row.put .setup-watch-signal { color: #f05173; border-color: rgba(240,81,115,.45); background: rgba(240,81,115,.08); }
.setup-watch-row.error .setup-watch-signal { color: #f05173; }

.setup-watch-detail {
  min-width: 0;
}

.setup-watch-detail strong {
  display: block;
  color: #cbd7e5;
  font-size: 9.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.setup-watch-detail small {
  display: block;
  margin-top: 3px;
  color: #71839a;
  font-size: 8px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.setup-watch-note {
  display: block;
  padding: 9px 10px 10px;
  border-top: 1px solid #1f2d40;
  color: #71839a;
  font-size: 8.3px;
  line-height: 1.35;
}

@media (max-width: 1150px) {
  .setup-watch-selectors { grid-template-columns: 1fr; }
  .setup-watch-selectors select:last-child { grid-column: auto; }
}


/* ================================================================
   V8.9.24 — Market-aware request guard
   ================================================================ */
#setupWatchScannerState {
  min-width: 112px;
  white-space: nowrap;
}
.setup-watch-row.paused .setup-watch-signal {
  color: #f3c85b;
  border-color: rgba(243,200,91,.42);
  background: rgba(243,200,91,.07);
}
.setup-watch-detail strong,
.setup-watch-detail small {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}
.yahoo-api-guard {
  border-top: 1px solid #1f2d40;
  background: rgba(6,13,22,.82);
}
.yahoo-api-guard > header {
  padding: 8px 10px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.yahoo-api-guard > header small {
  display: block;
  color: #75879e;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
}
.yahoo-api-guard > header strong {
  display: block;
  margin-top: 2px;
  color: #dce7f4;
  font-size: 10px;
}
#yahooApiGuardState {
  padding: 4px 8px;
  border: 1px solid #33465f;
  border-radius: 999px;
  color: #899bb1;
  background: #0a1421;
  font-size: 8px;
  font-weight: 900;
}
#yahooApiGuardState.safe { color: #35d58f; border-color: rgba(53,213,143,.45); }
#yahooApiGuardState.caution { color: #f3c85b; border-color: rgba(243,200,91,.45); }
#yahooApiGuardState.danger { color: #f05173; border-color: rgba(240,81,115,.48); }
.yahoo-api-grid {
  padding: 0 10px 9px;
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 5px;
}
.yahoo-api-grid > div {
  min-width: 0;
  padding: 6px;
  border: 1px solid #24344a;
  border-radius: 5px;
  background: #091321;
}
.yahoo-api-grid span {
  display: block;
  color: #71839a;
  font-size: 7px;
  font-weight: 800;
  white-space: nowrap;
}
.yahoo-api-grid strong {
  display: block;
  margin-top: 3px;
  color: #dce7f4;
  font-size: 9px;
  font-weight: 900;
  overflow-wrap: anywhere;
}
@media (max-width: 1150px) {
  .yahoo-api-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .yahoo-api-grid > div:last-child { grid-column: 1 / -1; }
}

/* V8.9.36 Yahoo — decision zones and confirmed break levels */
.level-entry-grid article > small:first-of-type {
  color: #b9c8d9;
  font-weight: 900;
  letter-spacing: .025em;
}
.level-decision-zone {
  padding: 9px 10px;
  border-top: 1px solid #1f2d40;
  border-bottom: 1px solid #1f2d40;
  background: linear-gradient(90deg, rgba(243,200,91,.065), rgba(55,199,221,.04));
}
.level-decision-zone[hidden] { display:none !important; }
.level-decision-zone > span {
  display:block;
  color:#f3c85b;
  font-size:8px;
  font-weight:900;
  letter-spacing:.07em;
}
.level-decision-zone > strong {
  display:block;
  margin-top:4px;
  color:#e5edf7;
  font-size:10px;
  line-height:1.35;
  overflow-wrap:anywhere;
}
.level-decision-zone > small {
  display:block;
  margin-top:4px;
  color:#91a4ba;
  font-size:8px;
  font-weight:800;
}
#levelPlanState.closed {
  color:#9fb0c4;
  border-color:#3a4a5e;
  background:#0b1420;
}


/* ================================================================
   V8.9.37 Yahoo — separate Setup Alerts, Level Entry Plan and Scanner
   ================================================================ */
.level-entry-plan-card,
.setup-scanner-card {
  overflow: hidden;
}
.level-entry-plan-card .level-entry-plan,
.setup-scanner-card .setup-watch-scanner {
  border-top: 0;
}
.level-plan-description {
  min-height: 34px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #1f2d40;
  background: linear-gradient(90deg, rgba(124,83,255,.07), rgba(6,14,24,.94));
}
.level-plan-description strong {
  color: #9eb0c5;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .055em;
  line-height: 1.35;
}
.level-plan-note {
  display: block;
  padding: 9px 10px 11px;
  border-top: 1px solid #1f2d40;
  color: #71839a;
  font-size: 8.3px;
  line-height: 1.4;
}
.level-entry-plan-card.market-closed .chart-pro-section-header {
  background: linear-gradient(90deg, rgba(103,120,143,.08), rgba(6,14,24,.94));
}
.setup-scanner-card .setup-watch-scanner > header {
  background: rgba(7,16,26,.72);
}


/* ================================================================
   V8.9.39 Yahoo — two-page right analytics rail
   Page 1: Exposure / Profile / Dealer / Expected Move / Chain Activity
   Page 2: Setup Alerts / Entry Plan / Scanner / Position Tracker
   ================================================================ */
.chart-pro-date-header {
  grid-template-columns: minmax(0, 1fr) auto auto 18px !important;
}

.chart-sidebar-pager {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid #2b3d59;
  border-radius: 8px;
  background: #07111d;
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}

.chart-sidebar-page-button {
  width: 27px;
  height: 24px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #74869f;
  background: transparent;
  font: 900 10px/1 system-ui, sans-serif;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.chart-sidebar-page-button:hover {
  color: #d9e4f4;
  border-color: #344b6d;
  background: #0c1a2b;
}

.chart-sidebar-page-button.active,
.chart-sidebar-page-button[aria-pressed="true"] {
  color: #111725;
  border-color: #9c87ff;
  background: linear-gradient(180deg, #a895ff, #7867e7);
  box-shadow: 0 0 0 1px rgba(158,137,255,.16), 0 0 12px rgba(121,103,231,.22);
}

.chart-pro-sidebar-page {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.chart-pro-sidebar-page[hidden] {
  display: none !important;
}

@media (max-width: 1180px) {
  .chart-sidebar-page-button { width: 25px; }
}


/* ================================================================
   SMART TRADE SELECTOR — strict observed-data filter
   ================================================================ */
.smart-trade-card { overflow:hidden; }
.smart-trade-state {
  margin-left:auto;
  padding:4px 7px;
  border:1px solid #33465f;
  border-radius:999px;
  color:#f3c85b;
  background:#0a1421;
  font-size:8px;
  font-weight:900;
  white-space:nowrap;
}
.smart-trade-state.qualified { color:#35d58f; border-color:rgba(53,213,143,.5); background:rgba(53,213,143,.09); }
.smart-trade-state.rejected { color:#f05173; border-color:rgba(240,81,115,.48); background:rgba(240,81,115,.08); }
.smart-trade-state.closed,.smart-trade-state.incomplete { color:#9fb0c5; border-color:#42526a; background:#0c1725; }
.smart-trade-hero {
  margin:10px;
  padding:10px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 48px;
  align-items:center;
  gap:10px;
  border:1px solid #2b3d54;
  border-radius:8px;
  background:#08121f;
}
.smart-trade-hero.qualified { border-color:rgba(53,213,143,.46); background:linear-gradient(90deg,rgba(53,213,143,.09),rgba(8,18,31,.96)); }
.smart-trade-hero.rejected { border-color:rgba(240,81,115,.48); background:linear-gradient(90deg,rgba(240,81,115,.08),rgba(8,18,31,.96)); }
.smart-trade-hero small { display:block; color:#7f91a8; font-size:7.5px; font-weight:900; letter-spacing:.055em; }
.smart-trade-hero strong { display:block; margin-top:4px; color:#e4edf7; font-size:11px; line-height:1.35; overflow-wrap:anywhere; }
.smart-trade-hero.qualified strong { color:#35d58f; }
.smart-trade-hero.rejected strong { color:#f05173; }
.smart-trade-hero p { margin:4px 0 0; color:#8fa1b6; font-size:8px; line-height:1.4; }
.smart-trade-score-box {
  display:grid;
  justify-items:center;
  gap:3px;
  min-width:48px;
}
.smart-trade-score-box > small {
  color:#7f91a8;
  font-size:5.8px;
  line-height:1;
  letter-spacing:.02em;
  text-align:center;
  white-space:nowrap;
}
.smart-trade-score-box > b {
  display:grid;
  place-items:center;
  min-width:44px;
  min-height:44px;
  border:1px solid #33465f;
  border-radius:9px;
  color:#f3c85b;
  background:#0a1523;
  font-size:15px;
  font-weight:900;
}
.smart-trade-hero.qualified .smart-trade-score-box > b { color:#35d58f; border-color:rgba(53,213,143,.48); }
.smart-trade-hero.rejected .smart-trade-score-box > b { color:#f05173; border-color:rgba(240,81,115,.48); }
.smart-trade-market-grid,.smart-trade-greeks-grid,.smart-trade-plan-grid {
  display:grid;
  border-top:1px solid #1f2d40;
  border-left:1px solid #1f2d40;
}
.smart-trade-market-grid,.smart-trade-greeks-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.smart-trade-plan-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.smart-trade-market-grid > div,.smart-trade-greeks-grid > div,.smart-trade-plan-grid > div {
  min-width:0;
  min-height:47px;
  padding:7px 8px;
  border-right:1px solid #1f2d40;
  border-bottom:1px solid #1f2d40;
  background:rgba(7,17,29,.8);
}
.smart-trade-market-grid span,.smart-trade-greeks-grid span,.smart-trade-plan-grid span {
  display:block;
  color:#71849b;
  font-size:6.8px;
  font-weight:900;
  letter-spacing:.35px;
}
.smart-trade-market-grid strong,.smart-trade-greeks-grid strong,.smart-trade-plan-grid strong {
  display:block;
  margin-top:4px;
  color:#e4edf7;
  font-size:9.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.smart-trade-card strong.positive { color:#35d58f; }
.smart-trade-card strong.negative { color:#f05173; }
.smart-trade-card strong.call { color:#35d58f; }
.smart-trade-card strong.put { color:#f05173; }
.smart-trade-flags { display:flex; flex-wrap:wrap; gap:5px; padding:8px 9px 4px; }
.smart-trade-flags span {
  padding:4px 6px;
  border:1px solid #2b3d54;
  border-radius:999px;
  color:#9eb0c4;
  background:#07111d;
  font-size:7px;
  font-weight:900;
  white-space:nowrap;
}
.smart-trade-flags span.good { color:#2bd08e; border-color:rgba(43,208,142,.36); }
.smart-trade-flags span.warn { color:#f2c94c; border-color:rgba(242,201,76,.36); }
.smart-trade-flags span.risk { color:#ef5673; border-color:rgba(239,86,115,.38); }
.smart-trade-note { display:block; padding:4px 9px 10px; color:#677b92; font-size:7.4px; line-height:1.45; }

/* V8.9.51: explicit strict-real-data failure state. */
.expiry-card.no-data-expiry .sign {
  background: #7d2940;
  color: #ffd8e2;
}
.expiry-card.no-data-expiry .summary {
  color: #ef6684;
  font-weight: 800;
}
.matrix-no-data {
  min-height: 520px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px;
  text-align: center;
  color: #c7cfdd;
  background: rgba(4, 12, 24, .72);
  border: 1px solid rgba(239, 102, 132, .25);
  border-radius: 12px;
  box-sizing: border-box;
}
.matrix-no-data strong {
  color: #ef6684;
  font-size: 22px;
  letter-spacing: .08em;
}
.matrix-no-data span {
  max-width: 760px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.matrix-no-data small {
  color: #8994a8;
  line-height: 1.55;
}


/* v8.9.59 — page 2 visibility + ranked contracts */
.page2-visibility-controls{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.page2-visibility-controls button{border:1px solid #30445e;background:#0a1523;color:#a9bdd3;border-radius:7px;padding:7px 9px;font-size:8px;font-weight:900;letter-spacing:.45px;cursor:pointer}
.page2-visibility-controls button.is-hidden{border-color:#5b4050;color:#e09aae;background:#1a0f17}
.ranked-contracts-section{margin-top:10px;border-top:1px solid #203149;padding-top:9px}
.ranked-contracts-section>header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
.ranked-contracts-section>header>div{display:grid;gap:2px}.ranked-contracts-section>header small{color:#71869e;font-size:7px;font-weight:900;letter-spacing:.7px}.ranked-contracts-section>header strong{color:#dce8f5;font-size:10px}.ranked-contracts-section>header>span{border:1px solid #314660;border-radius:999px;padding:4px 7px;color:#9bb0c7;background:#07111d;font-size:7px;font-weight:900}
.ranked-contracts-list{display:grid;gap:6px}.ranked-contracts-empty{padding:10px;border:1px dashed #2b3c53;border-radius:7px;color:#7d91a8;font-size:9px;text-align:center}
.ranked-contract-row{display:grid;grid-template-columns:28px 1fr 38px;align-items:center;gap:7px;padding:8px;border:1px solid #26384e;border-radius:8px;background:rgba(6,15,25,.62)}
.ranked-contract-row.qualified{border-color:#245d4b}.ranked-contract-row.watch{border-color:#695b2f}.ranked-contract-row.rejected{border-color:#573041}
.ranked-contract-rank{color:#7e93aa;font-size:9px}.ranked-contract-main{display:grid;gap:2px;min-width:0}.ranked-contract-main strong{color:#e4edf7;font-size:10px}.ranked-contract-main small{color:#a7b7c9;font-size:8px}.ranked-contract-main em{color:#70859d;font-size:7px;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ranked-contract-row>span{justify-self:end;font-size:13px;font-weight:900;color:#dce7f3}.ranked-contract-row.qualified>span{color:#35d58f}.ranked-contract-row.rejected>span{color:#f06a83}.ranked-contracts-note{display:block;margin-top:7px;color:#6f8298;font-size:7px;line-height:1.45}


/* v8.9.62: single scanner picker + authentication */
.setup-watch-picker-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px!important}
.setup-watch-picker-row select{min-width:0}
.setup-watch-selected{display:flex;flex-wrap:wrap;gap:6px;margin:7px 0 2px}
.setup-watch-chip{display:inline-flex;align-items:center;gap:7px;border:1px solid #30445e;background:#0a1523;color:#dce9f7;border-radius:999px;padding:5px 9px;font-size:10px;cursor:pointer}
.setup-watch-chip span{color:#e09aae;font-size:13px;line-height:1}.setup-watch-none{color:#71869b}
.auth-overlay{position:fixed;inset:0;z-index:99999;background:rgba(3,8,15,.96);display:grid;place-items:center;padding:20px}
.auth-overlay[hidden]{display:none!important}.auth-card{width:min(380px,92vw);background:#0b1624;border:1px solid #30445e;border-radius:14px;padding:22px;box-shadow:0 24px 70px rgba(0,0,0,.55);display:grid;gap:12px;color:#dce9f7}
.auth-card h2{margin:0;font-size:20px}.auth-card p{margin:0 0 4px;color:#8196aa;font-size:12px}.auth-logo{font-size:11px;font-weight:900;letter-spacing:2px;color:#7fc5ff}
.auth-card label{display:grid;gap:5px}.auth-card label span{font-size:9px;font-weight:900;color:#8196aa;letter-spacing:.8px}.auth-card input{border:1px solid #30445e;background:#07101b;color:#fff;border-radius:8px;padding:10px 11px;outline:none}.auth-card input:focus{border-color:#5b9bd5}.auth-card button{border:1px solid #3e78a8;background:#12314c;color:#fff;border-radius:8px;padding:10px;font-weight:900;cursor:pointer}.auth-error{min-height:14px;color:#ff8e9e}.account-badge{position:fixed;right:10px;bottom:10px;z-index:9990;display:flex;align-items:center;gap:6px;border:1px solid #30445e;background:rgba(7,16,27,.94);padding:6px 7px;border-radius:9px;font-size:9px;color:#b9cadb}.account-badge[hidden]{display:none!important}.account-badge span{color:#7fc5ff;font-weight:900}.account-badge strong{font-size:10px}.account-badge button{border:1px solid #493849;background:#1a1018;color:#e9a4b4;border-radius:6px;padding:4px 6px;font-size:8px;font-weight:900;cursor:pointer}
html[data-role="user"] #setupWatchSave,html[data-role="user"] #setupWatchAdd{opacity:.55}


/* V8.9.65 — compact scanner controls and card-style results */
.setup-watch-picker-row{padding:0 10px 8px;display:grid;grid-template-columns:minmax(0,1fr) 72px;gap:8px!important;align-items:stretch}
#setupWatchPicker{width:100%;min-width:0;height:34px;border:1px solid #31435a;border-radius:7px;background:#091321;color:#dbe6f3;padding:0 10px;font-size:10px;font-weight:800;outline:none}
#setupWatchPicker:focus{border-color:#38d3ca;box-shadow:0 0 0 2px rgba(56,211,202,.10)}
#setupWatchAdd{height:34px;border-radius:7px;font-size:9px;font-weight:900}
.setup-watch-selected{padding:0 10px;margin:0 0 9px;display:flex;flex-wrap:wrap;gap:6px}
.setup-watch-actions{padding:9px 10px;border-top:1px solid #1f2d40;display:grid;grid-template-columns:minmax(110px,1fr) minmax(100px,1fr) auto;gap:8px;align-items:center}
.setup-watch-actions button{min-height:34px}
.setup-watch-results{padding:8px 10px 10px;border-top:1px solid #1f2d40;display:grid;grid-template-columns:1fr;gap:7px}
.setup-watch-row{min-height:0;padding:9px 10px;display:grid;grid-template-columns:58px 94px minmax(0,1fr);gap:9px;align-items:start;border:1px solid #22334a!important;border-radius:8px;background:#08121f}
.setup-watch-row:last-child{border-bottom:1px solid #22334a!important}
.setup-watch-symbol-name{padding-top:5px}
.setup-watch-detail strong,.setup-watch-detail small{white-space:normal;overflow:visible;text-overflow:clip;word-break:break-word}
.setup-watch-detail strong{line-height:1.35}.setup-watch-detail small{line-height:1.4}
.yahoo-api-guard{margin:0 10px 10px;border:1px solid #22334a;border-radius:8px;overflow:hidden;background:#08121f}
#chartProDte{white-space:nowrap;min-width:54px;text-align:center}
@media(max-width:700px){.setup-watch-picker-row{grid-template-columns:1fr 64px}.setup-watch-actions{grid-template-columns:1fr 1fr}.setup-watch-actions #setupWatchScannerState{grid-column:1/-1;justify-self:start}.setup-watch-row{grid-template-columns:52px 86px minmax(0,1fr)}}

/* V8.9.67 email registration */
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#07101b;border:1px solid #24364a;border-radius:9px;padding:4px}
.auth-tabs button{background:transparent;border:0;color:#8196aa;padding:8px;border-radius:6px;font-weight:900;cursor:pointer}
.auth-tabs button.active{background:#12314c;color:#fff}
.auth-form{display:grid;gap:12px}
.auth-form[hidden]{display:none!important}
.auth-card{direction:rtl}.auth-card label span,.auth-card input{direction:ltr;text-align:left}