:root{ --bg:#0b0f14; --panel:#11161e; --muted:#718096; --text:#f1f5f9; --accent:#16a34a; --danger:#ef4444; --warn:#f59e0b; --line:#1f2937; }
.ndx-sim-wrap[data-theme="light"]{ --bg:#f8fafc; --panel:#ffffff; --muted:#475569; --text:#0f172a; --line:#e5e7eb; }
.ndx-sim-wrap, .ndx-sim-wrap * { box-sizing:border-box; }
.ndx-sim-wrap td, .ndx-sim-wrap th, .ndx-sim-wrap button, .ndx-sim-wrap input, .ndx-sim-wrap select { line-height:1.4; overflow:visible; white-space:nowrap; }
.ndx-sim-wrap{ background:var(--bg); color:var(--text); border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.2); padding:16px; }
.ndx-head{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:12px; }
.ndx-head .title{ font-weight:700; font-size:18px; }
.ndx-controls{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.ndx-controls select, .ndx-controls input{ background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:8px 10px; min-width:90px; }
.ndx-grid{ display:grid; gap:16px; grid-template-columns: 1fr; }
@media (min-width: 992px){ .ndx-grid{ grid-template-columns: 1.2fr .8fr; } }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px; }
.card h3{ margin:0 0 8px; font-size:15px; }
.small{ font-size:12px; color:var(--muted); }
.table{ width:100%; border-collapse:separate; border-spacing:0 6px; table-layout:fixed; }
.table thead th{ text-align:left; font-size:12px; color:var(--muted); font-weight:600; }
.row{ background:rgba(255,255,255,.02); border:1px solid var(--line); }
.row td{ padding:8px 10px; font-size:13px; }
.badge{ padding:3px 8px; border-radius:999px; font-size:11px; }
.badge.green{ background:rgba(22,163,74,.2); color:#34d399; }
.badge.red{ background:rgba(239,68,68,.2); color:#fca5a5; }
.badge.yellow{ background:rgba(245,158,11,.2); color:#fcd34d; }
.btn{ cursor:pointer; background:var(--line); color:var(--text); border:0; border-radius:10px; padding:8px 10px; }
.btn.buy{ background:rgba(22,163,74,.15); border:1px solid #14532d; }
.btn.sell{ background:rgba(239,68,68,.15); border:1px solid #7f1d1d; }
.btn.roll{ background:rgba(59,130,246,.15); border:1px solid #1e3a8a; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.flex{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.kpi{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
@media (min-width: 768px){ .kpi{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
.kpi .box{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px; }
.kpi .label{ font-size:11px; color:var(--muted); }
.kpi .value{ font-weight:700; margin-top:2px; }
.payoff{ min-height:180px; width:100%; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)); border-radius:12px; border:1px dashed var(--line); position:relative; overflow:hidden; }
.payoff .axis{ position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--line); }
.payoff .pl{ position:absolute; bottom:50%; left:0; right:0; height:1px; background:var(--line); }
.payoff .dot{ position:absolute; width:8px; height:8px; border-radius:999px; background:var(--accent); transform:translate(-50%, 50%); }