.option-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2px 12px; padding: 2px 18px; border-top: 1px solid #f0f0f5; }
.option-toolbar > span { color: #959bad; font-size: 11px; }
.option-switch { position: relative; display: inline-flex; align-items: center; gap: 9px; min-height: 46px; margin: 0; cursor: pointer; color: #645984; font-size: 12px; }
.option-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; min-height: 46px; margin: 0; padding: 0; cursor: pointer; }
.option-switch-track { width: 32px; height: 19px; border-radius: 12px; background: #c7cad5; position: relative; flex-shrink: 0; }
.option-switch-track::after { content: ''; position: absolute; left: 3px; top: 3px; width: 13px; height: 13px; border-radius: 50%; background: white; }
.option-switch input:checked + .option-switch-track { background: #7160cc; }
.option-switch input:checked + .option-switch-track::after { left: 16px; }
.option-switch input:focus-visible + .option-switch-track { outline: 3px solid #b3a5f2; outline-offset: 3px; }
.option-analysis { padding: 0 18px 14px; background: #faf9fe; border-bottom: 1px solid #e8e4f4; }
.option-help { font-size: 11px; color: #828699; line-height: 1.7; margin: 8px 0; overflow-wrap: anywhere; }
.option-emphasis { color: #94733b; }
.option-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.option-stat { border: 1px solid #e9e5f3; border-radius: 9px; background: white; padding: 10px 12px; min-width: 0; }
.option-stat > span { font-size: 11px; color: #7a708f; }
.option-stat strong { display: block; font-size: 21px; color: #554578; margin: 5px 0; overflow-wrap: anywhere; }
.option-stat small { font-size: 10px; line-height: 1.5; color: #9094a2; display: block; }
.option-block { margin-top: 14px; }
.option-block h3 { font-size: 13px; margin: 0; color: #5c4e79; }
.option-table { border-collapse: collapse; table-layout: fixed; width: 100%; font-size: 12px; }
.option-table th { font-size: 10px; font-weight: 500; color: #9393a5; background: #f2eff9; }
.option-table th, .option-table td { text-align: right; padding: 8px 7px; border-bottom: 1px solid #eeebf5; overflow-wrap: anywhere; }
.option-table th:first-child, .option-table td:first-child { text-align: left; }
.option-table td small { display: block; color: #9090a0; font-size: 10px; margin-top: 3px; }
.option-contract { border: 1px solid #e8e4f3; border-radius: 9px; background: white; margin-top: 7px; overflow: hidden; }
.option-contract summary { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 11px; cursor: pointer; list-style: none; }
.option-contract summary::-webkit-details-marker { display: none; }
.option-contract summary::before { content: '›'; font-size: 20px; color: #a098ba; }
.option-contract[open] summary::before { transform: rotate(90deg); }
.option-contract summary:focus-visible { outline: 3px solid #b3a5f2; outline-offset: -3px; }
.option-contract summary > div { min-width: 0; flex: 1; }
.option-contract summary strong { display: block; font-size: 12px; overflow-wrap: anywhere; }
.option-contract summary div span { display: block; font-size: 10px; color: #9692a3; line-height: 1.6; margin-top: 2px; overflow-wrap: anywhere; }
.option-direction { color: #8c7ea6; font-size: 10px; white-space: nowrap; }
.option-contract-body { border-top: 1px solid #eeebf5; padding: 3px 12px 8px; }
.option-contract-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 10px 0; }
.option-contract-metrics dt { color: #9590a1; font-size: 10px; }
.option-contract-metrics dd { margin: 4px 0 0; font-size: 12px; overflow-wrap: anywhere; }
.option-contract h4 { font-size: 12px; margin: 14px 0 0; }
.option-chart { display: block; width: 100%; max-width: 480px; margin: 8px auto; }
.option-chart text { fill: #938aa5; font-size: 12px; }
.option-zero { stroke: #cdc8d9; stroke-width: 1; }
.option-strike { stroke: #e2dced; stroke-dasharray: 4 4; }
.option-curve { fill: none; stroke: #8772bd; stroke-width: 2.5; }
.option-dot { fill: #8772bd; }
@media (max-width: 700px) {
  .option-toolbar { padding: 2px 11px; }
  .option-toolbar > span { font-size: 10px; }
  .option-analysis { padding: 0 11px 12px; }
  .option-stats { grid-template-columns: 1fr; gap: 5px; }
  .option-stat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: 3px 8px; padding: 8px 10px; }
  .option-stat strong { text-align: right; font-size: 19px; margin: 0; }
  .option-stat small { grid-column: 1 / -1; }
  .option-contract-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .option-table th, .option-table td { padding: 7px 4px; font-size: 11px; }
  .option-table th { font-size: 10px; }
  .option-contract summary { padding: 8px; gap: 7px; }
  .option-contract-body { padding: 3px 8px 7px; }
  .option-chart text { font-size: 14px; }
}
