table {
    border-collapse:collapse;
}

th, td {
    border:1px solid rgba(255,255,255,.08);
    text-align:center;
}

th {
    background:#0f1726;
    color:#aab6d6;
    font-size:11px;
    padding:4px 6px;
}

tr {
    background:#0b0f17;
    color:#e9eefc;
    font-family:system-ui;
}

td {
    width:26px;
    height:26px;
}

.cellval {
    display:block;
    line-height:26px;
    font-size:11px;
}

/* Heatmap buckets */
.c0 { background:transparent; }
.c1 { background:rgba(139,211,255,.12); box-shadow:inset 0 0 0 2px rgba(139,211,255,.12); }
.c2 { background:rgba(139,211,255,.24); box-shadow:inset 0 0 0 2px rgba(139,211,255,.12); }
.c3 { background:rgba(139,211,255,.36); box-shadow:inset 0 0 0 2px rgba(139,211,255,.12); }
.c4 { background:rgba(139,211,255,.48); box-shadow:inset 0 0 0 2px rgba(139,211,255,.12); }
.c5 { background:rgba(139,211,255,.60); box-shadow:inset 0 0 0 2px rgba(139,211,255,.12); }

.grid-wrap {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
}

/* Optional: make scrolling feel nicer */
.grid-wrap::-webkit-scrollbar {
    height: 10px;
}
.grid-wrap::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.25);
    border-radius: 6px;
}
.grid-wrap::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.08);
}