/* ---------- LIVE DEMO (scoped under .tool-demo) ---------- */
.tool-demo{width:100%;max-width:820px;font-family:var(--font-body);}

.tool-demo .sc-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px}
.tool-demo .sc-card{background:var(--panel);border:1.5px solid var(--line);border-radius:4px;padding:14px;cursor:pointer;transition:border-color .18s,background .18s;text-align:center;user-select:none}
.tool-demo .sc-card:hover{background:var(--panel-2)}
.tool-demo .sc-card.active.win{border-color:#22c55e;background:#0d1f13}
.tool-demo .sc-card.active.lose{border-color:var(--red);background:#1f1213}
.tool-demo .sc-card.active.chop{border-color:var(--amber);background:#1f1a0c}
.tool-demo .sc-badge{font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.08em;padding:3px 7px;border-radius:3px;display:inline-block;margin-bottom:7px}
.tool-demo .sc-badge.win{background:rgba(34,197,94,.15);color:#22c55e}
.tool-demo .sc-badge.lose{background:rgba(229,72,77,.15);color:var(--red)}
.tool-demo .sc-badge.chop{background:rgba(255,176,32,.15);color:var(--amber)}
.tool-demo .sc-ticker{font-family:var(--font-display);font-size:.88rem;font-weight:700;color:var(--text);margin-bottom:3px}
.tool-demo .sc-pnl{font-size:1.1rem;font-weight:700;margin-bottom:6px}
.tool-demo .sc-pnl.win{color:#22c55e}.tool-demo .sc-pnl.lose{color:var(--red)}.tool-demo .sc-pnl.chop{color:var(--amber)}
.tool-demo .sc-tagline{font-size:.73rem;color:var(--text-faint);line-height:1.4}

.tool-demo .contract-meta{display:flex;flex-wrap:wrap;gap:5px 14px;align-items:center;margin-bottom:12px;padding:9px 14px;background:var(--panel);border:1px solid var(--line);border-radius:4px;font-size:.82rem;color:var(--text-dim)}
.tool-demo .meta-occ{font-weight:600;color:var(--text);font-size:.85rem;font-family:var(--font-mono)}
.tool-demo .meta-sep{color:var(--text-faint)}
.tool-demo .meta-insight{font-style:italic}
.tool-demo .meta-insight.win{color:#22c55e}.tool-demo .meta-insight.lose{color:var(--red)}.tool-demo .meta-insight.chop{color:var(--amber)}

.tool-demo .chart-section-label{font-family:var(--font-mono);font-size:.71rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);margin-bottom:6px}
.tool-demo .chart-wrapper{background:var(--ink);border:1px solid var(--line);border-radius:4px;overflow:hidden;margin-bottom:14px}
.tool-demo .ub-chart-wrapper{margin-bottom:22px}
.tool-demo canvas#demoChart,.tool-demo canvas#underlyingChart{display:block;width:100%}
.tool-demo .strat-toggles{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px;border-top:1px solid var(--line)}
.tool-demo .strat-toggle{font-family:var(--font-mono);padding:3px 11px;border-radius:20px;border:1.5px solid var(--c);background:transparent;color:var(--c);font-size:.73rem;font-weight:600;cursor:pointer;transition:background .15s,color .15s;line-height:1.7}
.tool-demo .strat-toggle.active{background:var(--c);color:var(--ink)}
.tool-demo .strat-toggle:not(.active):hover{opacity:.75}

.tool-demo .strat-section-label{font-family:var(--font-mono);font-size:.71rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);margin-bottom:7px}
.tool-demo .strat-table{display:flex;flex-direction:column;gap:5px}
.tool-demo .strat-row{display:grid;grid-template-columns:10px 1fr auto;align-items:start;gap:0 12px;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:11px 13px;transition:border-color .15s}
.tool-demo .strat-row.best{border-color:rgba(255,176,32,.4);background:rgba(255,176,32,.045)}
.tool-demo .sdot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px}
.tool-demo .sinfo{min-width:0}
.tool-demo .sname{font-family:var(--font-display);font-size:.84rem;font-weight:600;color:var(--text);margin-bottom:2px}
.tool-demo .sdesc{font-size:.74rem;color:var(--text-dim);line-height:1.4}
.tool-demo .sright{display:flex;flex-direction:column;align-items:flex-end;gap:3px;padding-left:8px}
.tool-demo .spnl{font-family:var(--font-mono);font-size:.95rem;font-weight:700;white-space:nowrap}
.tool-demo .spnl.pos{color:#22c55e}.tool-demo .spnl.neg{color:var(--red)}.tool-demo .spnl.zero{color:var(--text-faint)}
.tool-demo .sexit{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.tool-demo .sexit-badge{font-family:var(--font-mono);display:inline-block;padding:1px 6px;border-radius:3px;font-size:.68rem;font-weight:600;letter-spacing:.03em;white-space:nowrap}
.tool-demo .sexit-badge.eod{background:rgba(139,148,160,.14);color:var(--text-dim)}
.tool-demo .sexit-badge.trailing_stop,.tool-demo .sexit-badge.break_even_stop{background:rgba(110,134,168,.18);color:var(--blue)}
.tool-demo .sexit-badge.hard_stop{background:rgba(229,72,77,.14);color:var(--red)}
.tool-demo .sexit-badge.profit_target{background:rgba(34,197,94,.14);color:#22c55e}
.tool-demo .sexit-time{font-family:var(--font-mono);font-size:.68rem;color:var(--text-faint)}

@media(max-width:540px){
  .tool-demo .sc-tagline{display:none}
  .tool-demo .strat-row{grid-template-columns:10px 1fr auto}
}