.option-illustration {
  --chart-bg: #141414;
  --chart-ink: #ededed;
  --chart-muted: #b4b4b4;
  --chart-grid: #353535;
  --chart-profit: #41d186;
  --chart-loss: #ff7474;
  --chart-call: #8bbcff;
  --chart-put: #ffc27a;
  margin: 22px 0;
  padding: clamp(12px, 2vw, 20px);
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--chart-bg);
  color: var(--chart-ink);
  overflow: hidden;
}

:root[data-theme="light"] .option-illustration {
  --chart-bg: #fafafa;
  --chart-ink: #232323;
  --chart-muted: #555;
  --chart-grid: #dcdcdc;
  --chart-profit: #147d47;
  --chart-loss: #ba3030;
  --chart-call: #245da8;
  --chart-put: #9b550d;
}

.option-illustration .illustration-heading {
  margin: 0 0 8px;
  font: 700 1rem/1.4 var(--body-font, "Manrope", sans-serif);
  color: var(--chart-ink);
}

.option-illustration svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: var(--terminal-font, "IBM Plex Mono", monospace);
}

.option-illustration svg text {
  fill: var(--chart-muted);
  font-size: 15px;
}

.option-illustration svg .chart-label {
  fill: var(--chart-ink);
  font-weight: 600;
}

.option-illustration svg .chart-number {
  fill: var(--chart-ink);
  font-size: 19px;
  font-weight: 700;
}

.option-illustration .chart-grid {
  stroke: var(--chart-grid);
  stroke-width: 1;
}

.option-illustration .chart-zero {
  stroke: var(--chart-muted);
  stroke-width: 1.5;
}

.option-illustration .chart-marker {
  stroke: var(--chart-muted);
  stroke-width: 1;
  stroke-dasharray: 4 5;
}

.option-illustration .chart-line,
.option-illustration .chart-call-line,
.option-illustration .chart-put-line {
  fill: none;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.option-illustration .chart-line { stroke: var(--chart-profit); }
.option-illustration .chart-loss-line { stroke: var(--chart-loss); }
.option-illustration .chart-call-line { stroke: var(--chart-call); }
.option-illustration .chart-put-line { stroke: var(--chart-put); }
.option-illustration .chart-dot { fill: var(--chart-ink); }
.option-illustration svg .chart-itm { fill: var(--chart-profit); }
.option-illustration svg .chart-otm { fill: var(--chart-put); }
.option-illustration svg .chart-atm { fill: var(--chart-ink); }
.option-illustration .chart-tone-profit { fill: var(--chart-profit); fill-opacity: 0.12; }
.option-illustration .chart-tone-muted { fill: var(--chart-muted); fill-opacity: 0.08; }

.illustration-legend,
.illustration-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  color: var(--chart-ink);
  font: 500 0.8rem/1.6 var(--body-font, "Manrope", sans-serif);
}

.illustration-metrics {
  padding: 10px 0;
  border-block: 1px solid var(--chart-grid);
}

.illustration-legend li::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--chart-muted);
}

.illustration-legend .legend-profit::before { background: var(--chart-profit); }
.illustration-legend .legend-loss::before { background: var(--chart-loss); }
.illustration-legend .legend-call::before { background: var(--chart-call); }
.illustration-legend .legend-put::before { background: var(--chart-put); }

.option-illustration figcaption {
  margin-top: 12px;
  color: var(--chart-muted);
  font: 400 0.8rem/1.65 var(--body-font, "Manrope", sans-serif);
}

.illustration-panel + .illustration-panel { margin-top: 22px; }
.illustration-panel-title { margin: 0 0 5px; font-size: 0.9rem; }

.value-composition {
  display: flex;
  min-height: 80px;
  margin: 18px 0;
  border-radius: 8px;
  overflow: hidden;
}

.value-composition > span {
  display: grid;
  place-content: center;
  gap: 5px;
  padding: 10px;
  color: var(--chart-ink);
  text-align: center;
  font-size: 0.85rem;
}

.value-intrinsic { flex: 5; background: color-mix(in srgb, var(--chart-call) 24%, var(--chart-bg)); }
.value-time { flex: 3; background: color-mix(in srgb, var(--chart-put) 24%, var(--chart-bg)); }
.value-composition strong { font-family: var(--terminal-font, monospace); font-size: 1.2rem; }

.wheel-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 14px 0;
  padding: 0;
  list-style: none;
  counter-reset: wheel;
}

.wheel-steps li {
  padding: 14px;
  border: 1px solid var(--chart-grid);
  border-radius: 8px;
  counter-increment: wheel;
  font-size: 0.85rem;
  line-height: 1.6;
}

.wheel-steps li::before {
  content: counter(wheel, decimal-leading-zero);
  display: block;
  margin-bottom: 6px;
  color: var(--chart-profit);
  font: 700 1rem var(--terminal-font, monospace);
}

.wheel-steps strong { display: block; }

.mobile-shell .option-illustration svg text { font-size: 22px; }
.mobile-shell .option-illustration svg .chart-number { font-size: 27px; }
.mobile-shell .wheel-steps { grid-template-columns: 1fr; }

@media (max-width: 600px) {
  .option-illustration { padding: 10px; border-radius: 10px; }
  .option-illustration svg text { font-size: 22px; }
  .option-illustration svg .chart-number { font-size: 27px; }
  .illustration-legend, .illustration-metrics { gap: 5px 12px; font-size: 0.85rem; }
  .option-illustration figcaption { font-size: 0.85rem; }
  .wheel-steps { grid-template-columns: 1fr; }
}