:root{--viz-1:#a8322a;--viz-2:#b6864d;--viz-3:#517877;--viz-4:#8c6c9d;--viz-5:#bd795e;--viz-6:#60845b;--viz-7:#667aa1;--viz-8:#b16180;--viz-other:#9e9588;--viz-up:var(--up);--viz-down:var(--down);--viz-grid:var(--line);--viz-axis:var(--muted);--viz-ink:var(--ink);--viz-surface:var(--surface);--viz-revenue:var(--blue);--viz-profit:var(--up);--viz-cost:#b6864d;--viz-expense:#b6864d;--viz-price:var(--muted);--viz-buy:var(--up);--viz-sell:var(--down)}
:root[data-theme=dark]{--viz-1:#e8735f;--viz-2:#d8a656;--viz-3:#70aaa6;--viz-4:#bba0d2;--viz-5:#db9e82;--viz-6:#93b18a;--viz-7:#9babd2;--viz-8:#d396b0}
.viz{position:relative;min-width:0;user-select:none;-webkit-user-select:none}
.viz-svg{display:block;max-width:none;overflow:visible;touch-action:pan-y}
.viz-grid{stroke:var(--viz-grid);stroke-width:1;shape-rendering:crispEdges}
.viz-ref{stroke:var(--viz-axis);stroke-width:1;stroke-dasharray:3 4;opacity:.7}
.viz-axis{fill:var(--viz-axis);font:500 14px "IBM Plex Sans",sans-serif;font-variant-numeric:tabular-nums}
.viz-axis.is-strong{fill:var(--viz-ink);font-weight:600}
.viz-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.viz-wash{opacity:.11;stroke:none}
.viz-cross{stroke:var(--viz-axis);stroke-width:1;opacity:.55}
.viz-dot{stroke:var(--viz-surface);stroke-width:2}
.viz-hit{cursor:crosshair}.viz-hit.is-clickable{cursor:pointer}
.viz-col{transition:opacity .15s}.viz-col.is-dim{opacity:.38}
.viz-mark{fill:var(--gold,#c9971f)}
.viz-sankey{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.viz-band{opacity:.34;transition:opacity .15s}.viz-svg.is-focus .viz-band{opacity:.16}.viz-svg.is-focus .viz-band.is-on{opacity:.6}
.viz-node-label{fill:var(--viz-ink);font:600 15px "IBM Plex Sans",sans-serif}
.viz-node-value{fill:var(--viz-axis);font:500 14px "IBM Plex Sans",sans-serif;font-variant-numeric:tabular-nums}
.viz-node-label.is-halo,.viz-node-value.is-halo{paint-order:stroke;stroke:var(--viz-surface);stroke-width:4px;stroke-linejoin:round}
.viz-price{stroke:var(--viz-price);stroke-width:1.6}
.viz-trade{stroke:var(--viz-surface);stroke-width:2;cursor:pointer;opacity:.85;transition:opacity .15s}.viz-trade:hover{opacity:1}
.viz-trade.is-buy{fill:var(--viz-buy)}.viz-trade.is-sell{fill:var(--viz-sell)}
.viz-tip{position:absolute;left:0;top:0;z-index:5;pointer-events:none;min-width:150px;max-width:300px;padding:10px 12px;border-radius:8px;background:var(--surface,#fff);color:var(--ink);border:1px solid var(--line);box-shadow:0 10px 30px -12px rgba(15,34,56,.35);font-size:15px;line-height:1.45;display:flex;flex-direction:column;gap:2px}
.viz-tip[hidden]{display:none}
.viz-tip>b{font-weight:600;font-size:15px}
.viz-tip-value{font:600 16px "IBM Plex Sans",sans-serif;font-variant-numeric:tabular-nums}
.viz-tip ul{list-style:none;margin:6px 0 2px;padding:0;display:grid;gap:4px}
.viz-tip li{display:grid;grid-template-columns:10px 1fr auto auto;gap:8px;align-items:center;font-size:14px}
.viz-tip li i{width:10px;height:10px;border-radius:3px}
.viz-tip li b{font-weight:600;font-variant-numeric:tabular-nums}.viz-tip li em{font-style:normal;color:var(--muted);min-width:42px;text-align:right}
.viz-tip .viz-tip-trades li{grid-template-columns:1fr auto}
.viz-tip-total{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:6px;margin-top:4px;font-size:14px}
.viz-tip .gain{color:var(--viz-up)}.viz-tip .loss{color:var(--viz-down)}
/* Legend: swatch + text in ink colors (identity never by color alone). */
.viz-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 14px;padding:0;list-style:none}
.viz-legend li{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--ink)}
.viz-legend i{width:11px;height:11px;border-radius:3px;flex:none}
.viz-legend small{color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}
/* Segmented control shared by the new pages. */
.seg{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:9px;background:var(--raised)}
.seg button{border:0;background:none;color:var(--muted);font:500 15px "IBM Plex Sans",sans-serif;padding:7px 15px;border-radius:7px;cursor:pointer;min-height:34px;transition:background-color .15s,color .15s}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed=true]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(15,34,56,.12)}
:root[data-theme=dark] .seg button[aria-pressed=true]{background:#2a3038}