/* Research-terminal adapters · 期权与 GEX (js/views/tc/options.js): GEX 热图 ladder + heat, strike-axis bar charts, 波动温度. */
/* GEX colours follow the site (gold = dealers long gamma, purple = short gamma) — neither red nor green, so they never fight the
   红涨绿跌 switch. Ink variants are for text. */
:root { --tc-op-pos: #b8781a; --tc-op-neg: #6a4cc7; --tc-op-pos-ink: #7a4e0c; --tc-op-neg-ink: #4a3296; }
:root[data-theme="dark"] { --tc-op-pos: #e2a640; --tc-op-neg: #9c80f2; --tc-op-pos-ink: #f2c878; --tc-op-neg-ink: #c3b2fa; }

.tc-op { min-width: 0; }
.tc-op > * + *, .tc-op > .tc-island > * + * { margin-top: 16px; }
.tc-op .tc-op-pos { color: var(--tc-op-pos-ink); }
.tc-op .tc-op-neg { color: var(--tc-op-neg-ink); }
.tc-op-mid { color: var(--muted); }
.tc-op-acc { color: var(--accent); }
.tc-op-sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin: 0 3px 0 1px; vertical-align: -1px; background: var(--faint); }
.tc-op-sw.up { background: var(--rise); } .tc-op-sw.down { background: var(--fall); }
.tc-op .tc-op-sw.tc-op-pos, .tip .tc-op-sw.tc-op-pos { background: var(--tc-op-pos); }
.tc-op .tc-op-sw.tc-op-neg, .tip .tc-op-sw.tc-op-neg { background: var(--tc-op-neg); }
.tc-op-note { font-size: 11.5px; color: var(--faint); margin-top: 8px; line-height: 1.7; overflow-wrap: anywhere; }
.tc-op-note b { color: var(--muted); }
.tc-op-keys { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.tc-op-risk { margin: 0; font-size: 12.5px; color: var(--faint); line-height: 1.7; }

/* strike-axis bar charts (SVG) */
.tc-op-plot { width: 100%; min-width: 0; }
.tc-op-chart .tc-op-bar.up { fill: var(--rise); } .tc-op-chart .tc-op-bar.down { fill: var(--fall); }
.tc-op-chart .tc-op-bar.oi { opacity: 0.85; }
.tc-op-chart .tc-op-mark { stroke: var(--text); stroke-width: 1.4; }
.tc-op-chart .tc-op-mark.flip { stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 5 4; }
.tc-op-chart .tc-op-mark.flat { stroke: var(--faint); stroke-width: 1.2; stroke-dasharray: 5 4; }
.tc-op-chart .tc-op-mark.pain { stroke: var(--faint); stroke-width: 1.3; stroke-dasharray: 1.5 3; }
.tc-op-chart .tc-op-mtext { font-size: 10.5px; fill: var(--text); paint-order: stroke; stroke: var(--panel); stroke-width: 3px; stroke-linejoin: round; }
.tc-op-chart .tc-op-mtext.flip { fill: var(--accent); }
.tc-op-chart .tc-op-mtext.flat, .tc-op-chart .tc-op-mtext.pain { fill: var(--muted); }
.tc-op-chart .tc-op-ltext { font-size: 10.5px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.tc-op-chart .tc-op-hov { fill: var(--text); opacity: 0; pointer-events: none; transition: opacity 0.12s; }
.tc-op-chart.hover .tc-op-hov { opacity: 0.07; }
.tc-op-chart .hit.tc-op-pick { cursor: pointer; }
.tc-op-chart .tip b { font-variant-numeric: tabular-nums; }

/* 指标说明 */
details.tc-op-guide { border: 0; padding: 0; background: transparent; margin: 0 0 10px; }
details.tc-op-guide > summary { display: inline-flex; width: auto; font-size: 12px; font-weight: 600; color: var(--accent); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px 2px 8px; gap: 5px; }
details.tc-op-guide > summary::before { font-size: 14px; }
.tc-op-guide-b { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel-2);
  display: grid; gap: 8px; font-size: 13px; line-height: 1.7; color: var(--text-2); }
.tc-op-guide-b h4 { margin: 0; font-size: 14px; color: var(--text); }
.tc-op-guide-b h5 { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.tc-op-guide-b p { margin: 0; }
.tc-op-guide-b b { color: var(--text); }
.tc-op-warn { background: var(--warn-soft); border-radius: 6px; padding: 8px 12px; }
.tc-op-tier { display: grid; gap: 2px; background: var(--accent-soft); border-radius: 6px; padding: 9px 13px; }

/* 未平仓分布 · expiry filter */
.tc-op-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tc-op-pills button { font: inherit; font-size: 12px; line-height: 1.6; cursor: pointer; white-space: nowrap; color: var(--text-2); background: transparent;
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 11px; transition: border-color 0.15s, background 0.15s; }
.tc-op-pills button:hover { border-color: var(--accent); color: var(--accent); }
.tc-op-pills button small { margin-left: 4px; font-size: 10.5px; opacity: 0.65; }
.tc-op-pills button.on { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; font-weight: 650; }

/* IBIT 波动温度 */
.tc-op-vt { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px 24px; align-items: center; }
.tc-op-vt-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tc-op-vt-h > span:first-child { font-size: 13px; }
.tc-op-vt-h b { font-size: 26px; font-weight: 700; }
.tc-op-vt-p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.75; color: var(--text-2); }
.tc-op-vt-p b { color: var(--text); font-variant-numeric: tabular-nums; }
.tc-op-vt-p b.up { color: var(--rise); } .tc-op-vt-p b.down { color: var(--fall); } .tc-op-vt-p b.tc-op-mid { color: var(--muted); }
.tc-op-vt-cal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-top: 10px; }
.tc-op-vt-cell { display: grid; gap: 1px; min-width: 0; text-align: center; border: 1px solid var(--border); border-radius: 6px; padding: 5px 4px; }
.tc-op-vt-cell span { font-size: 10.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-op-vt-cell b { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tc-op-vt-cell em { font-style: normal; font-size: 10.5px; color: var(--muted); }
.tc-op-vt-cell.on { background: var(--accent-soft); border-color: var(--muted); }
.tc-op-vt-cell.on.up { border-color: var(--rise); } .tc-op-vt-cell.on.down { border-color: var(--fall); }
.tc-op-vt-cell.on b { font-weight: 700; } .tc-op-vt-cell.on em { color: var(--text); }
.tc-op-vt-r { min-width: 0; }
.tc-op-vt-chart { min-height: 174px; }

/* GEX 热图 */
.tc-op-gex { display: grid; gap: 14px; }
.tc-op-gex > * { min-width: 0; }
.tc-op-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.tc-op-tks { flex-wrap: wrap; max-width: 100%; }
.tc-op-day-w { display: inline-flex; align-items: center; gap: 6px; }
.tc-op-gex select.sm { width: auto; max-width: 100%; }
.tc-op-busy { display: inline-flex; align-items: center; gap: 6px; }
.tc-op-access { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: -6px; }
.tc-op-msg { align-items: center; justify-content: space-between; flex-wrap: wrap; }
.tc-op-empty { margin: 4px 0; }
.tc-op-lbl { font-size: 12px; color: var(--faint); }
.tc-op-quote { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 26px; }
.tc-op-q { display: grid; }
.tc-op-spot { font-size: 32px; font-weight: 650; line-height: 1.05; color: var(--accent); font-variant-numeric: tabular-nums; }
.tc-op-time { font-size: 18px; font-variant-numeric: tabular-nums; color: var(--text); }
.tc-op-q .small { font-variant-numeric: tabular-nums; white-space: pre; }
.tc-op-badges { display: flex; flex-wrap: wrap; gap: 6px; align-self: center; }
.tc-op-badge { font-size: 12px; padding: 1px 8px; border-radius: 6px; background: var(--panel-2); color: var(--text-2); border: 1px solid var(--border); white-space: nowrap; }
.tc-op-badge.warn { color: var(--warn); border-color: var(--warn); }
.tc-op-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.tc-op-chip { display: grid; gap: 2px; min-width: 0; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; }
.tc-op-chip b { font-size: 14px; font-weight: 620; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tc-op .tc-op-chip b.tc-op-pos { color: var(--tc-op-pos-ink); } .tc-op .tc-op-chip b.tc-op-neg { color: var(--tc-op-neg-ink); }
.tc-op-chip small { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.tc-op-play { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tc-op-play input[type="range"] { flex: 1 1 220px; width: auto; min-width: 0; min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; accent-color: var(--accent); }
.tc-op-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); cursor: pointer; white-space: nowrap; user-select: none; }
.tc-op-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12px; color: var(--muted); }
.tc-op-legend .num { font-variant-numeric: tabular-nums; color: var(--text-2); }
.tc-op-ramp { width: 150px; max-width: 36vw; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--tc-op-neg), var(--border) 50%, var(--tc-op-pos)); }
.tc-op-heatnote { margin-top: -6px; }

/* the ladder: [strike · bar · $/1% (· Deribit bar · $/1%)] | heat; header row + body rows of 28px */
.tc-op-lad { --tc-op-split: minmax(0, 1fr) minmax(0, 1.55fr); border-top: 1px solid var(--border); }
.tc-op-lad.cmp { --tc-op-split: minmax(0, 1.7fr) minmax(0, 1fr); }
.tc-op-hd, .tc-op-bd { display: grid; grid-template-columns: var(--tc-op-split); }
.tc-op-hd { height: 30px; border-bottom: 1px solid var(--border); }
.tc-op-cols { display: grid; grid-template-columns: 64px minmax(0, 1fr) 80px; min-width: 0; }
.tc-op-lad.cmp .tc-op-cols { grid-template-columns: 60px minmax(0, 1fr) 72px minmax(0, 1fr) 72px; }
.tc-op-hd .tc-op-cols > div { display: flex; align-items: center; padding: 0 8px; font-size: 11px; line-height: 1.15; letter-spacing: 0.06em; color: var(--faint); overflow: hidden; }
.tc-op-hd .tc-op-cols > .r { justify-content: flex-end; } .tc-op-hd .tc-op-cols > .c { justify-content: center; }
.tc-op-ht { position: relative; border-left: 1px solid var(--border); overflow: hidden; }
.tc-op-ht span { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tc-op-ht span.first { transform: translate(-4px, -50%); } .tc-op-ht span.last { transform: translate(calc(-100% + 4px), -50%); }
.tc-op-bd { position: relative; }
.tc-op-rows { grid-auto-rows: 28px; }
.tc-op-k, .tc-op-v { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; padding-right: 8px; min-width: 0; overflow: hidden;
  font-size: 12.5px; line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--border); }
.tc-op-k, .tc-op-v { position: relative; z-index: 2; background: var(--panel); }  /* the spot line runs behind the numbers */
.tc-op-k { color: var(--muted); }
.tc-op-k.round { color: var(--text); font-weight: 600; }
.tc-op-k small { font-size: 10px; color: var(--faint); font-weight: 400; }
.tc-op-k.wpos { box-shadow: inset 3px 0 0 var(--tc-op-pos); } .tc-op-k.wneg { box-shadow: inset 3px 0 0 var(--tc-op-neg); }
.tc-op-b { position: relative; min-width: 0; border-bottom: 1px solid var(--border); }
.tc-op-b::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--border-strong); }
.tc-op-b i { position: absolute; top: 6px; bottom: 6px; border-radius: 3px; }
.tc-op .tc-op-b i.tc-op-pos { background: var(--tc-op-pos); } .tc-op .tc-op-b i.tc-op-neg { background: var(--tc-op-neg); }
.tc-op-heat { position: relative; min-width: 0; border-left: 1px solid var(--border); cursor: crosshair; }
.tc-op-heat canvas { display: block; }
.tc-op-pill { position: absolute; left: 4px; z-index: 2; transform: translateY(-50%); pointer-events: none; padding: 0 6px; border-radius: 9px; font-size: 11.5px;
  line-height: 18px; font-variant-numeric: tabular-nums; background: var(--accent); color: var(--panel); }
.tc-op-spotline { position: absolute; left: 0; right: 0; z-index: 1; height: 0; border-top: 1.5px dashed var(--accent); pointer-events: none; }
.tc-op-hx, .tc-op-hy { position: absolute; pointer-events: none; opacity: 0; background: var(--text); transition: opacity 0.12s; }
.tc-op-hx { top: 0; bottom: 0; width: 1px; } .tc-op-hy { left: 0; right: 0; height: 28px; }
.tc-op-heat.hover .tc-op-hx { opacity: 0.35; } .tc-op-heat.hover .tc-op-hy { opacity: 0.06; }
.tc-op-heat .tip { z-index: 3; }
.tc-op-heat .tip b.tc-op-pos { color: var(--tc-op-pos-ink); } .tc-op-heat .tip b.tc-op-neg { color: var(--tc-op-neg-ink); }

/* 改变热图最多的成交 · 每块内容有多少证据 */
.tc-op-trades { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.tc-op-trade { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; padding: 7px 10px; font-size: 12.5px;
  font-variant-numeric: tabular-nums; border: 1px solid var(--border); border-radius: 8px; }
.tc-op-trade.fresh { border-color: var(--accent-ring); box-shadow: 0 0 0 2px var(--accent-soft); }
.tc-op-trade .d { grid-column: 2 / span 2; color: var(--muted); font-size: 12px; }
.tc-op-evid { display: grid; gap: 12px; }
.tc-op-evid > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 14px; font-size: 13.5px; line-height: 1.65; color: var(--text-2); }
.tc-op-evid b { color: var(--text); }
.tc-op-evid + .tc-op-risk { margin-top: 14px; }
.tc-op-lvl { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 4px; font-size: 11px; line-height: 18px; color: var(--muted); border: 1px solid var(--border); }
.tc-op-lvl.good { color: var(--rise); border-color: var(--rise); } .tc-op-lvl.none { color: var(--fall); border-color: var(--fall); }

@media (max-width: 760px) {
  .tc-op-vt { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .tc-op-spot { font-size: 26px; }
  .tc-op-lad { --tc-op-split: minmax(0, 1.2fr) minmax(0, 1fr); }
  .tc-op-cols { grid-template-columns: 50px minmax(0, 1fr) 60px; }
  .tc-op-k, .tc-op-v { font-size: 11px; padding-right: 4px; }
  .tc-op-hd .tc-op-cols > div { padding: 0 4px; font-size: 10.5px; letter-spacing: 0; }
  .tc-op-ht .minor { display: none; }
  .tc-op-lad.cmp { --tc-op-split: minmax(0, 1fr); }
  .tc-op-lad.cmp .tc-op-heat, .tc-op-lad.cmp .tc-op-ht, .tc-op-heatnote.cmp { display: none; }
  .tc-op-hd .tc-op-cols > .c { text-align: center; }
  .tc-op-lad.cmp .tc-op-cols { grid-template-columns: 48px minmax(0, 1fr) 56px minmax(0, 1fr) 56px; }
  .tc-op-evid > div { grid-template-columns: minmax(0, 1fr); }
  .tc-op-trades { grid-template-columns: minmax(0, 1fr); }
  .tc-op-pills { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }  /* one swipeable row instead of ~15 */
}

/* 未平仓分布: the 到期 caption under the tiles (the site prints it); 当前读数 re-drawn from the chart payload (options.js readingHtml),
   so the site's own copy — another snapshot — is hidden */
.tc-op-cap { margin-top: 8px; font-size: 12px; line-height: 1.7; color: var(--muted); }
.term-doc > .tc-op.tc-op-own ~ .x-blocklabel, .term-doc > .tc-op.tc-op-own ~ .x-s-groups { display: none; }
.tc-op-own > .tc-op-reading { margin: 0 0 12px; }
.tc-op-reading .tc-stats { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
/* ① strike chart: 现价 dashed, max pain dotted (the site's two reference lines) */
.tc-op-oi .tc-op-chart .tc-op-mark.spot { stroke-dasharray: 5 3; }
.tc-op-lgt { line-height: 1.6; }