/* Scoped styles: only within .sx-heatmap-root */
.sx-heatmap-root { --sx-bg:#0c0b16; --sx-card:#141326; --sx-muted:#7f8ea3; --sx-text:#dbe4ff; --sx-accent:#7aadff; --sx-border:#24233f; --sx-badge:#2b2a44; }
.sx-heatmap-root * { box-sizing:border-box; }
.sx-heatmap-root .sx-card { background:var(--sx-card); border:1px solid var(--sx-border); border-radius:12px; overflow:hidden; color:var(--sx-text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; }
.sx-heatmap-root .sx-card-hd { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--sx-border); background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.0)); }
.sx-heatmap-root .sx-left { display:flex; gap:10px; align-items:center; }
.sx-heatmap-root .sx-badge { font-size:12px; padding:2px 8px; border-radius:999px; background:var(--sx-badge); color:var(--sx-accent); border:1px solid var(--sx-border); }
.sx-heatmap-root .sx-right { display:flex; align-items:center; gap:8px; }
.sx-heatmap-root .sx-lbl { font-size:12px; opacity:.85; }
.sx-heatmap-root select { background:#0e0d1f; color:var(--sx-text); border:1px solid var(--sx-border); border-radius:8px; padding:6px 10px; outline:none; }
.sx-heatmap-root .sx-card-bd { position:relative; }
.sx-heatmap-root .sx-canvas-wrap { position:relative; width:100%; }
.sx-heatmap-root canvas.sx-canvas { display:block; width:100%; height:100%; background:var(--sx-bg); border-bottom-left-radius:12px; border-bottom-right-radius:12px; }
.sx-heatmap-root .sx-legend { position:absolute; right:12px; top:12px; display:flex; align-items:center; gap:8px; font-size:12px; color:var(--sx-muted); }
.sx-heatmap-root .sx-legend .sx-grad { width:160px; height:10px; display:inline-block; border-radius:999px; border:1px solid var(--sx-border);
 background: linear-gradient(90deg, #2a004b 0%, #18425a 40%, #2aa6a6 60%, #bbee55 85%, #ffd84a 100%); }
/* Tooltip */
.sx-heatmap-root .sx-tip { position:absolute; pointer-events:none; background:rgba(12,11,22,.96); border:1px solid var(--sx-border); color:var(--sx-text); padding:6px 8px; border-radius:8px; font-size:12px; box-shadow:0 10px 30px rgba(0,0,0,.4); transform:translate(-50%,-110%); }
.sx-heatmap-root .sx-card-ft { font-size:12px; color:var(--sx-muted); padding:10px 14px; border-top:1px solid var(--sx-border); }