:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f4f7fb;--panel:#fff;--panel-2:#f8fafc;--control:#f1f5f9;--control-hover:#d8e1ea;--line:#d7dee8;--muted:#657386;--text:#17202b;--subtle:#334155;--green:#07884f;--green-soft:#07884f1c;--amber:#b26a00;--amber-soft:#da810021;--red:#c93d3d;--red-soft:#c93d3d1f;--blue:#1e6bd6;--blue-soft:#1e6bd61f;--track:#e6edf5;--heat-em:#17202b94;--primary-tile-bg:linear-gradient(180deg, #07884f1f, #fff);--error-bg:#fff7df;--shadow:0 16px 40px #0f172a14}html[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0b0d10;--panel:#14181d;--panel-2:#191f25;--control:#101419;--control-hover:#46525e;--line:#28313a;--muted:#8f9ba8;--text:#edf2f7;--subtle:#c5ced7;--green:#36d58c;--green-soft:#36d58c29;--amber:#f6b84b;--amber-soft:#f6b84b26;--red:#ff6b6b;--red-soft:#ff6b6b29;--blue:#58a6ff;--blue-soft:#58a6ff24;--track:#0d1116;--heat-em:#ffffff9e;--primary-tile-bg:linear-gradient(180deg, #36d58c21, #14181d);--error-bg:#271d0c;--shadow:0 20px 60px #00000038}*{box-sizing:border-box}html,body{background:var(--bg);min-height:100%;color:var(--text);margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input{font:inherit}button{cursor:pointer}.shell{min-height:100vh;padding:18px}.topbar{grid-template-columns:minmax(220px,.7fr) minmax(720px,1.5fr);align-items:stretch;gap:16px;margin-bottom:16px;display:grid}.title-block{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.brand-heading{align-items:center;gap:12px;min-width:0;display:flex}.brand-logo{flex:0 0 42px;width:42px;height:42px;display:block}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.eyebrow{color:var(--green);letter-spacing:0;text-transform:uppercase;margin:0 0 6px;font-size:12px;font-weight:800}h1{letter-spacing:0;margin:0;font-size:34px;line-height:1.05}.market-strip{grid-template-columns:1.15fr 1fr .8fr .9fr;gap:10px;display:grid}.market-tile,.panel,.expiry-card{border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow)}.market-tile{border-radius:8px;flex-direction:column;justify-content:center;min-height:76px;padding:13px 14px;display:flex}.market-tile span,.metric span,.quote-line span,.bar-line span,.field label,.timestamp,.micro{color:var(--muted);font-size:12px}.market-tile strong{font-variant-numeric:tabular-nums;align-items:center;gap:7px;margin-top:5px;font-size:20px;display:flex}.market-tile em{color:var(--muted);align-items:center;gap:3px;margin-top:5px;font-size:12px;font-style:normal;display:flex}.market-tile.primary{background:var(--primary-tile-bg)}.theme-toggle{border:1px solid var(--line);background:var(--panel);width:34px;height:34px;color:var(--text);box-shadow:none;border-radius:8px;flex:0 0 34px;justify-content:center;align-items:center;display:inline-flex}.theme-toggle:hover{border-color:var(--control-hover);background:var(--control)}.up{color:var(--green)!important}.down{color:var(--red)!important}.status.ok strong{color:var(--green)}.status.error strong,.status.stale strong{color:var(--amber)}.workspace{grid-template-columns:260px minmax(640px,1fr) 340px;align-items:start;gap:16px;display:grid}.panel{border-radius:8px}.sidebar,.detail{max-height:calc(100vh - 36px);padding:14px;position:sticky;top:18px;overflow:auto}.main-column{flex-direction:column;gap:16px;min-width:0;display:flex}.panel-title{align-items:center;gap:8px;margin-bottom:14px;font-weight:800;display:flex}.panel-title.spread{justify-content:space-between}.panel-title.spread span{align-items:center;gap:8px;display:flex}.panel-title em{color:var(--muted);font-size:12px;font-style:normal;font-weight:600}.field{margin-bottom:18px}.field label{margin-bottom:8px;font-weight:700;display:block}.segmented{border:1px solid var(--line);background:var(--control);border-radius:8px;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:4px;display:grid}.segmented.vertical{grid-template-columns:repeat(4,minmax(0,1fr))}.segmented button,.expiry-list button,.toggle,.expiry-card,.table-row,.heat{transition:border-color .15s,background .15s,transform .15s}.segmented button{min-height:34px;color:var(--muted);background:0 0;border:0;border-radius:6px;font-weight:700}.segmented button.active{background:var(--blue-soft);color:var(--text)}.expiry-list{grid-template-columns:1fr 1fr;gap:7px;max-height:280px;display:grid;overflow:auto}.expiry-list button{border:1px solid var(--line);background:var(--control);min-height:44px;color:var(--text);border-radius:7px}.expiry-list button.active{border-color:var(--green);background:var(--green-soft)}.expiry-list em{color:var(--muted);margin-top:2px;font-size:11px;font-style:normal;display:block}.range-line{grid-template-columns:1fr 50px;align-items:center;gap:10px;display:grid}input[type=range]{width:100%;accent-color:var(--green)}.range-line strong{font-variant-numeric:tabular-nums;text-align:right}.toggle{border:1px solid var(--line);color:var(--subtle);background:var(--control);border-radius:8px;align-items:center;gap:9px;padding:11px;font-size:13px;font-weight:700;display:flex}.toggle input{width:16px;height:16px;accent-color:var(--green)}.expiry-strip{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;display:grid}.expiry-card{min-height:112px;color:var(--text);text-align:left;border-radius:8px;padding:12px}.expiry-card:hover,.table-row:hover,.heat:hover{border-color:var(--control-hover);transform:translateY(-1px)}.expiry-card.active{border-color:var(--green);background:var(--green-soft)}.expiry-card span,.expiry-card em{color:var(--muted);font-size:12px;font-style:normal;display:block}.expiry-card strong{font-variant-numeric:tabular-nums;margin:5px 0 8px;font-size:22px;display:block}.mini-bars{gap:3px;height:5px;margin-top:10px;display:flex}.mini-bars i,.mini-bars b{border-radius:999px;min-width:3px;display:block}.mini-bars i{background:var(--green)}.mini-bars b{background:var(--blue)}.heatmap-panel,.table-panel{padding:14px}.heatmap-grid{flex-direction:column;gap:10px;display:flex;overflow-x:auto}.heat-row{grid-template-columns:70px 1fr;align-items:stretch;gap:8px;min-width:780px;display:grid}.heat-expiry{border-right:1px solid var(--line);flex-direction:column;justify-content:center;display:flex}.heat-expiry strong{font-size:14px}.heat-expiry span{color:var(--muted);font-size:12px}.heat-cells{grid-template-columns:repeat(18,minmax(72px,1fr));gap:6px;display:grid}.heat{border:1px solid var(--line);min-height:62px;color:var(--text);text-align:left;border-radius:7px;padding:7px;position:relative}.heat strong,.heat span,.heat em{font-variant-numeric:tabular-nums;display:block}.heat strong{font-size:14px}.heat span{color:var(--subtle);margin-top:4px;font-size:12px}.heat em{color:var(--heat-em);font-size:11px;font-style:normal;position:absolute;bottom:6px;right:7px}.heat-high{background:#36d58c4d;border-color:#36d58c7a}.heat-mid{background:#36d58c2e;border-color:#36d58c47}.heat-low{background:#58a6ff2b}.heat-muted{background:var(--control);opacity:.78}.heat-risk{background:var(--amber-soft);border-color:#f6b84b80}.heat.selected,.table-row.active{outline:2px solid var(--green);outline-offset:1px}.contracts-table{overflow-x:auto}.table-head,.table-row{grid-template-columns:minmax(190px,1.7fr) .7fr .9fr .65fr .65fr .85fr .85fr 1.2fr;align-items:center;gap:12px;min-width:980px;display:grid}.table-head{color:var(--muted);padding:0 10px 9px;font-size:12px;font-weight:800}.table-row{border:1px solid var(--line);background:var(--control);width:100%;min-height:58px;color:var(--text);text-align:left;border-radius:8px;margin-bottom:7px;padding:9px 10px}.table-row span{font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.table-row strong,.table-row em{text-overflow:ellipsis;display:block;overflow:hidden}.table-row em{color:var(--muted);margin-top:3px;font-size:11px;font-style:normal}.flag-list{flex-wrap:wrap;gap:5px;display:flex}.flag-list i,.flags span,.flags .clean{background:var(--amber-soft);color:var(--amber);border-radius:999px;align-items:center;gap:4px;padding:3px 6px;font-size:11px;font-style:normal;font-weight:800;display:inline-flex}.detail{padding:14px}.selected-contract{border:1px solid var(--line);background:var(--control);border-radius:8px;padding:13px}.selected-contract span,.selected-contract em{color:var(--muted);font-size:12px;font-style:normal}.selected-contract strong{margin:5px 0;font-size:28px;display:block}.metric-grid{grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;display:grid}.metric{border:1px solid var(--line);background:var(--control);border-radius:8px;min-height:66px;padding:10px}.metric strong{font-variant-numeric:tabular-nums;margin-top:8px;font-size:18px;display:block}.metric.strong{background:var(--green-soft);border-color:#36d58c73}.detail-section{margin-top:18px}.detail-section h2{margin:0 0 9px;font-size:14px}.quote-line{background:var(--green-soft);border:1px solid #36d58c40;border-radius:8px;grid-template-columns:52px 1fr 80px;align-items:center;min-height:38px;padding:8px 10px;display:grid}.quote-line.ask{background:var(--red-soft);border-color:#ff6b6b40;margin-top:7px}.quote-line strong{font-variant-numeric:tabular-nums}.quote-line strong small{color:var(--muted);margin-top:2px;font-size:12px;font-weight:800;display:block}.quote-line em{color:var(--muted);text-align:right;font-size:12px;font-style:normal}.greeks{grid-template-columns:1fr 1fr;gap:8px;display:grid}.flags{flex-wrap:wrap;gap:6px;margin-top:10px;display:flex}.flags .clean{background:var(--green-soft);color:var(--green)}.vol-bars{flex-direction:column;gap:9px;display:flex}.bar-line{grid-template-columns:66px 1fr 58px;align-items:center;gap:8px;display:grid}.bar-line div{background:var(--track);border-radius:999px;height:8px;overflow:hidden}.bar-line i{border-radius:inherit;background:var(--blue);height:100%;display:block}.bar-line strong{text-align:right;font-size:12px}.oi-balance{grid-template-columns:52px 1fr 55px;align-items:center;gap:8px;display:grid}.oi-balance div{background:var(--track);border-radius:999px;height:10px;display:flex;overflow:hidden}.oi-balance i,.oi-balance b{display:block}.oi-balance i{background:var(--green)}.oi-balance b{background:var(--blue)}.timestamp{align-items:center;gap:6px;margin-top:16px;display:flex}.empty-state{min-height:120px;color:var(--muted);justify-content:center;align-items:center;display:flex}.error-toast{background:var(--error-bg);max-width:520px;color:var(--amber);box-shadow:var(--shadow);border:1px solid #f6b84b61;border-radius:8px;padding:12px 14px;font-size:13px;position:fixed;bottom:18px;right:18px}@media (max-width:1260px){.topbar,.workspace{grid-template-columns:1fr}.sidebar,.detail{max-height:none;position:static}.sidebar{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;display:grid}.sidebar .panel-title,.sidebar .toggle{grid-column:1/-1}.expiry-list{max-height:180px}}@media (max-width:760px){.shell{padding:10px}.topbar{gap:10px;margin-bottom:10px}.title-block{align-items:center}.brand-heading{gap:9px}.brand-logo{flex-basis:34px;width:34px;height:34px}h1{font-size:22px}.market-strip{grid-template-columns:1fr 1fr;gap:8px}.market-tile{min-height:64px;padding:9px 10px}.market-tile strong{font-size:17px}.workspace,.metric-grid,.greeks{grid-template-columns:1fr}.workspace,.main-column{gap:10px}.sidebar,.heatmap-panel,.table-panel,.detail{padding:10px}.sidebar{grid-template-columns:1fr 1fr;gap:10px}.sidebar .panel-title,.expiry-field,.liquidity-toggle{grid-column:1/-1}.field{margin-bottom:0}.field label{margin-bottom:6px}.segmented button{min-height:32px}.expiry-list{scrollbar-width:thin;gap:7px;max-height:none;padding-bottom:2px;display:flex;overflow-x:auto}.expiry-list button{min-width:72px;min-height:40px;padding:6px 8px}.range-line{grid-template-columns:1fr;gap:4px}.range-line strong{text-align:left}.expiry-strip{scrollbar-width:thin;gap:8px;padding-bottom:2px;display:flex;overflow-x:auto}.expiry-card{min-width:132px;min-height:96px;padding:10px}.expiry-card strong{font-size:18px}.panel-title{margin-bottom:10px}.heat-row{grid-template-columns:56px 1fr;min-width:650px}.heat-cells{grid-template-columns:repeat(18,minmax(64px,1fr))}.heat{min-height:56px;padding:6px}.table-head,.table-row{grid-template-columns:minmax(150px,1.4fr) .7fr .9fr .6fr .65fr .75fr .8fr 1fr;min-width:820px}.selected-contract strong{font-size:22px}.quote-line{grid-template-columns:48px 1fr 72px}}