/* Additive build 3 rules. Keep the existing knpa.css. */
.radio-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; align-items: center; gap: .65rem; }
.radio-header .radio-station { grid-column: 1; grid-row: 1; justify-self: start; min-width: 0; }
.radio-header .radio-status { grid-column: 2; grid-row: 1; justify-self: center; text-align: center; }
.radio-header .radio-station-state { grid-column: 3; grid-row: 1; justify-self: end; text-align: right; font-size: .75rem; overflow-wrap: anywhere; }
.radio-header .radio-listeners { margin-top: .35rem; font-size: .65rem; }
.history-box { position: relative; border: 1px solid #555; border-radius: 10px; overflow: hidden; }
.history-box .history-list { border: 0; box-sizing: border-box; display: block; height: 336px; max-height: 336px; padding: 0; margin: 0; overflow-y: auto; scrollbar-width: thin; }
.history-box .history-item { display: flex; align-items: center; gap: 12px; box-sizing: border-box; height: 96px; min-height: 96px; margin: 0; padding: 12px; border-bottom: 1px solid #5555; }
.history-box .history-art { flex: 0 0 56px; width: 56px; height: 56px; overflow: hidden; }
.history-box .history-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.history-box .history-info { min-width: 0; flex: 1; }
.history-box .history-title, .history-box .history-artist, .history-box .history-album { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-box.has-more::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 42px; background: linear-gradient(transparent, #000b); pointer-events: none; }
@media (max-width: 420px) { .radio-header .radio-station { font-size: 1rem; } .radio-header .radio-status { font-size: .75rem; } }