.live-history[hidden] { display: none; }
.live-history { max-width: 620px; margin: 22px 0; padding: 16px 18px 12px; border-radius: 18px; }
.live-history-heading { display: flex; justify-content: space-between; gap: 12px; font-size: .75rem; color: var(--text-2, #aaa9bb); margin-bottom: 12px; }
.live-history-heading strong { color: var(--text-1, #eeeaf8); font-weight: 600; }
.live-history-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-size: .75rem; margin-bottom: 8px; color: #bc95ff; }
.live-history-legend [data-platform="kick"] { color: #75e85a; }
.live-history-bars { display: flex; align-items: flex-end; justify-content: center; gap: var(--history-square-gap, 1px); height: 100px; border-bottom: 1px solid rgba(255,255,255,.1); }
.live-history-bar { flex: 0 0 var(--history-square-size, 1px); min-width: 0; height: 100%; display: flex; flex-direction: column-reverse; justify-content: flex-start; gap: var(--history-square-gap, 2px); }
.live-history-bar span { width: var(--history-square-size); height: var(--history-square-size); flex-shrink: 0; background: var(--history-purple, #6d51ee); }
.live-history-bar span[data-platform="kick"] { background: #53d938; }
.live-history-bar.is-missing { border-bottom: none; }
.live-history-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: .65rem; color: var(--text-2, #aaa9bb); }
@media(max-width: 480px) { .live-history { padding: 12px; } }

/* Keep clear space below the headline underline on desktop. */
@media (min-width: 992px) {
  .live-history { top: 0; }
}

/* Chart colors for the light theme; panel styling is shared site-wide. */
:root[data-theme="light"] .live-history-bar span {
  background: color-mix(in srgb, var(--history-purple, #6d51ee) 78%, #55516b);
}
:root[data-theme="light"] .live-history-bar span[data-platform="kick"] { background: #299b50; }
:root[data-theme="light"] .live-history-bars { border-bottom-color: rgba(72, 62, 112, .17); }
:root[data-theme="light"] .live-history-heading,
:root[data-theme="light"] .live-history-axis { color: #625c78; }
:root[data-theme="light"] .live-history-heading strong { color: #302647; }