/* LEVEXES workspace: one site header, one instrument bar, a full-width chart. */
:root {
  --studio-bg: #0b1018;
  --studio-panel: #111925;
  --studio-raised: #1b2637;
  --studio-line: #29364a;
  --studio-muted: #9ba9bd;
  --studio-accent: #b6d0ff;
  --studio-positive: #38dcac;
  --studio-negative: #ff758b;
}

/* Volatility & Greeks desk */
html .levexes-surface .dm-simple-main[data-lx-active-workspace="volatility"] > #surface-controls {
  display: none;
}
.lx-vol-workspace {
  --vol-panel: #0f1621;
  --vol-panel-raised: #141e2b;
  --vol-line: #273448;
  --vol-text: #edf3fb;
  --vol-muted: #91a1b6;
  --vol-violet: #9c72ff;
  --vol-blue: #6fa8ff;
  --vol-gold: #e8bf6c;
  --vol-positive: #20cc79;
  --vol-negative: #ff5369;
  display: grid;
  gap: 18px;
  padding: 22px 0 36px;
  color: var(--vol-text);
}
.lx-vol-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  min-height: 126px;
  padding: 24px 26px;
  border: 1px solid var(--vol-line);
  border-radius: 16px;
  background: #101925;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .16);
}
.lx-vol-hero-copy { max-width: 780px; }
.lx-vol-hero .dm-mini-kicker { color: #91b4ee; letter-spacing: .15em; }
.lx-vol-hero h2 { margin: 8px 0 7px; font: 600 clamp(23px, 2.2vw, 34px)/1.15 Inter, sans-serif; letter-spacing: -.04em; }
.lx-vol-hero p { max-width: 720px; margin: 0; color: var(--vol-muted); font-size: 14px; line-height: 1.65; }
.lx-vol-hero-actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.lx-vol-live { display: inline-flex; align-items: center; gap: 8px; color: #aebcd0; font-size: 12px; white-space: nowrap; }
.lx-vol-live i,
.lx-vol-panel-status i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #77869b; box-shadow: 0 0 0 4px rgba(119, 134, 155, .12); }
.lx-vol-live[data-state="ready"] i,
.lx-vol-panel-status[data-state="ready"] i { background: var(--vol-positive); box-shadow: 0 0 0 4px rgba(32, 204, 121, .11); }
.lx-vol-live[data-state="error"] i,
.lx-vol-panel-status[data-state="error"] i { background: var(--vol-negative); box-shadow: 0 0 0 4px rgba(255, 83, 105, .11); }
.lx-vol-refresh-all,
.lx-vol-icon-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 14px; border: 1px solid #39506f; border-radius: 8px;
  background: #1a2940; color: #dce9fb; font: 600 12px Inter, sans-serif; cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.lx-vol-refresh-all:hover,
.lx-vol-icon-button:hover { border-color: #6685af; background: #21344f; transform: translateY(-1px); }
.lx-vol-refresh-all svg,
.lx-vol-icon-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lx-vol-refresh-all.is-loading svg,
.lx-vol-icon-button.is-loading svg { animation: lx-vol-spin .8s linear infinite; }
@keyframes lx-vol-spin { to { transform: rotate(360deg); } }

.lx-vol-guide {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  overflow: hidden; border: 1px solid var(--vol-line); border-radius: 14px; background: var(--vol-line);
}
.lx-vol-guide article { display: flex; align-items: flex-start; gap: 14px; min-height: 94px; padding: 20px 22px; background: #0e1621; }
.lx-vol-guide article > span { display: grid; place-items: center; width: 29px; height: 29px; flex: 0 0 auto; border: 1px solid #34445c; border-radius: 8px; color: #8faee0; font: 600 11px "JetBrains Mono", monospace; }
.lx-vol-guide strong { display: block; margin: 1px 0 5px; color: #dde7f4; font-size: 13px; }
.lx-vol-guide p { margin: 0; color: #8191a6; font-size: 12px; line-height: 1.5; }

.lx-vol-card {
  position: relative; overflow: hidden; min-width: 0; padding: 22px 24px 18px;
  border: 1px solid var(--vol-line); border-radius: 16px; background: var(--vol-panel);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .12);
  transition: border-color .24s ease, box-shadow .24s ease, transform .24s ease;
}
.lx-vol-card:hover { border-color: #34445a; box-shadow: 0 20px 54px rgba(0, 0, 0, .18); }
.lx-vol-card::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 2px; background: #7d61c7; opacity: .62; }
.lx-vol-card.is-vanna::before { background: var(--vol-violet); }
.lx-vol-card.is-charm::before { background: var(--vol-gold); }
.lx-vol-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.lx-vol-title-row { display: flex; align-items: center; gap: 10px; }
.lx-vol-title-row h3 { margin: 0; color: var(--vol-text); font: 600 18px/1.25 Inter, sans-serif; letter-spacing: -.02em; }
.lx-vol-card-head p { margin: 7px 0 0; color: var(--vol-muted); font-size: 12px; line-height: 1.55; }
.lx-vol-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border: 1px solid #40506a; border-radius: 6px; background: #172132; color: #dbe5f3; font: 700 10px/1 "JetBrains Mono", monospace; letter-spacing: .1em; }
.lx-vol-badge.is-violet { border-color: rgba(156, 114, 255, .55); color: #c7b3ff; }
.lx-vol-badge.is-blue { border-color: rgba(111, 168, 255, .5); color: #acd0ff; }
.lx-vol-badge.is-gold { border-color: rgba(232, 191, 108, .52); color: #f2d59a; }
.lx-vol-panel-status { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; color: #8999ad; font-size: 11px; white-space: nowrap; }

.lx-vol-controls {
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px;
  margin: 19px 0 12px; padding: 13px 14px; border: 1px solid #243146; border-radius: 11px; background: #111b28;
}
.lx-vol-controls label { display: grid; gap: 6px; min-width: 96px; }
.lx-vol-controls label > span { color: #8393a9; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.lx-vol-controls input:not([type="range"]),
.lx-vol-controls select {
  height: 36px; min-height: 36px; padding: 0 10px; border: 1px solid #314059; border-radius: 7px;
  outline: 0; background: #172233; color: #e6edf7; font: 600 12px Inter, sans-serif;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.lx-vol-controls input:not([type="range"]):focus,
.lx-vol-controls select:focus { border-color: #7097cb; box-shadow: 0 0 0 3px rgba(112, 151, 203, .13); }
.lx-vol-controls input:not([type="range"]) { width: 90px; font-size: 14px; text-transform: uppercase; }
.lx-vol-controls .is-expiration select { min-width: 176px; }
.lx-vol-range { flex: 1 1 230px; min-width: 190px !important; padding: 0 4px; }
.lx-vol-range span { display: flex; justify-content: space-between; gap: 16px; }
.lx-vol-range output { color: #bba6f5; font: 600 10px "JetBrains Mono", monospace; }
.lx-vol-range input { width: 100%; height: 18px; margin: 0; accent-color: var(--vol-violet); cursor: pointer; }
.lx-vol-icon-button { width: 38px; min-width: 38px; height: 36px; min-height: 36px; padding: 0; }

.lx-vol-smile-layout { display: grid; grid-template-columns: minmax(0, 1fr) 286px; gap: 18px; min-width: 0; }
.lx-vol-chart-column { min-width: 0; }
.lx-vol-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin-bottom: 8px; border: 1px solid #243247; border-radius: 10px; background: #243247; }
.lx-vol-kpis > div { min-width: 0; padding: 12px 14px; background: #101925; }
.lx-vol-kpis > div.is-primary { background: #162139; }
.lx-vol-kpis span,
.lx-vol-exposure-readout small { display: block; color: #8393a8; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.lx-vol-kpis strong { display: block; margin: 6px 0 3px; color: #e9f0fa; font: 600 17px "JetBrains Mono", monospace; }
.lx-vol-kpis .is-primary strong { color: #bda7ff; }
.lx-vol-kpis small { display: block; overflow: hidden; color: #728196; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.lx-vol-chart { position: relative; width: 100%; min-width: 0; }
.lx-vol-smile-chart { height: 388px; }
.lx-vol-exposure-chart { height: 390px; }
.lx-vol-card[data-state="loading"] .lx-vol-chart { opacity: .45; }
.lx-vol-card[data-state="loading"] .lx-vol-chart::after {
  content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: 1px; background: #526784;
  animation: lx-vol-scan 1.35s ease-in-out infinite alternate;
}
@keyframes lx-vol-scan { from { transform: scaleX(.2); opacity: .22; } to { transform: scaleX(1); opacity: .72; } }
.lx-vol-chart-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 34px; padding: 8px 2px 0; border-top: 1px solid #202c3d; color: #7f8ea2; font-size: 10px; }
.lx-vol-legend { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.lx-vol-legend i { display: inline-block; width: 18px; height: 2px; margin-left: 5px; background: #9b74ff; }
.lx-vol-legend i.is-dot { width: 7px; height: 7px; border: 1px solid #d9cfff; border-radius: 50%; background: #101925; }
.lx-vol-legend i.is-positive { background: var(--vol-positive); }
.lx-vol-legend i.is-negative { background: var(--vol-negative); }
.lx-vol-legend i.is-spot { width: 1px; height: 11px; border-left: 1px dashed #b8c3d1; background: transparent; }

.lx-vol-spread { display: flex; flex-direction: column; min-width: 0; padding: 17px 17px 14px; border: 1px solid #28364a; border-radius: 12px; background: #111b28; }
.lx-vol-spread-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lx-vol-spread-head small { color: #74849a; font-size: 10px; }
.lx-vol-spread h3 { margin: 18px 0 7px; color: #cbd6e4; font-size: 12px; font-weight: 600; }
.lx-vol-spread-value { color: #e8eef8; font: 600 36px/1 "JetBrains Mono", monospace; letter-spacing: -.05em; }
.lx-vol-spread[data-tone="positive"] .lx-vol-spread-value { color: #8fbaff; }
.lx-vol-spread[data-tone="negative"] .lx-vol-spread-value { color: #e8bf6c; }
.lx-vol-spread > p { min-height: 34px; margin: 8px 0 3px; color: #8797ab; font-size: 11px; line-height: 1.5; }
.lx-vol-spread-chart { width: 100%; height: 138px; margin-top: auto; }
.lx-vol-spread-values { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.lx-vol-spread-values div { padding: 10px; border: 1px solid #263347; border-radius: 8px; background: #0e1722; }
.lx-vol-spread-values dt { color: #76869c; font-size: 9px; line-height: 1.3; }
.lx-vol-spread-values dd { margin: 5px 0 0; color: #d9e3f0; font: 600 13px "JetBrains Mono", monospace; }
.lx-vol-spread-asof { display: block; margin-top: 10px; color: #6f8095; font-size: 9px; line-height: 1.45; }

.lx-vol-exposure-readout { display: flex; align-items: stretch; gap: 1px; overflow: hidden; margin: 2px 0 4px; border: 1px solid #233044; border-radius: 10px; background: #233044; }
.lx-vol-exposure-readout > span { flex: 0 1 210px; min-width: 145px; padding: 11px 14px; background: #101925; }
.lx-vol-exposure-readout > span.is-coverage { flex: 1 1 auto; }
.lx-vol-exposure-readout strong { display: block; overflow: hidden; margin-top: 5px; color: #dce6f2; font: 600 14px "JetBrains Mono", monospace; text-overflow: ellipsis; white-space: nowrap; }
.lx-vol-card.is-vanna .lx-vol-exposure-readout > span:first-child strong { color: #bea9ff; }
.lx-vol-card.is-charm .lx-vol-exposure-readout > span:first-child strong { color: #efd18d; }

@media (max-width: 1050px) {
  .lx-vol-hero { align-items: flex-start; flex-direction: column; }
  .lx-vol-hero-actions { width: 100%; justify-content: space-between; }
  .lx-vol-smile-layout { grid-template-columns: 1fr; }
  .lx-vol-spread { display: grid; grid-template-columns: minmax(170px, .7fr) minmax(220px, 1fr); column-gap: 20px; align-items: center; }
  .lx-vol-spread-head, .lx-vol-spread h3, .lx-vol-spread-value, .lx-vol-spread > p, .lx-vol-spread-asof { grid-column: 1; }
  .lx-vol-spread-chart { grid-column: 2; grid-row: 1 / span 5; height: 170px; }
  .lx-vol-spread-values { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .lx-vol-workspace { gap: 12px; padding-top: 14px; }
  .lx-vol-hero { min-height: 0; padding: 20px; border-radius: 12px; }
  .lx-vol-hero-actions { align-items: flex-start; flex-direction: column; }
  .lx-vol-guide { grid-template-columns: 1fr; }
  .lx-vol-guide article { min-height: 0; }
  .lx-vol-card { padding: 18px 14px 14px; border-radius: 12px; }
  .lx-vol-card-head { flex-direction: column; gap: 8px; }
  .lx-vol-controls { align-items: stretch; gap: 9px; padding: 11px; }
  .lx-vol-controls label { flex: 1 1 calc(50% - 9px); }
  .lx-vol-controls input:not([type="range"]), .lx-vol-controls select { width: 100%; }
  .lx-vol-controls .is-expiration select { min-width: 0; }
  .lx-vol-range { flex-basis: 100%; }
  .lx-vol-icon-button { align-self: end; }
  .lx-vol-kpis { grid-template-columns: repeat(2, 1fr); }
  .lx-vol-smile-chart, .lx-vol-exposure-chart { height: 330px; }
  .lx-vol-spread { display: flex; }
  .lx-vol-spread-chart { height: 150px; }
  .lx-vol-exposure-readout { display: grid; grid-template-columns: 1fr 1fr; }
  .lx-vol-exposure-readout > span { min-width: 0; }
  .lx-vol-chart-foot { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .lx-vol-card, .lx-vol-refresh-all, .lx-vol-icon-button { transition: none; }
  .lx-vol-card[data-state="loading"] .lx-vol-chart::after,
  .lx-vol-refresh-all.is-loading svg,
  .lx-vol-icon-button.is-loading svg { animation: none; }
}
html { scroll-padding-top: 80px; }
html .levexes-page :is(.dm-simple-shell, .cot-shell) { display: block !important; width: 100%; max-width: none; margin: 0; padding: 0; }
html .levexes-page :is(.dm-simple-rail, .cot-rail) {
  position: sticky !important; inset: 0 0 auto !important; z-index: 70;
  display: flex !important; flex-direction: row; align-items: center; gap: 6px;
  width: 100%; height: 66px; min-height: 66px; max-height: 66px;
  padding: 0 28px; margin: 0; overflow-x: auto; overflow-y: hidden;
  background: #101722 !important; border: 0; border-bottom: 1px solid #293345;
  border-radius: 0; box-shadow: 0 8px 30px #00000016; scrollbar-width: none;
}
html .levexes-page :is(.dm-simple-rail-mark, .cot-mark) {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto; width: auto;
  height: 50px; min-height: 0; margin: 0 26px 0 0; padding: 0;
  background: transparent !important; border: 0; box-shadow: none;
}
html .levexes-page :is(.dm-simple-rail-logo, .cot-mark > span:first-child) {
  display: grid; place-items: center; width: 30px; height: 34px;
  border: 0; border-radius: 7px; background: #d0dfff; color: #182236;
  font: 700 15px Inter, sans-serif; letter-spacing: -1px;
}
html .levexes-page .lx-rail-wordmark { display: inline; color: #f0f4fc; font-size: 15px; font-weight: 600; letter-spacing: 2px; }
html .levexes-page :is(.dm-simple-rail-btn, .cot-rail-btn) {
  display: inline-flex !important; align-items: center; justify-content: center;
  flex: 0 0 auto; gap: 8px; width: auto; height: 38px; min-height: 38px;
  margin: 0; padding: 8px 12px; border: 1px solid transparent; border-radius: 7px;
  background: transparent; color: #9eacbf; font-size: 13px; font-weight: 500;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
html .levexes-page :is(.dm-simple-rail-btn, .cot-rail-btn)::after { display: none !important; }
html .levexes-page :is(.dm-simple-rail-btn, .cot-rail-btn) svg { width: 17px; height: 17px; flex-shrink: 0; }
html .levexes-page .lx-rail-label { display: inline; }
html .levexes-page :is(.dm-simple-rail-btn, .cot-rail-btn):hover { color: #f0f5ff; background: #1c283a; }
html .levexes-page :is(.dm-simple-rail-btn, .cot-rail-btn).is-active { color: #dbe7ff; background: #233149; border-color: #3b4d69; box-shadow: none; }
html .levexes-page :is(.dm-simple-rail-gap, .cot-rail-gap) { flex: 1 0 12px; min-height: 0; height: auto; margin: 0; }
.lx-header-status { flex: 1 1 120px; margin: 0; min-width: 100px; }
html .levexes-surface .lx-header-status .dm-simple-status { padding: 0; min-height: 0; border: 0; background: transparent; box-shadow: none; }
html .levexes-surface .lx-header-status .dm-simple-status small { display: block; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
html .levexes-page :is(.dm-simple-main, .cot-main) { width: 100%; max-width: 1880px; min-width: 0; margin: 0 auto; padding: 0 28px 40px; }
.lx-workspace-bar { display: flex; align-items: center; gap: 36px; min-width: 0; min-height: 68px; border-bottom: 1px solid #263144; }
html .levexes-surface .lx-surface-hero { display: block; flex: 0 0 auto; margin: 0; padding: 0; min-height: 0; border: 0; background: none; }
html .levexes-surface .lx-surface-hero::after { display: none; }
html .levexes-surface .lx-surface-hero h1 { margin: 0; font: 500 22px/1.3 Inter, sans-serif; letter-spacing: -.7px; }
html .levexes-surface .dm-workspace-jump { position: static; display: flex; align-items: stretch; flex: 1; gap: 4px; width: auto; min-width: 0; min-height: 68px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent !important; box-shadow: none; overflow-x: auto; scrollbar-width: none; }
html .levexes-surface .dm-workspace-jump a { display: flex; align-items: center; flex-shrink: 0; min-height: 68px; margin: 0; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent !important; color: #96a6bd; font-size: 14px; font-weight: 500; }
html .levexes-surface .dm-workspace-jump a:hover { color: #e7efff; }
html .levexes-surface .dm-workspace-jump a.is-active { color: #d4e3ff; border-bottom-color: #adcaff; box-shadow: none; }
html .levexes-surface .dm-workspace-jump .lx-futures-converter {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 68px;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: #a9b9d0;
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
html .levexes-surface .dm-workspace-jump .lx-futures-converter:hover:not(:disabled) {
  color: #eef4ff;
  background: #1c283a;
  transform: none;
}
html .levexes-surface .dm-workspace-jump .lx-futures-converter.is-active {
  color: #d9fff3;
  border-bottom-color: #57d7b0;
  background: #19332e;
}
html .levexes-surface .dm-workspace-jump .lx-futures-converter:disabled {
  color: #5f6d80;
  cursor: not-allowed;
  opacity: .6;
}
html .levexes-surface .dm-workspace-shortcuts { display: none; }
html .levexes-surface .dm-simple-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0; padding: 18px 0; border: 0; background: transparent; box-shadow: none; }
html .levexes-surface .dm-simple-controls .dm-control { display: flex; flex-direction: row; align-items: center; gap: 9px; flex: 0 1 auto; min-width: 0; }
html .levexes-surface .dm-simple-controls .dm-control > span { color: #91a1b8; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; white-space: nowrap; }
html .levexes-surface .dm-simple-controls :is(input, select) { min-height: 40px; height: 40px; padding: 0 12px; border: 1px solid #303c51; border-radius: 7px; background: #172131; font-size: 14px; }
html .levexes-surface .dm-simple-controls #simple-ticker { width: 94px; color: #f2f6ff; font-size: 17px; font-weight: 600; letter-spacing: .4px; }
html .levexes-surface .dm-simple-controls #simple-expiration { width: 157px; }
html .levexes-surface .dm-simple-controls #simple-gamma-window { width: 102px; }
html .levexes-surface .dm-simple-controls .dm-segmented { min-height: 40px; padding: 3px; border: 1px solid #303c51; border-radius: 7px; background: #101722; }
html .levexes-surface .dm-simple-controls .dm-segmented button { min-height: 32px; padding: 5px 13px; font-size: 13px; font-weight: 500; border-radius: 4px; }
html .levexes-surface .dm-simple-controls .dm-segmented button.is-active { color: #eaf1ff; background: #2a3b56; box-shadow: 0 1px 4px #0003; }
.lx-control-more { margin-left: auto; }
html .levexes-surface .lx-control-more summary { min-height: 40px; padding: 8px 10px; font-size: 13px; border: 1px solid #303c51; background: #172131; }
.lx-control-popover { z-index: 90; min-width: 240px; background: #172131; border: 1px solid #3a4b66; box-shadow: 0 24px 60px #0007; }
.lx-control-popover :is(.dm-focus-button, .lx-panel-mode-toggle) { width: 100%; justify-content: flex-start; min-height: 40px; }
html .levexes-surface .dm-simple-controls #simple-refresh { min-height: 40px; padding: 8px 16px; background: #c4d9ff; color: #132138; border: 1px solid #d6e5ff; box-shadow: 0 3px 12px #060a1033; font-size: 13px; }
html .levexes-surface #surface-map { gap: 16px; margin: 0; }
html .levexes-surface #surface-map[data-chart-view="pressure"] { display: grid; grid-template-columns: minmax(0, 1fr); }
html .levexes-surface #surface-map > .dm-floor-chart { overflow: hidden; padding: 0; background: #10151d !important; border: 1px solid #304057; border-radius: 14px; box-shadow: 0 18px 55px #00000025; }
html .levexes-surface .lx-map-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; min-height: 76px; padding: 18px 24px; margin: 0; background: #172131; border-bottom: 1px solid #2a374b; }
html .levexes-surface .lx-map-header > div:first-child { display: flex; align-items: center; gap: 16px; }
html .levexes-surface .lx-map-header .dm-mini-kicker { display: none; }
html .levexes-surface .lx-map-header h2 { margin: 0; font: 600 25px/1.2 Inter, sans-serif; letter-spacing: -.5px; }
html .levexes-surface .lx-map-title-secondary { display: inline; margin-left: 10px; padding-left: 16px; border-left: 1px solid #3a475c; color: #9cabbe; font-size: 15px; font-weight: 400; letter-spacing: 0; }
html .levexes-surface .dm-surface-map-actions { display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; gap: 16px; }
.lx-strike-mode { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 3px; padding: 3px; border: 1px solid #35425a; border-radius: 7px; background: #0f1723; }
.lx-strike-mode button { min-height: 36px; padding: 6px 11px; border: 0; border-radius: 4px; background: transparent; color: #a3b0c3; font: 500 12px/1.3 Inter, sans-serif; cursor: pointer; }
.lx-strike-mode button[aria-pressed="true"] { background: #354965; color: #edf4ff; box-shadow: 0 1px 4px #0004; }
.lx-strike-mode button:hover:not(:disabled) { background: #26364b; color: #f1f5ff; }
.lx-strike-mode button:focus-visible { outline: 2px solid #99bfff; outline-offset: 2px; }
.lx-strike-mode button:disabled { opacity: .45; cursor: default; }
html .levexes-surface #simple-chart-note { display: none; }
html .levexes-surface .dm-surface-community-share { font-size: 12px; color: #a9bcd9; }
html .levexes-surface .dm-surface-view-tabs { display: flex; width: auto; padding: 3px; border: 1px solid #35425a; border-radius: 7px; background: #0f1723; }
html .levexes-surface .dm-surface-view-tabs button { min-height: 33px; padding: 6px 12px; border: 0; border-radius: 4px; color: #99aac1; font-size: 13px; font-weight: 500; }
html .levexes-surface .dm-surface-view-tabs button.is-active { background: #2a3b56; color: #e8f0ff; box-shadow: 0 1px 5px #0004; }
.lx-bar-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px 24px 10px; }
.lx-bar-segment, .lx-bar-range { display: flex; align-items: center; gap: 3px; }
.lx-bar-segment { padding: 3px; border-radius: 6px; background: #1b2534; }
.lx-bar-tools button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 5px 10px; border: 1px solid transparent; border-radius: 4px; color: #a3b0c3; background: transparent; font: 500 12px/1.3 Inter, sans-serif; transition: color .18s, background .18s; cursor: pointer; }
.lx-bar-tools button:hover:not(:disabled) { color: #f1f5ff; background: #26364b; }
.lx-bar-tools button[aria-pressed="true"] { color: #edf4ff; background: #354965; box-shadow: 0 1px 4px #0004; }
.lx-bar-tools svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lx-bar-range { margin-left: auto; }
.lx-bar-range [data-gamma-zoom] { font-size: 18px; width: 30px; padding: 0; border-color: #324058; }
.lx-bar-tools .lx-chart-export { border-color: #324058; }
.lx-bar-readout { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 24px 0; color: #8e9eb5; font-size: 12px; }
#simple-profile-legend { display: flex; align-items: center; gap: 8px; }
#simple-profile-legend::before { content: ""; width: 8px; height: 8px; background: #38dcac; border-radius: 2px; box-shadow: 4px 4px 0 #ff758b; margin-right: 4px; }
#simple-profile-coverage { color: #b9c9df; font-variant-numeric: tabular-nums; }
html .levexes-surface #simple-gex-chart.is-echarts-profile { width: 100%; height: clamp(440px, calc(100dvh - 350px), 760px); min-height: 440px; margin: 0; padding: 0; border: 0; background: #10151d; border-radius: 0; }
.lx-bar-description { margin: 0; padding: 2px 24px 16px; color: #7f90a8; font-size: 12px; line-height: 1.6; }
html .levexes-surface #surface-map[data-chart-view="pressure"] > .lx-map-sidebar { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto; gap: 0; max-height: none !important; background: #131c29; border: 1px solid #2b394f; border-radius: 12px; overflow: hidden; }
.lx-bar-inspector { display: grid; grid-template-columns: minmax(155px, .8fr) minmax(200px, 1fr); gap: 28px; padding: 24px; }
.lx-bar-inspector[hidden], .lx-node-inspector[hidden] { display: none !important; }
.lx-bar-selection h3 { margin: 0 0 14px; color: #b0bed1; font-size: 13px; font-weight: 500; }
.lx-bar-strike-control { display: flex; align-items: center; gap: 5px; margin: 0 0 14px; }
.lx-bar-strike-control button { flex-shrink: 0; width: 28px; height: 36px; padding: 0; border: 1px solid #374963; border-radius: 5px; background: #1d2b3f; color: #c8daf5; font-size: 23px; cursor: pointer; }
html .levexes-surface .lx-bar-strike-control select { width: 100%; min-width: 90px; height: 40px; padding: 0 6px; border: 0; background: transparent; color: #f0f5ff; font-size: 27px; letter-spacing: -.7px; font-weight: 500; }
.lx-bar-strike-control select option { color: #eef3fc; background: #182438; font-size: 15px; }
.lx-bar-selection > span { display: block; color: #b3c2d6; font-size: 13px; }
.lx-bar-selection > small { display: block; margin-top: 8px; max-width: 28ch; color: #8597b1; font-size: 12px; line-height: 1.6; }
.lx-bar-selection-values > span { display: block; margin-bottom: 6px; color: #a9b9d0; font-size: 12px; }
.lx-bar-selection-values > strong { color: #e3edfc; font: 500 30px/1.2 Inter, sans-serif; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.lx-bar-inspector[data-tone="positive"] .lx-bar-selection-values > strong { color: #4fe2b9; }
.lx-bar-inspector[data-tone="negative"] .lx-bar-selection-values > strong { color: #ff8496; }
.lx-bar-selection-values dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
.lx-bar-selection-values dt { margin-bottom: 3px; color: #8b9cb6; font-size: 12px; }
.lx-bar-selection-values dd { margin: 0; color: #d6e1f2; font-size: 14px; font-variant-numeric: tabular-nums; }
#simple-profile-pin { width: 100%; min-height: 36px; padding: 8px 12px; border: 1px solid #435c80; border-radius: 6px; background: #263b59; color: #dce9ff; font-size: 12px; cursor: pointer; }
.lx-ladder-wrap { min-width: 0; padding: 8px 0; border-left: 1px solid #2c3b51; }
html .levexes-surface .lx-ladder-wrap .dm-ladder-head { padding: 12px 20px; margin: 0; }
html .levexes-surface .lx-ladder-wrap .dm-ladder-head .dm-mini-kicker { display: none; }
html .levexes-surface .lx-ladder-wrap .dm-ladder-head h2 { color: #b8c8de; font-size: 14px; font-weight: 500; }
html .levexes-surface .lx-ladder-wrap .dm-ladder-columns { margin: 0 20px; }
html .levexes-surface .lx-ladder-wrap .dm-strike-ladder { height: 185px; min-height: 0; max-height: 185px; padding: 0 20px; }
html .levexes-surface #surface-map:not([data-chart-view="pressure"]) .lx-ladder-wrap { border: 0; }
html .levexes-surface #surface-map:not([data-chart-view="pressure"]) > .lx-map-sidebar { display: block; }
html .levexes-surface .dm-command-summary[data-lx-workspace="gamma"] { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: 18px 0; border: 1px solid #2b394f; border-radius: 12px; overflow: hidden; background: #151f2e; }
html .levexes-surface .dm-command-summary .dm-summary-card { min-height: 100px; padding: 18px 20px; border: 0; border-right: 1px solid #2b394f; border-radius: 0; background: transparent !important; box-shadow: none; }
html .levexes-surface .dm-command-summary .dm-summary-card:last-child { border: 0; }
html .levexes-surface .dm-command-summary .dm-summary-card > span { font-size: 12px; text-transform: none; letter-spacing: 0; color: #95a6be; }
html .levexes-surface .dm-command-summary .dm-summary-card > strong { margin: 8px 0 5px; font-size: 25px; font-weight: 500; letter-spacing: -.6px; }
html .levexes-surface .dm-command-summary .dm-summary-card > small { font-size: 12px; line-height: 1.5; }
html .levexes-surface #simple-gamma-totals { padding: 20px 24px; background: #141e2c; border: 1px solid #2b394f; border-radius: 12px; }
html .levexes-surface #simple-gamma-totals h2 { font-size: 18px; font-weight: 500; }
/* The same frame surrounds Overview, price, research and the other live tools. */
html .levexes-surface :is(.dm-market-workspace, .dm-reference-cockpit, .dm-dyk, .dm-toolkit, .dm-intel-grid, .dm-giw) { margin-top: 0; }
html .levexes-surface :is(.dm-market-workspace, .dm-reference-cockpit, .dm-dyk, .dm-toolkit) { border-color: #304057; border-radius: 12px; }
html .levexes-surface :is(.dm-candle-head, .dm-reference-cockpit-head, .dm-toolkit-head, .dm-dyk-head) { background: #172131; border-bottom-color: #2d3a50; padding: 18px 22px; }
html .levexes-surface :is(.dm-candle-head h2, .dm-reference-cockpit-head h2, .dm-toolkit-head h2, .dm-dyk-head h2) { font-size: 22px; font-weight: 500; }
/* Positioning and Community inherit the horizontal site header and compact hierarchy. */
html .levexes-page :is(.cot-topbar, .cm-topbar) { min-height: 65px; margin: 0; padding: 14px 0; border-bottom: 1px solid #2a374c; background: transparent !important; }
html .levexes-page :is(.cot-brand-icon, .cm-topbar .dm-simple-logo) { display: none; }
html .levexes-page .cot-hero { min-height: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0; padding: 24px 0; background: transparent; border: 0; box-shadow: none; }
html .levexes-page .cot-hero-copy h2 { margin: 0; font: 500 30px/1.2 Inter, sans-serif; letter-spacing: -1px; }
html .levexes-page .cot-hero-copy > :is(span, p, h1) { display: none; }
html .levexes-page .cot-release-card { width: auto; min-width: 0; padding: 14px 20px; border: 1px solid #2c3d56; border-radius: 8px; background: #172336; }
html .levexes-page :is(.cot-compare, .cot-panel, .cot-chart-card, .cot-card) { background: #141e2c; border: 1px solid #2d3c53; border-radius: 12px; box-shadow: none; }
html .levexes-page .cm-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 0; margin: 0; padding: 28px 0; border: 0; background: transparent !important; }
html .levexes-page .cm-hero .dm-mini-kicker { display: none; }
html .levexes-page .cm-hero h1 { margin: 0; font: 500 30px/1.2 Inter, sans-serif; letter-spacing: -1px; }
html .levexes-page .cm-hero p { margin: 8px 0 0; color: #93a5bf; font-size: 14px; }
html .levexes-page :is(.cm-panel, .cm-post, .cm-feed-card, .cm-room-panel) { background: #141e2c; border-color: #2d3c53; border-radius: 12px; }
/* Small, deliberate responses to interaction; chart values never pulse or glow. */
html .levexes-page :is(button, a) { transition-timing-function: cubic-bezier(.2,.7,.2,1); }
html .levexes-page :is(.dm-primary-button, #simple-profile-pin):hover:not(:disabled) { filter: brightness(1.1); }
html .levexes-surface #surface-map[data-chart-view="pressure"]:is(.is-tool-fullscreen, :fullscreen, :-webkit-full-screen) { display: block !important; overflow-y: auto; background: #0b1018 !important; }
html .levexes-surface #surface-map[data-chart-view="pressure"]:is(.is-tool-fullscreen, :fullscreen, :-webkit-full-screen) #simple-gex-chart { height: max(440px, calc(100dvh - 250px)); }
@media (max-width: 1250px) {
  html .levexes-page :is(.dm-simple-rail, .cot-rail) { padding: 0 20px; }
  html .levexes-page :is(.dm-simple-rail-mark, .cot-mark) { margin-right: 12px; }
  html .levexes-page :is(.dm-simple-rail-btn, .cot-rail-btn) { padding: 8px 10px; }
  html .levexes-page :is(.dm-simple-main, .cot-main) { padding: 0 20px 32px; }
  .lx-workspace-bar { gap: 20px; }
  html .levexes-surface .dm-workspace-jump a { padding: 0 11px; font-size: 13px; }
  html .levexes-surface .dm-simple-controls { gap: 10px; }
  html .levexes-surface .dm-simple-controls .dm-control > span { display: none; }
  html .levexes-surface .dm-simple-controls .dm-segmented button { padding: 5px 10px; }
  html .levexes-surface .dm-command-summary[data-lx-workspace="gamma"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html .levexes-surface .dm-command-summary .dm-summary-card:nth-child(-n+3) { border-bottom: 1px solid #2b394f; }
  html .levexes-surface .dm-command-summary .dm-summary-card:nth-child(3) { border-right: 0; }
  .lx-bar-inspector { gap: 16px; padding: 20px; }
}
@media (max-width: 980px) {
  .lx-header-status { display: block; }
  html .levexes-page :is(.dm-simple-rail-btn, .cot-rail-btn) { font-size: 12px; }
  html .levexes-page :is(.dm-simple-rail-btn, .cot-rail-btn) svg { display: none; }
  .lx-workspace-bar { display: block; min-height: 54px; }
  html .levexes-surface .lx-surface-hero { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  html .levexes-surface .dm-workspace-jump, html .levexes-surface .dm-workspace-jump a { min-height: 54px; }
  html .levexes-surface .dm-workspace-jump .lx-futures-converter { min-height: 54px; }
  html .levexes-surface .dm-simple-controls { padding: 14px 0; }
  html .levexes-surface #surface-map[data-chart-view="pressure"] > .lx-map-sidebar { grid-template-columns: minmax(0, 1fr); }
  html .levexes-surface #surface-map[data-chart-view="pressure"] .lx-ladder-wrap { border-left: 0; border-top: 1px solid #2b394f; }
  .lx-bar-selection { display: flex; flex-direction: column; justify-content: center; }
  html .levexes-surface .lx-map-header { padding: 16px 20px; }
  .lx-bar-tools { padding: 14px 20px 10px; }
  .lx-bar-tools .lx-chart-export { margin-left: auto; }
  .lx-bar-range { margin-left: 0; }
}
@media (max-width: 640px) {
  html .levexes-page :is(.dm-simple-rail, .cot-rail) { height: 58px; min-height: 58px; max-height: 58px; padding: 0 14px; gap: 2px; }
  html .levexes-page :is(.dm-simple-rail-mark, .cot-mark) { margin-right: 10px; height: 46px; gap: 7px; }
  html .levexes-page .lx-rail-wordmark { font-size: 12px; letter-spacing: 1px; }
  html .levexes-page :is(.dm-simple-rail-logo, .cot-mark > span:first-child) { width: 25px; height: 29px; font-size: 12px; }
  html .levexes-page :is(.dm-simple-rail-btn, .cot-rail-btn) { min-height: 36px; height: 36px; padding: 7px 10px; font-size: 12px; }
  html .levexes-page :is(.dm-simple-main, .cot-main) { padding: 0 12px 24px; }
  html .levexes-surface .dm-workspace-jump { margin: 0 -12px; width: calc(100% + 24px); padding: 0 12px; }
  html .levexes-surface .dm-workspace-jump a { min-height: 50px; padding: 0 12px; font-size: 13px; }
  html .levexes-surface .dm-workspace-jump .lx-futures-converter { min-height: 50px; padding: 0 12px; font-size: 12px; }
  html .levexes-surface .dm-simple-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: 10px 8px; padding: 14px 0; }
  html .levexes-surface .dm-simple-controls .dm-control { min-width: 0; }
  html .levexes-surface .dm-simple-controls :is(#simple-ticker, #simple-expiration, #simple-gamma-window) { width: 100%; padding: 0 8px; font-size: 16px; }
  html .levexes-surface .dm-simple-controls .dm-segmented { grid-row: 2; grid-column: 1 / -1; display: flex; width: 100%; }
  html .levexes-surface .dm-simple-controls .dm-segmented button { flex: 1; font-size: 13px; min-height: 34px; }
  html .levexes-surface .dm-simple-controls .dm-control-compact { grid-row: 1; grid-column: 3; }
  .lx-control-more { grid-column: 1 / 3; margin: 0; }
  html .levexes-surface .lx-control-more summary { justify-content: space-between; }
  .lx-control-popover { right: auto; left: 0; width: min(290px, calc(100vw - 30px)); }
  html .levexes-surface .dm-simple-controls #simple-refresh { width: 100%; min-height: 40px; margin: 0; }
  html .levexes-surface .lx-map-header { padding: 15px 14px 12px; gap: 14px; }
  html .levexes-surface .lx-map-header h2 { font-size: 24px; }
  html .levexes-surface .lx-map-title-secondary { font-size: 14px; margin-left: 8px; padding-left: 12px; }
  html .levexes-surface .dm-surface-map-actions { width: 100%; gap: 8px; }
  html .levexes-surface .dm-surface-community-share { margin-right: auto; font-size: 12px; }
  html .levexes-surface .dm-surface-view-tabs { width: auto; }
  html .levexes-surface .dm-surface-view-tabs button { padding: 7px 8px; min-height: 34px; font-size: 12px; }
  html .levexes-surface .dm-surface-view-tabs svg { display: none; }
  .lx-bar-tools { padding: 12px 12px 8px; gap: 10px 6px; }
  .lx-bar-tools button { min-height: 36px; padding: 5px 8px; }
  .lx-bar-segment { gap: 0; }
  .lx-bar-segment svg { width: 14px; }
  .lx-bar-range { gap: 2px; }
  .lx-bar-tools .lx-chart-export { padding: 5px 7px; }
  .lx-bar-readout { flex-wrap: wrap; padding: 8px 16px 0; gap: 8px; font-size: 12px; }
  html .levexes-surface #simple-gex-chart.is-echarts-profile { height: 470px; min-height: 470px; }
  .lx-bar-description { padding: 0 16px 16px; }
  .lx-bar-inspector { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); padding: 20px 16px; gap: 14px; }
  html .levexes-surface .lx-bar-strike-control select { font-size: 21px; min-width: 65px; padding: 0; }
  .lx-bar-strike-control button { width: 23px; }
  .lx-bar-selection-values > strong { font-size: 26px; }
  .lx-bar-selection-values dl { gap: 10px; grid-template-columns: minmax(0, 1fr); }
  .lx-bar-selection-values dl > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px; }
  #simple-profile-pin { font-size: 12px; min-height: 42px; }
  html .levexes-surface .dm-command-summary[data-lx-workspace="gamma"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html .levexes-surface .dm-command-summary .dm-summary-card { padding: 16px; min-height: 100px; border-bottom: 1px solid #2b394f; }
  html .levexes-surface .dm-command-summary .dm-summary-card:nth-child(3) { border-right: 1px solid #2b394f; }
  html .levexes-surface .dm-command-summary .dm-summary-card:nth-child(even) { border-right: 0; }
  html .levexes-surface .dm-command-summary .dm-summary-card:nth-last-child(-n+2) { border-bottom: 0; }
  html .levexes-page .cot-hero { align-items: stretch; flex-direction: column; gap: 14px; padding: 20px 0; }
  html .levexes-page .cot-hero-copy h2 { font-size: 25px; }
  html .levexes-page .cm-hero { align-items: flex-start; flex-direction: column; padding: 22px 0; }
  html .levexes-page .cm-hero h1 { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  html .levexes-page *, html .levexes-page *::before, html .levexes-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

html .levexes-surface .dm-workspace-jump a { border: 0 !important; border-bottom: 2px solid transparent !important; background: transparent !important; }
html .levexes-surface .dm-workspace-jump { border: 0 !important; }
html .levexes-surface .dm-workspace-jump a.is-active { border-bottom-color: #adcaff !important; background: transparent !important; }
html body.levexes-surface.is-surface-focus :is(.dm-simple-rail, .lx-workspace-bar) { display: none !important; }
html body.levexes-surface.is-surface-focus #simple-gex-chart.is-echarts-profile { height: max(440px, calc(100dvh - 230px)); }
.lx-bar-readout { flex-wrap: wrap; }
.lx-bar-references { display: flex; gap: 16px; margin: 0 auto; font-variant-numeric: tabular-nums; }
.lx-bar-references > span { white-space: nowrap; }
@media (max-width: 640px) {
  .lx-header-status { grid-column: 1 / -1; grid-row: 4; min-width: 0; }
  html .levexes-surface .lx-header-status .dm-simple-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  html .levexes-surface .lx-header-status .dm-simple-status small { max-width: none; white-space: normal; }
  .lx-bar-references { flex-basis: 100%; order: 3; gap: 12px; margin-top: 2px; }
}