dialog.trade-detail-dialog{width:min(1240px,calc(100vw - 40px));max-width:1240px;max-height:94dvh;padding:28px 32px;overflow-y:auto;border-radius:16px}
.trade-detail-dialog .modal-head{position:sticky;top:-28px;z-index:2;background:white;padding:14px 0;margin-top:-14px}
.trade-detail-title h2{font-size:25px;letter-spacing:-.6px;margin:12px 0}.trade-detail-title p{font-size:12px;color:var(--muted)}
.trade-detail-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:24px 0}.trade-detail-metrics .stat{padding:16px;background:#f8fafb}.trade-detail-metrics .stat strong{font-size:22px;letter-spacing:-.4px}
.trade-underlying{border:1px solid #dfe6ec;border-radius:12px;padding:20px;background:white}.trade-chart-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}.trade-chart-heading h3{font-size:22px;margin:8px 0}.trade-chart-legend{display:flex;gap:18px;font-size:11px;flex-wrap:wrap}.trade-chart-legend span:before{content:'';display:inline-block;width:19px;height:3px;margin:0 7px 3px 0;background:#315c83}.trade-chart-legend .long:before{background:#208052}.trade-chart-legend .short:before{background:#bd3d3d}
.trade-chart-scroll{overflow-x:auto;margin-top:16px}.trade-price-chart{display:block;width:100%;min-width:640px;height:auto}.trade-axis{fill:#728393;font-size:10px}.trade-marker-label{fill:#4a6071;font-size:11px}.trade-strike-label{font-size:10px;font-weight:600}.trade-strike-label.long{fill:#208052}.trade-strike-label.short{fill:#bd3d3d}.trade-price-readout{min-height:25px;font-size:13px;font-weight:600;color:#315c83;font-variant-numeric:tabular-nums}.trade-scrubber-label{font-size:11px;color:#728393}.trade-price-slider{width:100%;min-height:32px;accent-color:#315c83}.trade-chart-note{font-size:11px!important;line-height:1.7;color:#728393;margin:8px 0 0}.trade-contracts{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:11px;color:#5b7181;margin:20px 0;overflow-wrap:anywhere}.trade-extra{border-top:1px solid #e4e9ed;padding:17px 0}.trade-extra summary{font-size:12px;font-weight:600;cursor:pointer}
@media(max-width:650px){dialog.trade-detail-dialog{width:calc(100vw - 12px);max-width:calc(100vw - 12px);max-height:96dvh;padding:16px 14px}.trade-detail-dialog .modal-head{top:-16px}.trade-detail-title h2{font-size:21px}.trade-detail-metrics{grid-template-columns:1fr 1fr;gap:8px;margin:18px 0}.trade-detail-metrics .stat{padding:12px}.trade-detail-metrics .stat strong{font-size:17px}.trade-underlying{padding:14px 10px}.trade-chart-legend{gap:10px;font-size:10px}.trade-detail-dialog .close{min-width:44px;min-height:44px}}
/* Spread cash flows remain readable on a narrow installed app. */
.trade-cashflows{margin:24px 0;padding:20px;background:#f5f8f6;border:1px solid #dce6df;border-radius:12px}
.trade-cashflows h3{margin-top:0}.trade-cashflow-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.trade-cashflow-grid .stat{padding:12px}.trade-price-readout{line-height:1.8;white-space:normal}
@media(max-width:750px){.trade-cashflow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.trade-cashflows{padding:12px}}