* { box-sizing: border-box; }
body { margin: 0; }
.market-page { min-height: calc(100vh - 54px); padding: 22px 18px 50px; background: #f4f7f9; color: #17202a; font-family: Arial, sans-serif; }
.market-container { width: min(1360px, 100%); margin: 0 auto; }
.tool-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 18px; }
.tool-heading h1 { margin: 3px 0 5px; font-size: 25px; letter-spacing: 0; }
.tool-heading p { margin: 0; color: #64748b; font-size: 13px; }
.tool-eyebrow { color: #087f6d; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.live-state { padding: 8px 10px; border: 1px solid #dbe3ea; background: #fff; border-radius: 5px; color: #64748b; font-size: 11px; white-space: nowrap; }
.live-state span { width: 7px; height: 7px; display: inline-block; margin-right: 5px; background: #16a34a; border-radius: 50%; }
.live-state strong { display: block; margin-top: 2px; color: #17202a; }
.tool-controls { display: flex; align-items: end; gap: 10px; margin-bottom: 14px; padding: 12px; background: #fff; border: 1px solid #dbe3ea; border-radius: 6px; }
.tool-controls label, .gap-box label, .panel-heading label { display: grid; gap: 5px; color: #64748b; font-size: 10px; font-weight: 700; }
.tool-controls select, .gap-box input, .panel-heading input { min-width: 170px; height: 36px; padding: 0 10px; border: 1px solid #cbd5e1; border-radius: 4px; background: #fff; font: 700 12px Arial; }
.refresh-tool, .quiet-button, .replay-bar button { height: 36px; padding: 0 14px; border: 0; border-radius: 4px; background: #087f6d; color: #fff; font-weight: 800; cursor: pointer; }
.segment { display: flex; gap: 2px; padding: 3px; background: #eef2f5; border-radius: 5px; }
.segment button { min-height: 30px; padding: 0 11px; border: 0; border-radius: 3px; background: transparent; color: #475569; font: 700 11px Arial; cursor: pointer; }
.segment button.active { background: #fff; color: #087f6d; box-shadow: 0 1px 3px #cbd5e1; }
.segment.compact button { min-height: 27px; }
.metric-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.tool-metric { min-height: 84px; padding: 13px 15px; background: #fff; border: 1px solid #dbe3ea; border-radius: 6px; }
.tool-metric span { display: block; color: #64748b; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.tool-metric strong { display: block; margin-top: 8px; font-size: 19px; }
.tool-metric em { display: block; margin-top: 3px; color: #64748b; font-size: 10px; font-style: normal; }
.tool-panel { margin-bottom: 14px; background: #fff; border: 1px solid #dbe3ea; border-radius: 6px; overflow: hidden; }
.panel-heading { min-height: 58px; padding: 12px 15px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid #e5ebf0; }
.panel-heading h2 { margin: 0 0 3px; font-size: 14px; letter-spacing: 0; }
.panel-heading p { margin: 0; color: #64748b; font-size: 10px; }
.legend { color: #64748b; font-size: 10px; }
.call-dot, .put-dot { width: 8px; height: 8px; display: inline-block; margin: 0 4px 0 10px; border-radius: 2px; }
.call-dot { background: #e85d75; } .put-dot { background: #0fa98b; }
.oi-chart { min-height: 390px; padding: 18px; display: grid; align-items: end; grid-auto-flow: column; grid-auto-columns: minmax(35px, 1fr); gap: 5px; overflow-x: auto; }
.oi-strike { height: 330px; min-width: 42px; display: grid; grid-template-rows: 1fr auto; gap: 7px; }
.oi-bars { display: flex; align-items: end; justify-content: center; gap: 3px; border-bottom: 1px solid #dbe3ea; }
.oi-bar { width: 13px; min-height: 2px; border-radius: 2px 2px 0 0; }
.oi-bar.call { background: #e85d75; } .oi-bar.put { background: #0fa98b; }
.oi-label { text-align: center; font-size: 9px; font-weight: 700; }
.oi-label.atm { padding: 3px; background: #fff200; }
.data-table-wrap { overflow: auto; }
.market-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.market-table th { padding: 10px; background: #f5f7f9; color: #64748b; text-align: right; font-size: 9px; text-transform: uppercase; position: sticky; top: 0; }
.market-table td { padding: 10px; border-top: 1px solid #e5ebf0; text-align: right; font-weight: 600; }
.market-table th:first-child, .market-table td:first-child { text-align: left; }
.market-table tbody tr:hover { background: #f7fbfa; }
.positive { color: #079b75 !important; } .negative { color: #e5484d !important; }
.signal { display: inline-block; min-width: 94px; padding: 4px 7px; border-radius: 3px; text-align: center; font-size: 9px; font-weight: 800; }
.signal.long { background: #dcfce7; color: #087f5b; }.signal.short { background: #fee2e2; color: #b42318; }.signal.cover { background: #e0f2fe; color: #0369a1; }.signal.unwind { background: #fef3c7; color: #92400e; }
.hero-market { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; margin-bottom: 14px; }
.hero-quote, .gap-box { min-height: 210px; padding: 24px; background: #fff; border: 1px solid #dbe3ea; border-radius: 6px; }
.hero-quote span { color: #64748b; font-size: 10px; font-weight: 800; }
.hero-quote strong { display: block; margin: 20px 0 4px; font-size: 42px; }
.hero-quote em { font-size: 17px; font-style: normal; font-weight: 800; }
.hero-quote p { margin-top: 20px; color: #475569; font-weight: 700; }
.gap-box { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gap-box h2, .gap-box output { grid-column: 1 / -1; }
.gap-box h2 { margin: 0; font-size: 16px; }
.gap-box input { min-width: 0; width: 100%; }
.gap-box output { padding: 12px; background: #edf8f6; color: #087f6d; font-size: 19px; font-weight: 800; text-align: center; border-radius: 4px; }
.cue-grid { min-height: 150px; padding: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cue-card { padding: 15px; border: 1px solid #e5ebf0; border-radius: 5px; }
.cue-card span { color: #64748b; font-size: 10px; font-weight: 700; }.cue-card strong { display: block; margin: 9px 0 4px; font-size: 17px; }.cue-card em { font-size: 11px; font-style: normal; font-weight: 800; }
.contributor-layout { display: grid; grid-template-columns: 3fr 1fr; gap: 14px; }
.contribution-bars { min-height: 260px; padding: 18px; }
.contribution-row { display: grid; grid-template-columns: 125px 1fr 65px; gap: 10px; align-items: center; margin: 8px 0; font-size: 10px; font-weight: 700; }
.contribution-track { height: 12px; display: flex; align-items: center; background: linear-gradient(to right, #fff 49.7%, #cbd5e1 49.7%, #cbd5e1 50.3%, #fff 50.3%); }
.contribution-fill { height: 8px; position: relative; left: 50%; border-radius: 2px; }.contribution-fill.down { right: 0; left: auto; margin-left: auto; background: #e5484d; }.contribution-fill.up { background: #0fa98b; }
.breadth-ring { width: 170px; height: 170px; margin: 35px auto; display: grid; place-content: center; text-align: center; border-radius: 50%; background: radial-gradient(circle, #fff 58%, transparent 60%), conic-gradient(#0fa98b var(--breadth, 50%), #e5484d 0); }
.breadth-ring strong { font-size: 27px; }.breadth-ring span { color: #64748b; font-size: 10px; }
.strategy-workspace { display: grid; grid-template-columns: 370px minmax(0, 1fr); gap: 14px; align-items: start; }
.leg-picker { max-height: 740px; position: sticky; top: 10px; }
.leg-picker .data-table-wrap { max-height: 680px; }
.compact-table td { padding: 7px; text-align: center !important; }
.leg-button { padding: 5px 7px; border: 1px solid #cbd5e1; border-radius: 3px; background: #fff; color: #087f6d; font-size: 9px; font-weight: 800; cursor: pointer; }
.leg-button.sell { color: #d13942; }
.replay-bar { min-height: 52px; margin-bottom: 14px; padding: 8px 12px; display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid #dbe3ea; border-radius: 6px; }
.replay-bar input { flex: 1; }
.replay-bar button { height: 30px; background: #eef2f5; color: #17202a; }
.payoff-panel canvas { width: 100%; height: 300px; display: block; }
.quiet-button { background: #eef2f5; color: #17202a; }
.remove-leg { border: 0; background: transparent; color: #d13942; font-size: 18px; cursor: pointer; }
.loading-block { color: #64748b; font-size: 12px; }

@media (max-width: 900px) {
    .metric-strip, .cue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .strategy-workspace, .hero-market, .contributor-layout { grid-template-columns: 1fr; }
    .leg-picker { position: static; max-height: none; }
    .tool-controls { align-items: stretch; flex-wrap: wrap; }
}