.button { text-decoration: none; }
.heatmap-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; color: var(--muted); font-size: 10px; }
.heatmap-legend span { display: flex; align-items: center; gap: 5px; }
.heatmap-legend i { width: 9px; height: 9px; border-radius: 3px; }
.heatmap-grid { display: grid; grid-template-columns: repeat(auto-fill, 22px); gap: 7px; }
.heatmap-cell { position: relative; width: 22px; height: 22px; padding: 0; border: 1px solid #ffffff18; border-radius: 5px; cursor: pointer; }
.heatmap-cell.green, .heatmap-legend .green { background: #38d996; }
.heatmap-cell.yellow, .heatmap-legend .yellow { background: #e8cc59; }
.heatmap-cell.orange, .heatmap-legend .orange { background: #f28a45; }
.heatmap-cell.red, .heatmap-legend .red { background: #f26969; }
.heatmap-cell.gray, .heatmap-legend .gray { background: #626d7c; }
.heatmap-cell:hover, .heatmap-cell:focus-visible { z-index: 3; outline: 2px solid var(--text); outline-offset: 2px; }
.heatmap-tooltip { position: absolute; left: 50%; bottom: calc(100% + 9px); display: none; width: max-content; max-width: 230px; padding: 9px 11px; transform: translateX(-50%); color: var(--text); background: #080b10; border: 1px solid var(--line); border-radius: 7px; box-shadow: 0 10px 30px #000b; text-align: left; pointer-events: none; }
.heatmap-tooltip b, .heatmap-tooltip small { display: block; }
.heatmap-tooltip small { color: var(--muted); font-size: 10px; }
.heatmap-cell:hover .heatmap-tooltip, .heatmap-cell:focus-visible .heatmap-tooltip { display: block; }