/* Заглушка сайта: самодостаточная страница без PHP и без обращений к сайту. */
:root {
    --accent: rgb(157 0 0);
    --ink: rgb(30 40 54);
    --paper: rgb(238 238 238);
    --paper-light: rgb(247 247 247);
    --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
    display: flex; flex-direction: column; min-height: 100vh;
    background: var(--paper); color: var(--ink);
    font-family: var(--sans); -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: #fff; }

.wrap { width: 100%; max-width: 80rem; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
.kicker { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.muted { color: rgb(30 40 54 / .55); }
.accent { color: var(--accent); font-weight: 700; }

.top { border-top: 4px solid var(--accent); border-bottom: 1px solid rgb(30 40 54 / .15); background: var(--paper-light); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .9rem; padding-bottom: .9rem; }
.logo { display: block; height: 44px; width: auto; }

main { flex: 1; padding-top: 2.5rem; padding-bottom: 4rem; }
.page-title {
    margin: 0 0 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--ink);
    font-size: clamp(2.75rem, 7vw, 4.5rem); font-weight: 800; letter-spacing: -.03em; line-height: 1;
}

.grid { display: grid; gap: 2rem; }
@media (min-width: 1024px) { .grid { grid-template-columns: 2fr 1fr; } }

.player { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.player video, .player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.offline { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1.5rem; text-align: center; color: rgb(255 255 255 / .8); }

.onair { display: flex; align-items: center; gap: .5rem; margin: 1.25rem 0 0; color: var(--accent); font-weight: 700; }
.dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); animation: ping 1.5s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes ping { 75%, 100% { transform: scale(2.5); opacity: 0; } }
.now-title { margin: .4rem 0 .3rem; font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }

.section-title { display: flex; align-items: center; gap: .75rem; margin: 0 0 1.25rem; font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; }
.section-title::before { content: ''; width: 4px; height: 1.25em; background: var(--accent); }

#schedule { max-height: 640px; overflow-y: auto; }
.day + .day { margin-top: 1.5rem; }
.day h4 { margin: 0 0 .5rem; }
.day ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgb(30 40 54 / .15); border-bottom: 1px solid rgb(30 40 54 / .15); }
.day li { display: flex; gap: 1rem; padding: .6rem 0; line-height: 1.4; }
.day li + li { border-top: 1px solid rgb(30 40 54 / .1); }
.day li.live { margin: 0 -.75rem; padding-left: .75rem; padding-right: .75rem; border-left: 2px solid var(--accent); background: rgb(157 0 0 / .05); font-weight: 600; }
.time { flex-shrink: 0; width: 7rem; font-family: var(--mono); font-size: .875rem; font-variant-numeric: tabular-nums; color: rgb(30 40 54 / .6); }
.rating { margin-left: .25rem; white-space: nowrap; color: rgb(30 40 54 / .4); }

.soon { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--ink); }
.lead { max-width: 38rem; margin: .75rem 0 0; font-size: 1.125rem; line-height: 1.6; color: rgb(30 40 54 / .8); }
.contacts { display: flex; flex-wrap: wrap; gap: 1rem 3rem; margin-top: 2rem; }
.contacts:empty { display: none; }
.contacts div { display: flex; flex-direction: column; gap: .35rem; }
.contacts a, .contacts span:not(.kicker) { color: var(--ink); font-weight: 600; text-decoration: none; }
.contacts a { border-bottom: 1px solid rgb(30 40 54 / .25); }
.contacts a:hover { color: var(--accent); border-color: var(--accent); }

footer { background: var(--ink); color: rgb(255 255 255 / .6); }
footer .inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding-top: 1.5rem; padding-bottom: 1.5rem; }

@media (max-width: 640px) {
    .logo { height: 36px; }
    .bar .kicker { font-size: 10px; }
    .time { width: 6rem; }
}