.hashrate-panel { margin: 32px 0; border: 1px solid var(--line-strong); background: var(--surface); padding: 28px 32px 22px; scroll-margin-top: 24px; min-width: 0; max-width: 100%; }
.hashrate-heading { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.hashrate-heading h2 { font-size: 25px; letter-spacing: -.035em; margin: 9px 0 0; font-weight: 500; }
.history-badge { border: 1px solid var(--line); padding: 7px 10px; color: var(--muted); font: 10px/1.5 var(--mono); white-space: nowrap; }
.hashrate-panel[data-history-state="current"] .history-badge { border-color: var(--cyan); color: var(--cyan); }
.hashrate-panel[data-history-state="stale"] .history-badge, .hashrate-panel[data-history-state="partial"] .history-badge, .hashrate-panel[data-history-state="unavailable"] .history-badge { border-color: var(--amber); color: var(--amber); }
.hashrate-toolbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 26px; }
.history-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; color: var(--gold-light); font: 40px/1.15 var(--mono); letter-spacing: -.05em; }
.history-value span { font-size: 18px; letter-spacing: 0; }
.history-sample { display: block; margin-top: 8px; color: var(--muted); font: 10px/1.6 var(--mono); letter-spacing: .01em; min-height: 16px; }
.history-ranges { display: flex; gap: 8px; flex-wrap: wrap; }
.history-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 18px; }
.history-scales { display: flex; gap: 0; }
.history-scales button + button { border-left: 0; }
.history-ranges button, .history-scales button { min-width: 53px; min-height: 39px; padding: 9px 13px; border: 1px solid var(--line-strong); background: var(--base); color: var(--muted); border-radius: 0; font: 11px/1.5 var(--mono); cursor: pointer; }
.history-controls button:hover { color: var(--ink); border-color: var(--gold-light); }
.history-controls button[aria-pressed="true"] { background: var(--gold-light); color: var(--base); border-color: var(--gold-light); }
.history-ranges button:disabled { opacity: .45; cursor: default; }
.history-message { color: var(--muted); font: 12px/1.65 var(--sans); margin: 16px 0 0; max-width: 80ch; }
.history-message:empty { display: none; }
.hashrate-panel[data-history-state="stale"] .history-message, .hashrate-panel[data-history-state="unavailable"] .history-message { color: var(--amber); }
.history-plot { margin-top: 26px; position: relative; height: 310px; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; }
.history-plot canvas { display: block; height: 100%; width: 100%; touch-action: pan-y; cursor: crosshair; }
.history-plot canvas:focus-visible { outline-offset: 7px; }
.history-tooltip { position: absolute; z-index: 2; pointer-events: none; padding: 12px 14px; border: 1px solid var(--line-strong); background: var(--base); color: var(--muted); font: 10px/1.6 var(--mono); white-space: normal; min-width: min(164px,100%); max-width: min(240px,100%); overflow-wrap: anywhere; }
.history-tooltip[hidden] { display: none; }
.history-tooltip strong { display: block; color: var(--gold-light); font-size: 18px; font-weight: 500; margin-bottom: 4px; }
.history-caption { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font: 10px/1.6 var(--mono); margin-top: 11px; }
.history-legend::before { content: ''; display: inline-block; width: 18px; border-top: 2px solid var(--gold-light); vertical-align: middle; margin-right: 10px; }
.history-footer { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 18px; border-top: 1px solid var(--line); margin-top: 22px; padding-top: 17px; }
.history-footer p { color: var(--muted); font: 11px/1.7 var(--sans); margin: 0; }
.history-footer details { margin-left: auto; max-width: 100%; color: var(--muted); font: 11px/1.7 var(--sans); }
.history-footer summary { color: var(--cyan); font: 10px/1.6 var(--mono); cursor: pointer; }
.history-footer details[open] { flex-basis: 100%; margin-left: 0; }
.history-footer details p { max-width: 90ch; margin-top: 10px; }
.history-error { color: var(--amber); padding: 60px 10px; font-size: 14px; }
@media (max-width: 720px) {
 .hashrate-panel { padding: 22px 18px 18px; margin-block: 24px; }
 .hashrate-heading { flex-direction: column; gap: 12px; }
 .hashrate-heading h2 { font-size: 22px; max-width: 18ch; }
 .history-badge { padding: 4px 7px; font-size: 9px; }
 .hashrate-toolbar { flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 24px; }
 .history-value { font-size: 34px; }
 .history-controls { width: 100%; justify-content: flex-start; }
 .history-scales button { min-height: 40px; }
 .history-ranges { width: 100%; gap: 7px; }
 .history-ranges button { flex: 1; min-width: 0; min-height: 40px; padding-inline: 8px; }
 .history-plot { --history-plot-height: 250px; height: 250px; margin-top: 24px; }
 .history-caption { flex-direction: column; gap: 7px; font-size: 9px; }
 .history-footer { margin-top: 18px; }
 .history-footer details { margin-left: 0; }
}