*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#131722;color:#d1d4dc;overflow:hidden}#app{display:flex;flex-direction:column;height:100vh}#header{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background:#1e222d;border-bottom:1px solid #2a2e39;height:42px;flex-shrink:0}.header-left{display:flex;align-items:center;gap:10px}.header-left h1{font-size:13px;font-weight:700;color:#e0e3eb;letter-spacing:.5px}.header-separator{width:1px;height:20px;background:#363a45}#date-picker{background:#2a2e39;border:1px solid #363a45;border-radius:3px;color:#d1d4dc;font-size:12px;padding:3px 8px;cursor:pointer;font-family:inherit}#date-picker::-webkit-calendar-picker-indicator{filter:invert(.7)}.stat{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:#e0e3eb}.header-center{display:flex;gap:8px}.level-badge{padding:2px 10px;border-radius:3px;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}.level-badge.call-wall{background:#00c8531f;color:#00c853;border:1px solid rgba(0,200,83,.25)}.level-badge.put-wall{background:#ff17441f;color:#ff1744;border:1px solid rgba(255,23,68,.25)}.level-badge.gamma-flip{background:#ffab001f;color:#ffab00;border:1px solid rgba(255,171,0,.25)}.header-right{display:flex;align-items:center;gap:10px}#expiry-select{background:#2a2e39;border:1px solid #363a45;border-radius:3px;color:#d1d4dc;font-size:11px;padding:3px 6px;cursor:pointer;font-family:inherit}.status{font-size:11px;padding:2px 8px;border-radius:3px;background:#ffab001f;color:#ffab00}.status.connected{background:#00c8531f;color:#00c853}.status.error{background:#ff17441f;color:#ff1744}.timestamp{font-size:11px;color:#787b86;font-variant-numeric:tabular-nums}#view-tabs{display:flex;align-items:center;gap:0;background:#1a1e2b;border-bottom:1px solid #2a2e39;height:30px;flex-shrink:0;padding:0 12px}.view-tab{background:none;border:none;border-bottom:2px solid transparent;color:#787b86;font-size:11px;font-weight:600;font-family:inherit;text-transform:uppercase;letter-spacing:.5px;padding:6px 16px;cursor:pointer;transition:color .15s,border-color .15s}.view-tab:hover{color:#d1d4dc}.view-tab.active{color:#4fc3f7;border-bottom-color:#4fc3f7}.view-tab.active[data-view=charm],.view-tab.active[data-view=hiro]{color:#bb86fc;border-bottom-color:#bb86fc}.level-badge.charm-wall{background:#bb86fc1f;color:#bb86fc;border:1px solid rgba(187,134,252,.25)}.level-badge.charm-flip{background:#ffab001f;color:#ffab00;border:1px solid rgba(255,171,0,.25)}.level-badge.charm-net,.level-badge.hiro-label{background:#bb86fc1f;color:#bb86fc;border:1px solid rgba(187,134,252,.25)}#hiro-legend{position:absolute;top:8px;right:70px;display:flex;gap:12px;z-index:5;background:#1e222dd9;padding:4px 10px;border-radius:4px;border:1px solid #2a2e39}.hiro-legend-item{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.3px}.hiro-swatch{display:inline-block;width:12px;height:3px;border-radius:1px}.hiro-swatch.net{background:#bb86fc;height:3px}.hiro-swatch.call{background:#26a69a;height:2px;border-top:1px dashed #26a69a}.hiro-swatch.put{background:#ef5350;height:2px;border-top:1px dashed #ef5350}.hiro-legend-item.hiro-net{color:#bb86fc}.hiro-legend-item.hiro-call{color:#26a69a}.hiro-legend-item.hiro-put{color:#ef5350}#main-content{flex:1;display:flex;overflow:hidden}#strike-panel{width:320px;min-width:280px;border-right:1px solid #2a2e39;display:flex;flex-direction:column;background:#131722}#strike-panel-header{padding:6px 12px;font-size:11px;color:#787b86;border-bottom:1px solid #1e222d;text-transform:uppercase;letter-spacing:.5px}#strike-canvas{flex:1;width:100%;cursor:crosshair;display:block}#chart-panel{flex:1;position:relative}#chart-container{width:100%;height:100%}#scrubber-bar{display:flex;align-items:center;gap:12px;padding:4px 16px;background:#1e222d;border-top:1px solid #2a2e39;height:32px;flex-shrink:0}#scrubber-label{font-size:11px;color:#787b86;min-width:100px}#time-scrubber{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;background:#2a2e39;border-radius:2px;outline:none;cursor:pointer}#time-scrubber::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:#4fc3f7;cursor:pointer}#time-scrubber:disabled{opacity:.5;cursor:default}#time-scrubber:disabled::-webkit-slider-thumb{background:#787b86}#scrubber-time{font-size:11px;color:#d1d4dc;font-variant-numeric:tabular-nums;min-width:80px;text-align:right}