/* /options/<coin>/implied-volatility (templates/options_iv.html, partials/iv_chart.html, T-205). Loaded after
   seo.css; venue colours are the registry's --v-<venue> tokens, with site-token fallbacks. */
.iv { --iv-binance: var(--v-binance, var(--warn)); --iv-bybit: var(--v-bybit, var(--teal)); }
.iv .panel-h { gap: 8px; flex-wrap: wrap; }
.iv-sub { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 12px; font-size: 13px; }
.iv-sub [aria-current] { font-weight: 600; color: var(--text); }
.iv-pick { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; }
.iv-pick a { padding: 2px 8px; border: 1px solid var(--line); border-radius: 4px; font-size: 12.5px; text-decoration: none; }
.iv-pick a[aria-current] { background: var(--panel2); border-color: var(--line2); color: var(--text); font-weight: 600; }
.iv-pick small { color: var(--muted); margin-left: 3px; }
.iv-kpis { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0 0 12px; }
.iv-kpis div { display: flex; flex-direction: column; }
.iv-kpis b { font-size: 20px; font-variant-numeric: tabular-nums; }
.iv-kpis span { font-size: 12px; color: var(--muted); }
.iv-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 8px; padding: 0; list-style: none; font-size: 12.5px; color: var(--muted); }
.iv-legend i { display: inline-block; width: 16px; height: 0; border-top: 2.5px solid currentColor; margin-right: 6px; vertical-align: middle; }
.iv-legend .iv-binance i { color: var(--iv-binance); }
.iv-legend .iv-bybit i { color: var(--iv-bybit); }
.iv-legend .iv-all i { color: var(--text); }
.iv-legend .iv-rr i { color: var(--conf, var(--text)); }
.iv-legend .iv-rv i { color: var(--muted); border-top-style: dashed; }
.iv-legend .iv-spread i { color: var(--warn); }
.iv-legend .iv-bandkey i { height: 8px; border: 0; background: var(--muted); opacity: .35; }
.iv-chart { display: block; width: 100%; height: auto; max-height: 340px; }
.iv-chart .grid { stroke: var(--line); stroke-width: 1; }
.iv-chart .grid.zero { stroke: var(--line2); stroke-width: 1.5; }
.iv-chart .tick { stroke: var(--line2); }
.iv-chart text { fill: var(--muted); font: 11px Inter, sans-serif; font-variant-numeric: tabular-nums; }
.iv-line { fill: none; stroke-width: 1.8; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.iv-dot { fill: var(--panel); stroke-width: 1.8; }
.iv-band { stroke: none; opacity: .16; }
.iv-line.iv-binance, .iv-dot.iv-binance { stroke: var(--iv-binance); }
.iv-line.iv-bybit, .iv-dot.iv-bybit { stroke: var(--iv-bybit); }
.iv-band.iv-binance { fill: var(--iv-binance); }
.iv-band.iv-bybit { fill: var(--iv-bybit); }
.iv-line.iv-all, .iv-dot.iv-all { stroke: var(--text); }
.iv-line.iv-rr, .iv-dot.iv-rr { stroke: var(--conf, var(--text)); }
.iv-dot.iv-rv { stroke: var(--muted); }
.iv-line.iv-rv { stroke: var(--muted); stroke-dasharray: 5 4; }
.iv-line.iv-spread, .iv-dot.iv-spread { stroke: var(--warn); }
.iv-table td { white-space: nowrap; }
.iv-stale { border-left: 3px solid var(--warn); padding-left: 10px; }