:root {
    color-scheme: dark;
    font-family: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }

body { background: var(--background); color: var(--text); }

.dashboard-grid {
    display: grid;
    width: 100%;
    height: 100%;
    padding: 2.5vh 2.5vw;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    grid-template-rows: repeat(var(--grid-rows), minmax(0, 1fr));
    gap: min(1vh, 10px) min(1vw, 12px);
}

.dashboard-block {
    display: flex;
    min-width: 0;
    min-height: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
}

.dashboard-block > * { max-width: 100%; margin: 0; }
.block-location { font-size: clamp(1.2rem, calc(3.2vw * var(--block-scale)), 5rem); font-weight: 600; }
.block-clock { font-size: clamp(3rem, calc(18vw * var(--block-scale)), 18rem); font-weight: 700; line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.block-date { color: var(--accent); font-size: clamp(1.4rem, calc(4vw * var(--block-scale)), 6rem); font-weight: 600; }
.block-message { font-size: clamp(1.2rem, calc(2.7vw * var(--block-scale)), 4rem); line-height: 1.2; }
.block-tunein iframe { width: min(100%, 720px); height: 100px; border: 0; border-radius: 10px; background: #fff; }
.block-photo { border-radius: 12px; background: rgba(0,0,0,.18); }
.block-photo .slideshow-image { display: block; width: 100%; height: 100%; max-width: none; border-radius: inherit; }
.radio-stream-button { display: grid; width: 100%; height: 100%; min-height: 74px; padding: clamp(.7rem, 2vh, 1.2rem); grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(.7rem, 2vw, 1.3rem); border: 3px solid var(--accent); border-radius: 16px; background: rgba(0,0,0,.2); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.radio-stream-button .radio-stream-icon { display: grid; width: clamp(48px, 7vh, 76px); height: clamp(48px, 7vh, 76px); place-items: center; border-radius: 50%; background: var(--accent); color: var(--background); font-size: clamp(1.4rem, 3vh, 2.2rem); }
.radio-stream-button .radio-stream-copy { display: grid; min-width: 0; gap: .25rem; }
.radio-stream-button strong { overflow: hidden; font-size: clamp(1.2rem, 2.5vw, 2.4rem); text-overflow: ellipsis; white-space: nowrap; }
.radio-stream-button small { color: var(--accent); font-size: clamp(.85rem, 1.3vw, 1.15rem); }
.radio-stream-button.playing { background: var(--accent); color: var(--background); }
.radio-stream-button.playing .radio-stream-icon { background: var(--background); color: var(--accent); }
.radio-stream-button.playing small { color: var(--background); }
.radio-stream-button.error { border-color: #ef6a67; }
.radio-stream-button.error small { color: #ff9a97; }
.status { position: absolute; z-index: 20; top: 2.5vh; right: 2.5vh; width: 18px; height: 18px; border-radius: 50%; background: #e5a92f; box-shadow: 0 0 0 4px rgba(255,255,255,.15); }
.status.online { background: #66d17a; }
.status.offline { background: #ef6a67; }

@media (max-height: 550px) {
    .dashboard-grid { padding: 2vh 2vw; gap: 5px; }
    .block-tunein iframe { width: min(100%, 520px); }
}