:root {
  --cgex-bg: #090c10;
  --cgex-panel: #10141a;
  --cgex-panel-2: #151a22;
  --cgex-border: #282e38;
  --cgex-text: #e6e9ef;
  --cgex-muted: #7f8794;
  --cgex-green: #61d66f;
  --cgex-red: #ff626d;
  --cgex-cyan: #64d7e7;
  --cgex-blue: #4e82ff;
  --cgex-gold: #f4c75a;
}

.cgex-surface-panel { margin:14px; padding:16px; background:var(--cgex-ui-bg, #10141a); border:1px solid var(--cgex-ui-border, #282e38); border-radius:8px; }
.cgex-surface-toolbar { display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap; margin:16px 0 10px; }
.cgex-surface-toolbar .cgex-control { min-width:220px; }
#cgex-trade-iv-chart { height:590px; min-height:590px; }
.cgex-surface-actions { display:flex; gap:6px; padding-bottom:2px; }
.cgex-surface-button { cursor:pointer; background:var(--cgex-ui-panel, #151a22); color:var(--cgex-ui-text, #aeb9c9); border:1px solid var(--cgex-ui-border, #303b4b); border-radius:5px; min-width:38px; padding:9px 12px; font:inherit; font-size:12px; }
.cgex-surface-button:hover, .cgex-surface-button:focus-visible { background:var(--cgex-ui-field, #24334c); color:var(--cgex-ui-text, white); }
.cgex-surface-button.is-active { color:var(--cgex-ui-blue, #85b4ff); background:var(--cgex-ui-field, #1b2e4d); border-color:var(--cgex-ui-border, #4676bb); }
.cgex-surface-chart { height:650px; overscroll-behavior:contain; }
.cgex-surface-ceiling { width:100%; height:36px; padding:8px 12px; background:var(--cgex-ui-panel, #151a22); color:var(--cgex-ui-text, #e6e9ef); border:1px solid var(--cgex-ui-border, #303b4b); border-radius:5px; font:inherit; }
.cgex-surface-ceiling:focus { outline:1px solid var(--cgex-ui-border, #4676bb); }

.cgex-gamma-surface-controls { align-items:center; gap:24px; padding:14px 18px 8px; background:var(--cgex-ui-bg, #10141a); border-bottom:1px solid var(--cgex-ui-border, #282e38); flex-wrap:wrap; }
.cgex-gamma-surface-controls > div { flex:1; min-width:170px; max-width:280px; }
.cgex-gamma-surface-controls > div > span { display:block; margin-bottom:10px; color:var(--cgex-ui-muted, #7f8794); font-size:9px; font-weight:750; letter-spacing:.08em; }
.cgex-gamma-surface-controls .cgex-method { flex:2; min-width:220px; margin:0; color:var(--cgex-ui-muted, #9aa9b9); }

html,
body,
#react-entry-point,
#_dash-app-content {
  margin:0;
  min-height:100%;
  background:var(--cgex-bg);
}

.cgex-shell,
.cgex-shell * {
  box-sizing:border-box;
}

.cgex-shell {
  min-height:100vh;
  color:var(--cgex-text);
  background:radial-gradient(circle at 70% -10%, rgb(var(--cgex-rgb-soft, 55 103 167) / 0.09), transparent 35%),
    var(--cgex-bg);
  font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.cgex-topbar {
  height:54px;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid var(--cgex-border);
  background:rgb(var(--cgex-rgb-bg, 13 17 22) / 0.96);
}

.cgex-brand,
.cgex-status,
.cgex-metricbar,
.cgex-metric {
  display:flex;
  align-items:center;
}

.cgex-brand {
  gap:10px;
  min-width:0;
  flex-shrink:0;
  white-space:nowrap;
}

.cgex-brand-mark {
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border:1px solid rgb(var(--cgex-rgb-accent, 100 215 231) / 0.45);
  border-radius:5px;
  color:var(--cgex-cyan);
  background:rgb(var(--cgex-rgb-soft, 100 215 231) / 0.08);
  box-shadow:inset 0 0 16px rgb(var(--cgex-ui-shadow, 0 0 0) / 0.05);
  font-family:Georgia, serif;
  font-size:18px;
  font-weight:700;
}

.cgex-brand-title {
  font-size:14px;
  font-weight:760;
  line-height:1;
  letter-spacing:.02em;
}

.cgex-brand-subtitle {
  margin-top:4px;
  color:var(--cgex-muted);
  font-size:9px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.cgex-pill {
  padding:4px 7px;
  color:var(--cgex-ui-muted, #aab1bc);
  border:1px solid var(--cgex-border);
  border-radius:3px;
  background:var(--cgex-ui-panel, #141920);
  font-size:9px;
  font-weight:750;
  letter-spacing:.07em;
}

.cgex-pill-sign {
  color:var(--cgex-gold);
  border-color:rgb(var(--cgex-rgb-accent, 244 199 90) / 0.35);
  background:rgb(var(--cgex-rgb-soft, 244 199 90) / 0.06);
}

.cgex-pill-asof {
  color:var(--cgex-green);
  border-color:rgb(var(--cgex-rgb-accent, 97 214 111) / 0.36);
  background:rgb(var(--cgex-rgb-soft, 97 214 111) / 0.07);
}

.cgex-status {
  min-width:0;
  gap:8px;
  color:var(--cgex-muted);
  font-size:10px;
  white-space:normal;
  line-height:1.35;
  overflow:hidden;
  text-overflow:ellipsis;
}

.cgex-live-dot {
  width:7px;
  height:7px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--cgex-green);
  box-shadow:0 0 0 3px rgb(var(--cgex-ui-shadow, 0 0 0) / 0.09), 0 0 12px rgb(var(--cgex-ui-shadow, 0 0 0) / 0.42);
}

.cgex-toolbar {
  position:relative;
  z-index:50;
  min-height:66px;
  padding:7px 10px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(135px, 1fr));
  gap:7px;
  border-bottom:1px solid var(--cgex-border);
  background:var(--cgex-ui-bg, #0f1319);
}

.cgex-control {
  min-width:0;
}

.cgex-control-label {
  height:17px;
  padding-left:2px;
  color:var(--cgex-ui-subtle, #68717e);
  font-size:8px;
  font-weight:800;
  line-height:15px;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.cgex-tpo-toggle {
  height:35px;
  padding:0 9px;
  display:flex;
  align-items:center;
  border:1px solid var(--cgex-border);
  border-radius:3px;
  background:var(--cgex-panel);
}

.cgex-tpo-toggle label {
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--cgex-text);
  cursor:pointer;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
}

.cgex-tpo-toggle input {
  position:relative;
  width:32px;
  height:17px;
  margin:0;
  flex:0 0 auto;
  appearance:none;
  border:1px solid var(--cgex-ui-border, #39414d);
  border-radius:999px;
  background:var(--cgex-ui-field, #222832);
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}

.cgex-tpo-toggle input::after {
  position:absolute;
  top:2px;
  left:2px;
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--cgex-ui-soft, #7f8794);
  content:"";
  transition:transform .15s ease, background .15s ease;
}

.cgex-tpo-toggle input:checked {
  border-color:rgb(var(--cgex-rgb-accent, 97 214 111) / 0.68);
  background:rgb(var(--cgex-rgb-soft, 97 214 111) / 0.22);
}

.cgex-tpo-toggle input:checked::after {
  transform:translateX(15px);
  background:var(--cgex-green);
  box-shadow:0 0 8px rgb(var(--cgex-ui-shadow, 0 0 0) / 0.4);
}

.cgex-tpo-toggle input:focus-visible {
  outline:2px solid var(--cgex-cyan);
  outline-offset:2px;
}

.cgex-dropdown .Select-control {
  height:35px;
  border:1px solid var(--cgex-border) !important;
  border-radius:3px;
  background:var(--cgex-panel) !important;
  box-shadow:none !important;
}

.cgex-dropdown .Select-value,
.cgex-dropdown .Select-value-label,
.cgex-dropdown .Select-placeholder,
.cgex-dropdown .Select-input,
.cgex-dropdown .Select-input > input {
  color:var(--cgex-text) !important;
  font-size:11px;
  line-height:33px !important;
}

.cgex-dropdown .Select-arrow {
  border-top-color:var(--cgex-ui-border, #747d89);
}

.cgex-dropdown .Select-menu-outer {
  z-index:1000;
  color:var(--cgex-text);
  border:1px solid var(--cgex-border);
  background:var(--cgex-ui-panel, #181d25);
  box-shadow:0 12px 30px rgb(var(--cgex-ui-shadow, 0 0 0) / 0.45);
}

.cgex-dropdown .VirtualizedSelectOption {
  color:var(--cgex-ui-text, #b8bec8);
  background:var(--cgex-ui-panel, #181d25);
  font-size:11px;
}

.cgex-dropdown .VirtualizedSelectFocusedOption {
  color:var(--cgex-ui-text, #fff);
  background:var(--cgex-ui-field, #252b35);
}

.cgex-time-wrap {
  position:relative;
  min-height:35px;
  padding:2px 55px 0 8px;
  border:1px solid var(--cgex-border);
  border-radius:3px;
  background:var(--cgex-panel);
}

.cgex-time-label {
  position:absolute;
  right:10px;
  top:8px;
  color:var(--cgex-cyan);
  font-family:"SFMono-Regular", Consolas, monospace;
  font-size:11px;
  font-weight:750;
}

.cgex-replay-controls { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:17px 0 8px; }
.cgex-replay-controls .cgex-surface-button { padding:5px 14px; }
.cgex-replay-controls .cgex-surface-button:disabled { opacity:.4; cursor:default; }

.cgex-time-wrap .rc-slider {
  margin-top:3px;
}

.cgex-time-wrap .rc-slider-rail {
  background:var(--cgex-ui-field, #2a3039);
}

.cgex-time-wrap .rc-slider-track {
  background:var(--cgex-cyan);
}

.cgex-time-wrap .rc-slider-handle {
  border-color:var(--cgex-cyan);
  background:var(--cgex-ui-bg, #0f151b);
}

.cgex-time-wrap .rc-slider-mark-text {
  color:var(--cgex-ui-subtle, #59616d);
  font-size:8px;
}

.cgex-metricbar {
  min-height:44px;
  overflow-x:auto;
  border-bottom:1px solid var(--cgex-border);
  background:var(--cgex-ui-bg, #0c1015);
}

.cgex-metric {
  min-width:130px;
  height:28px;
  padding:0 16px;
  gap:8px;
  border-right:1px solid var(--cgex-border);
  white-space:nowrap;
}

.cgex-metric.cgex-vix-term {
  min-width:190px;
}

.cgex-metric-label {
  color:var(--cgex-ui-muted, #69727e);
  font-size:8px;
  font-weight:800;
  letter-spacing:.09em;
}

.cgex-metric-value {
  color:var(--cgex-ui-text, #dfe3ea);
  font-family:"SFMono-Regular", Consolas, monospace;
  font-size:12px;
  font-weight:760;
}

.cgex-positive .cgex-metric-value,
.cgex-positive {
  color:var(--cgex-green);
}

.cgex-negative .cgex-metric-value,
.cgex-negative {
  color:var(--cgex-red);
}

.cgex-zero .cgex-metric-value,
.cgex-zero {
  color:var(--cgex-gold);
}

.cgex-main {
  min-height:710px;
  display:grid;
  grid-template-columns:minmax(0, 1fr) 310px;
  gap:0;
  border-bottom:1px solid var(--cgex-border);
}

.cgex-chart-panel {
  min-width:0;
  background:var(--cgex-bg);
}

.cgex-opposite-heading {
  padding:18px 16px 10px;
  border-top:1px solid var(--cgex-border);
  background:var(--cgex-panel);
}

.cgex-opposite-heading .cgex-method { max-width:1000px; font-size:12px; line-height:1.6; }
.cgex-opposite-summary { color:var(--cgex-cyan); font-size:12px; line-height:1.8; }

.cgex-chart,
.cgex-chart .js-plotly-plot,
.cgex-chart .plot-container,
.cgex-chart .svg-container {
  width:100% !important;
  height:710px !important;
}

.cgex-chart {
  position:relative;
  touch-action:none;
}

.dash-graph[id^="cgex-"] .nsewdrag {
  cursor:crosshair !important;
}

.dash-graph[id^="cgex-"].cgex-tv-panning .nsewdrag,
.dash-graph[id^="cgex-"] .nsewdrag:active {
  cursor:grabbing !important;
}

#cgex-tv-crosshair {
  position:fixed;
  inset:0;
  z-index:70;
  opacity:0;
  pointer-events:none;
  transition:opacity 40ms linear;
}

#cgex-tv-crosshair.is-visible {
  opacity:1;
}

.cgex-tv-crosshair-x,
.cgex-tv-crosshair-y {
  position:fixed;
  background:rgb(var(--cgex-rgb-soft, 203 213 225) / 0.54);
  box-shadow:0 0 0 .5px rgb(var(--cgex-ui-shadow, 0 0 0) / 0.52);
  will-change:transform, width, height;
}

.cgex-tv-crosshair-x {
  width:1px;
}

.cgex-tv-crosshair-y {
  height:1px;
}

.cgex-tv-axis-label {
  position:fixed;
  min-width:54px;
  padding:4px 6px;
  color:var(--cgex-ui-text, #f8fafc);
  border:1px solid var(--cgex-ui-border, #526171);
  border-radius:2px;
  background:var(--cgex-ui-field, #2b3541);
  box-shadow:0 2px 8px rgb(var(--cgex-ui-shadow, 0 0 0) / 0.28);
  font-family:"SFMono-Regular", Consolas, monospace;
  font-size:10px;
  font-weight:700;
  line-height:1;
  text-align:center;
  white-space:nowrap;
  will-change:transform;
}

.cgex-tv-price-label {
  transform:translateY(-50%);
}

.cgex-tv-x-label {
  transform:translate(-50%, 4px);
}

.cgex-sidebar {
  padding:9px;
  display:flex;
  flex-direction:column;
  gap:8px;
  border-left:1px solid var(--cgex-border);
  background:var(--cgex-ui-bg, #0d1116);
}

.cgex-card {
  padding:10px 11px;
  border:1px solid var(--cgex-ui-border, #252b34);
  border-radius:4px;
  background:linear-gradient(180deg, var(--cgex-ui-bg, #12171e), var(--cgex-ui-bg, #0f141a));
}

.cgex-card-title {
  margin-bottom:7px;
  padding-bottom:7px;
  color:var(--cgex-ui-muted, #9aa2ad);
  border-bottom:1px solid var(--cgex-ui-border, #252b34);
  font-size:9px;
  font-weight:820;
  letter-spacing:.1em;
}

.cgex-card-volume {
  color:var(--cgex-cyan);
}

.cgex-card-oi {
  color:var(--cgex-blue);
}

.cgex-card-row {
  min-height:23px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--cgex-ui-muted, #777f8a);
  font-size:10px;
}

.cgex-card-row-wall {
  align-items:flex-start;
}

.cgex-wall-value {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
}

.cgex-wall-detail {
  color:var(--cgex-muted);
  font-family:SFMono-Regular, Consolas, monospace;
  font-size:9px;
  font-weight:600;
  white-space:nowrap;
}

.cgex-card-row b {
  color:var(--cgex-ui-text, #d9dde5);
  font-family:"SFMono-Regular", Consolas, monospace;
  font-size:10px;
}

.cgex-change-grid {
  display:grid;
  gap:2px;
}

.cgex-change-row {
  min-height:24px;
  display:grid;
  grid-template-columns:36px 1fr 88px;
  align-items:center;
  gap:7px;
  border-bottom:1px solid rgb(var(--cgex-rgb-border, 40 46 56) / 0.7);
  font-family:"SFMono-Regular", Consolas, monospace;
  font-size:9px;
}

.cgex-change-window {
  color:var(--cgex-ui-muted, #6f7783);
}

.cgex-change-strike {
  color:var(--cgex-ui-text, #d8dce3);
  text-align:right;
}

.cgex-change-value {
  text-align:right;
}

.cgex-method {
  margin:0 0 8px;
  color:var(--cgex-ui-muted, #a3aab5);
  font-size:9px;
  line-height:1.5;
}

.cgex-method-muted {
  color:var(--cgex-ui-subtle, #69717c);
}

.cgex-link {
  color:var(--cgex-cyan);
  font-size:9px;
  text-decoration:none;
}

.cgex-table-panel {
  padding:14px;
  background:var(--cgex-ui-bg, #0c1015);
}

.cgex-reaction-panel {
  padding:12px 14px 14px;
  border-bottom:1px solid var(--cgex-border);
  background:var(--cgex-ui-bg, #0b0f14);
}

.cgex-reaction-heading {
  min-height:34px;
  margin-bottom:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.cgex-reaction-title {
  color:var(--cgex-ui-text, #cbd0d8);
  font-size:10px;
  font-weight:820;
  letter-spacing:.1em;
}

.cgex-reaction-subtitle,
.cgex-vol-quality {
  margin-top:4px;
  color:var(--cgex-ui-subtle, #69717c);
  font-size:9px;
}

.cgex-vol-quality {
  margin-top:0;
  color:var(--cgex-ui-muted, #8f98a5);
  font-family:"SFMono-Regular", Consolas, monospace;
  text-align:right;
}

.cgex-reaction-group-title {
  margin:2px 0 7px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  color:var(--cgex-ui-muted, #858e9a);
  font-size:9px;
  font-weight:760;
  letter-spacing:.08em;
}

.cgex-reaction-group-note {
  color:var(--cgex-ui-subtle, #616a76);
  font-family:"SFMono-Regular", Consolas, monospace;
  font-size:8px;
  font-weight:500;
  letter-spacing:.02em;
  text-align:right;
}

.cgex-reaction-group-title-secondary {
  margin-top:14px;
}

.cgex-wall-diagnostic-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}

.cgex-diagnostic-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
}

.cgex-diagnostic-panel {
  min-width:0;
  overflow:hidden;
  border:1px solid var(--cgex-ui-border, #252b34);
  border-radius:4px;
  background:var(--cgex-bg);
}

.cgex-diagnostic-panel-wide {
  grid-column:1 / -1;
}

.cgex-diagnostic-chart,
.cgex-diagnostic-chart .js-plotly-plot,
.cgex-diagnostic-chart .plot-container,
.cgex-diagnostic-chart .svg-container {
  width:100% !important;
  height:310px !important;
}

.cgex-wall-diagnostic-chart,
.cgex-wall-diagnostic-chart .js-plotly-plot,
.cgex-wall-diagnostic-chart .plot-container,
.cgex-wall-diagnostic-chart .svg-container {
  width:100% !important;
  height:280px !important;
}

.cgex-table-heading {
  margin-bottom:8px;
  display:flex;
  align-items:baseline;
  gap:10px;
}

.cgex-table-title {
  color:var(--cgex-ui-text, #cbd0d8);
  font-size:10px;
  font-weight:820;
  letter-spacing:.1em;
}

.cgex-table-subtitle {
  color:var(--cgex-ui-subtle, #626b77);
  font-size:9px;
}

@media (max-width:1300px) {
  .cgex-toolbar {
    grid-template-columns:repeat(3, minmax(110px, 1fr));
  }

  .cgex-control-time {
    grid-column:1 / -1;
  }

  .cgex-main {
    grid-template-columns:1fr;
  }

  .cgex-sidebar {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    border-top:1px solid var(--cgex-border);
    border-left:none;
  }

  .cgex-diagnostic-grid,
  .cgex-wall-diagnostic-grid {
    grid-template-columns:1fr;
  }
}

@media (max-width:700px) {
  .cgex-brand-subtitle,
  .cgex-pill,
  .cgex-status {
    display:none;
  }

  .cgex-toolbar {
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .cgex-control-time {
    grid-column:1 / -1;
  }

  .cgex-metric {
    min-width:130px;
  }

  .cgex-sidebar {
    grid-template-columns:1fr;
  }


  .cgex-reaction-heading {
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }

  .cgex-reaction-group-title {
    align-items:flex-start;
    flex-direction:column;
    gap:3px;
  }

  .cgex-reaction-group-note {
    text-align:left;
  }

  .cgex-vol-quality {
    text-align:left;
  }
}

.cgex-control-time { grid-column:1 / -1; }

#cgex-strike-history-popup {
  position:fixed;
  z-index:10020;
  width:344px;
  max-width:calc(100vw - 16px);
  padding:14px;
  box-sizing:border-box;
  background:var(--cgex-ui-bg, #101722);
  border:1px solid var(--cgex-ui-border, #3a4b60);
  border-radius:9px;
  box-shadow:0 8px 32px rgb(var(--cgex-ui-shadow, 0 0 0) / 0.6);
  color:var(--cgex-ui-text, #e6e9ef);
  pointer-events:none;
  font-family:Inter, Segoe UI, sans-serif;
}
#cgex-strike-history-popup[hidden] { display:none; }
.cgex-history-open .hoverlayer { visibility:hidden; }
.cgex-strike-history-title { display:block; font-size:12px; margin-bottom:8px; }
.cgex-strike-history-trend { font-size:14px; font-weight:700; }
.cgex-strike-history-change { margin-top:4px; color:var(--cgex-ui-text, #c1cad8); font-size:11px; }
#cgex-strike-history-popup svg { display:block; width:100%; margin-top:5px; }
.cgex-strike-history-legend { color:var(--cgex-ui-cyan, #64d7e7); font-size:10px; margin-bottom:8px; }
.cgex-strike-history-detail { font-size:10px; color:var(--cgex-ui-text, #c1cad8); line-height:1.7; }
.cgex-strike-history-note { margin-top:8px; font-size:10px; color:var(--cgex-ui-muted, #8494aa); line-height:1.4; }
.cgex-strike-history-empty { padding:18px 0; color:var(--cgex-ui-muted, #8494aa); font-size:11px; }