.positionPanel > .tableWrap { max-height: 430px; }
.payoffWorkbench { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.payoffHead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.payoffHead h3 { margin: 3px 0 0; font-size: 17px; font-weight: 650; }
.payoffLegend { display: flex; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 11px; }
.payoffLegend span { display: flex; align-items: center; gap: 6px; }
.payoffLegend i { display: block; width: 20px; border-top: 3px solid; }
.profitKey i { border-color: var(--green); }
.lossKey i { border-color: var(--red); }
.spotKey i { border-color: #eef3f8; border-top-style: dashed; }
.payoffChartWrap { position: relative; overflow: hidden; border: 1px solid #202a35; border-radius: 8px; background: #0d1218; }
.payoffChartWrap svg { display: block; height: 230px; min-height: 0; border-radius: 0; }
.payoffGrid { stroke: #25303b; stroke-width: 1; }
.payoffAxis, .payoffEmpty { fill: #8795a6; font-size: 12px; }
.payoffProfit, .payoffLoss { fill: none; stroke-width: 3; stroke-linejoin: round; }
.payoffProfit { stroke: var(--green); }
.payoffLoss { stroke: var(--red); }
.payoffZero { stroke: #718092; stroke-width: 1.2; }
.payoffSpot { stroke: #eef3f8; stroke-width: 1.2; stroke-dasharray: 5 5; opacity: .8; }
.payoffSpotLabel { fill: #eef3f8; font-size: 11px; }
.breakEvenDot { fill: var(--amber); stroke: #0d1218; stroke-width: 2; }
.payoffCursor { stroke: #9cabbc; stroke-width: 1; stroke-dasharray: 3 3; }
.payoffCursorDot { fill: #eef3f8; stroke: #0d1218; stroke-width: 2; }
.payoffTooltip { position: absolute; z-index: 3; width: 160px; padding: 9px 10px; border: 1px solid #4c5b6c; border-radius: 6px; background: #080c11ed; box-shadow: 0 10px 28px #0009; pointer-events: none; }
.payoffTooltip small, .payoffTooltip b, .payoffTooltip strong { display: block; }
.payoffTooltip small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.payoffTooltip b, .payoffTooltip strong { margin-top: 2px; font-size: 12px; }
.payoffRangeControl { display: grid; grid-template-columns: 165px minmax(180px, 1fr) auto; gap: 14px; align-items: center; margin-top: 10px; }
.payoffRangeControl output { padding: 7px 9px; border-radius: 6px; background: #0d1218; color: var(--text); text-align: center; font-size: 11px; font-variant-numeric: tabular-nums; }
.payoffRangeControl button { width: auto; padding: 7px 10px; color: var(--blue); font-size: 10px; }
.payoffDualRange { position: relative; height: 28px; background: linear-gradient(var(--line),var(--line)) center/100% 5px no-repeat; }
.payoffRangeFill { position: absolute; top: 12px; height: 5px; border-radius: 4px; background: var(--green); pointer-events: none; }
.payoffDualRange input { position: absolute; inset: 0; width: 100%; height: 28px; min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; appearance: none; pointer-events: none; }
.payoffDualRange input::-webkit-slider-runnable-track { height: 5px; background: transparent; }
.payoffDualRange input::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; margin-top: -7px; border: 3px solid #0d1218; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 1px #74e7bd; pointer-events: auto; cursor: ew-resize; }
.payoffDualRange input::-moz-range-track { height: 5px; background: transparent; }
.payoffDualRange input::-moz-range-thumb { width: 14px; height: 14px; border: 3px solid #0d1218; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 1px #74e7bd; pointer-events: auto; cursor: ew-resize; }
.payoffSummary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 9px; }
.payoffSummary > span { padding: 9px 11px; border-radius: 6px; background: #0d1218; }
.payoffSummary small, .payoffSummary b { display: block; }
.payoffSummary small { color: var(--muted); font-size: 9px; }
.payoffSummary b { margin-top: 4px; font-size: 12px; font-weight: 650; }
.payoffNote { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
@media (max-width: 850px) {
  .payoffHead { display: block; }
  .payoffLegend { margin-top: 10px; }
  .payoffSummary { grid-template-columns: 1fr; }
  .payoffChartWrap svg { height: 190px; }
  .payoffRangeControl { grid-template-columns: 1fr auto; gap: 8px; }
  .payoffRangeControl output { grid-column: 1 / -1; }
}