h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA9NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2Ni4wNTQ3IDI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

:root {
    --bg: #161a1f; --panel: #1e2228; --border: #2e3340;
    --green: #39d353; --blue: #4a9eff; --text: #d4d8e2; --dim: #6b7280;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font: 14px/1.5 'Segoe UI', system-ui, sans-serif; padding: 24px; }

.header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.logo   { font-size: 2rem; }
h1      { font-size: 1.2rem; font-weight: 600; color: var(--green); }
.sub    { font-size: .75rem; color: var(--dim); margin-top: 2px; }

.station-list { display: flex; flex-direction: column; gap: 10px; max-width: 680px; }

.card         { background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
                padding: 16px; display: flex; justify-content: space-between; align-items: center; }
.card-name    { font-weight: 600; font-size: 1rem; }
.card-since   { font-size: .75rem; color: var(--dim); margin-top: 2px; }
.card-actions { display: flex; align-items: center; gap: 10px; }

.card-artist {
    font-size: 0.78rem;
    color: #a0aec0;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.badge-live   { padding: 3px 10px; border-radius: 12px; font-size: .7rem; font-weight: 700;
                background: rgba(57,211,83,.15); color: var(--green); border: 1px solid var(--green); }

.badge-available { padding: 3px 10px; border-radius: 12px; font-size: .7rem; font-weight: 700;
                   background: rgba(74,158,255,.12); color: var(--blue); border: 1px solid var(--blue); }

.btn-open     { padding: 7px 16px; background: var(--blue); color: #0e1116;
                border-radius: 4px; text-decoration: none; font-size: .8rem; font-weight: 600; }
.btn-open:hover { opacity: .85; }

.search-wrap { max-width: 680px; margin-bottom: 16px; }

.search-box {
    width: 100%; padding: 10px 14px;
    background: #0e1116; border: 1px solid var(--border);
    border-radius: 6px; color: var(--text);
    font: 1rem 'Segoe UI', system-ui, sans-serif;
    outline: none; transition: border-color .15s;
}
.search-box:focus { border-color: var(--blue); }

.hint  { color: var(--dim); font-size: .85rem; padding: 12px 0; max-width: 680px; }
.empty { color: var(--dim); text-align: center; padding: 32px 0; font-size: .9rem; }

.footer { margin-top: 20px; font-size: .7rem; color: var(--dim); }