.hashrate-history {
    max-width: 1180px;
    margin: -56px auto 100px;
    padding: 36px 40px 34px;
    border: 1px solid var(--line);
    background: linear-gradient(145deg, #10161a, #090c0e);
}

.history-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
}

.history-head h2 {
    font-size: clamp(28px, 4vw, 44px);
}

.history-head p:not(.eyebrow) {
    max-width: 650px;
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.history-ranges {
    display: flex;
    border: 1px solid var(--line);
}

.history-ranges button {
    min-width: 58px;
    padding: 9px 12px;
    border: 0;
    border-right: 1px solid var(--line);
    background: #0a0d0f;
    color: var(--muted);
    font: 700 10px var(--mono);
    cursor: pointer;
}

.history-ranges button:last-child {
    border-right: 0;
}

.history-ranges button:hover,
.history-ranges button.active {
    background: var(--amber);
    color: #090b0c;
}

.history-summary {
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr;
    margin-top: 30px;
    border: 1px solid var(--line);
}

.history-summary > div {
    padding: 14px 18px;
    border-right: 1px solid var(--line);
}

.history-summary > div:last-child {
    border-right: 0;
}

.history-summary small {
    display: block;
    color: var(--muted);
    font: 9px var(--mono);
    letter-spacing: .1em;
}

.history-summary strong {
    display: block;
    margin-top: 3px;
    font: 700 15px var(--mono);
}

.history-canvas-wrap {
    position: relative;
    min-height: 300px;
    margin-top: 20px;
}

#hashrate-chart {
    display: block;
    width: 100%;
}

.history-empty {
    display: grid;
    min-height: 300px;
    place-items: center;
    border: 1px dashed var(--line);
    color: var(--muted);
    text-align: center;
    font-size: 13px;
}

.history-empty[hidden],
.history-tooltip[hidden] {
    display: none;
}

.history-tooltip {
    position: absolute;
    z-index: 2;
    width: 202px;
    padding: 11px 13px;
    border: 1px solid #66501e;
    background: rgba(8, 11, 13, .96);
    box-shadow: 0 14px 36px #000;
    pointer-events: none;
}

.history-tooltip strong,
.history-tooltip span,
.history-tooltip small {
    display: block;
}

.history-tooltip strong {
    color: var(--amber);
    font: 700 14px var(--mono);
}

.history-tooltip span,
.history-tooltip small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px;
}

@media (max-width: 900px) {
    .hashrate-history {
        margin: -35px 20px 75px;
        padding: 28px;
    }
}

@media (max-width: 620px) {
    .history-head {
        align-items: stretch;
        flex-direction: column;
    }

    .history-ranges button {
        flex: 1;
    }

    .history-summary {
        grid-template-columns: 1fr 1fr;
    }

    .history-summary > div:nth-child(2) {
        border-right: 0;
    }

    .history-summary > div:last-child {
        grid-column: 1 / -1;
        border-top: 1px solid var(--line);
    }
}