:root{--bg:#0b1220;--card:#0f1b2a;--card2:#0d1624;--text:#e5e7eb;--muted:#9ca3af;--line:#223040;--btn:#19314d;--btn2:#0f243a;--good:#16a34a;--bad:#ef4444;--warn:#f59e0b;--pill:#0f1b2a;--app-w: 1100px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}a{color:inherit}.wrap{max-width:var(--app-w);margin:0 auto;padding:14px}.header{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:10px}.brand{display:flex;gap:10px;align-items:center}.brand .title{font-weight:400;letter-spacing:.2px;font-size:18px}.brand .sub{color:var(--muted);font-size:12px;margin-top:2px}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.row.tiny{gap:6px}.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:0 10px 24px #00000040}.btn{padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--btn);color:#fff;cursor:pointer}.btn:hover{filter:brightness(1.1)}.btn.secondary{background:var(--btn2)}.btn.danger{background:#3a0f15;border-color:#5b1a22}.input{width:220px;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:#0e1a2a;color:var(--text)}.small{width:160px}.muted{color:var(--muted)}.badge{display:inline-flex;align-items:center;justify-content:center;padding:2px 10px;border-radius:999px;border:1px solid var(--line);background:var(--pill);font-size:12px;font-weight:400;letter-spacing:.2px}.badge.good{border-color:#16a34a80;color:#b7f7c8}.badge.bad{border-color:#ef444480;color:#fecaca}.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}.tab{padding:8px 10px;border-radius:999px;border:1px solid var(--line);background:#0f1b2a;color:var(--text);cursor:pointer;font-weight:400;font-size:13px}.tab.active{background:#1c6fe826;border-color:#1c6fe880}.tableWrap{overflow:auto;border-radius:14px;border:1px solid var(--line)}table.grid{width:100%;border-collapse:collapse;min-width:880px;background:var(--card2)}table.grid th,table.grid td{padding:10px;border-bottom:1px solid var(--line);text-align:left;font-size:13px;white-space:nowrap;font-variant-numeric:tabular-nums}table.grid thead{background:#0f1c2c;position:sticky;top:0;z-index:2}table.grid tbody tr:hover{background:#15253a}.right{margin-left:auto}.hr{height:1px;background:var(--line);margin:10px 0}.clickRow{cursor:pointer}.clickRow:hover{filter:brightness(1.08)}.payoffModal{width:min(980px,calc(100vw - 24px))}.chartShell{margin-top:10px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#ffffff05}.payoffSvg{width:100%;height:auto;display:block;touch-action:none}.spotDragOverlay{fill:transparent;cursor:ew-resize}.axisLine{stroke:#ffffff38;stroke-width:1}.strikeLine{stroke:#ef4444;stroke-width:2}.beLine{stroke:#fff;stroke-width:2}.spotLine{stroke:#4ade80;stroke-width:3}.payoffPath{fill:none;stroke:#3b82f6;stroke-width:3}.payoffControls{margin-top:10px}.pill{border:1px solid var(--line);border-radius:10px;padding:8px 10px;display:inline-flex;flex-direction:column;gap:2px}.tinyLabel{font-size:10px;font-weight:400;letter-spacing:.02em;opacity:.8}.pill>div:not(.tinyLabel){font-size:12px;font-weight:400}.tinyInput{height:22px;padding:0 6px;border-radius:8px;font-size:12px;font-weight:400;max-width:60px}.gridLine{stroke:#ffffff14;stroke-width:1}.axisText{fill:#ffffffe6;font-size:20px;font-weight:400}.chipText{fill:#fffffff2;font-size:18px;font-weight:400}.axisTick{fill:#ffffffd9;font-size:18px;font-weight:400}.modalBack{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;align-items:center;justify-content:center;padding:14px;z-index:50}.modal{width:min(680px,96vw);max-height:min(80vh,800px);overflow:auto}.cols{display:grid;grid-template-columns:1fr;gap:8px}.chk{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:#0f1b2a}.chk input{transform:scale(1.2)}.dragHandle{display:inline-flex;align-items:center;justify-content:center;width:18px;opacity:.75;cursor:grab;-webkit-user-select:none;user-select:none}.chk:active .dragHandle{cursor:grabbing}@media(max-width:700px){.wrap{padding:10px}.input{width:100%}table.grid{min-width:780px}}
