.heatmap-panel { position:fixed;bottom:20px;right:20px;width:240px;z-index:51;background:#fff;color:#111;border:1px solid #111;box-shadow:4px 4px 0 #1111;font:10px 'IBM Plex Mono',monospace; }
.heatmap-toggle { display:flex;align-items:center;gap:12px;width:100%;padding:12px;background:#fff;border:0;text-align:left;font-size:10px; }
.heatmap-toggle>span:first-child { font-weight:500; }.heatmap-toggle b { font-size:16px;line-height:1; }
.heatmap-live { margin-left:auto;display:flex;align-items:center;gap:5px;font-size:8px; }.heatmap-live:before { content:'';width:5px;height:5px;background:#c6bc00; }
#heatmap-body { border-top:1px solid #ddd;padding:12px; }#heatmap-body[hidden] { display:none; }
.heatmap-meta { display:flex;justify-content:space-between;gap:10px;font-size:7px;color:#777;margin-bottom:9px; }
.heatmap-preview { position:relative;background:repeating-linear-gradient(90deg,transparent 0 25%,#ddd8 25% calc(25% + 1px)),repeating-linear-gradient(0deg,#f7f7f5 0 25%,#ddd8 25% calc(25% + 1px));border:1px solid #e6e6e3; }
.heatmap-preview canvas { display:block;width:100%;height:126px; }
.heatmap-empty { position:absolute;inset:0;display:grid;place-items:center;font-size:8px;color:#666;pointer-events:none; }.heatmap-empty[hidden] { display:none; }
.heatmap-legend { display:flex;align-items:center;gap:7px;margin:8px 0 12px;color:#888;font-size:7px; }.heatmap-legend i { flex:1;height:4px;background:linear-gradient(90deg,#fff20033,#fff200,#111); }
.heatmap-actions { display:flex;gap:6px; }.heatmap-actions button { flex:1;background:#fff;border:1px solid #ccc;padding:7px 5px;font-size:8px; }.heatmap-actions button:hover { background:#fff200; }.heatmap-actions [aria-pressed=true] { background:#111;color:#fff200; }
.heatmap-panel p { font-size:7px;color:#888;margin-top:10px; }
.heatmap-overlay { position:fixed;inset:0;width:100%;height:100%;z-index:44;opacity:.4;pointer-events:none; }.heatmap-overlay[hidden] { display:none; }
[data-mode=simple] .heatmap-panel,[data-mode=simple] .heatmap-overlay,[data-transition] .heatmap-panel,[data-transition] .heatmap-overlay,.heatmap-panel[hidden] { display:none; }
@media(max-width:760px),(hover:none),(pointer:coarse) { .heatmap-panel,.heatmap-overlay { display:none!important; } }