/* TV — painel de vídeo: mesma base visual do painel das rádios, cor de destaque própria */
:root[data-app="tv"] { --signal: #5fd4ff; --signal-ink: #04121c; }
:root[data-app="tv"][data-theme="light"] { --signal: #0a6fa8; --signal-ink: #ffffff; }
.tv-badge { display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--signal-ink); background: var(--signal); border-radius: 6px; padding: 2px 7px; }
.pill.onair { background: rgba(255, 70, 70, .16); color: #ff6b6b; border-color: rgba(255, 70, 70, .45); }
.pill.onair::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff4d4d; display: inline-block; margin-right: 6px; animation: tvblink 1.4s infinite; }
@keyframes tvblink { 50% { opacity: .25; } }
.tv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.tv-card { cursor: pointer; transition: border-color .15s, transform .15s; }
.tv-card:hover { border-color: var(--signal); transform: translateY(-1px); }
.tv-card .thumb { aspect-ratio: 16 / 9; border-radius: 10px; background: radial-gradient(circle at 30% 30%, rgba(95, 212, 255, .18), transparent 60%), #050d18; display: grid; place-items: center; color: var(--dim); font: 500 12px var(--mono); margin-bottom: 12px; position: relative; overflow: hidden; }
.tv-card .thumb .pill { position: absolute; top: 10px; left: 10px; }
.tv-video { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; display: block; }
.tv-off { aspect-ratio: 16 / 9; border-radius: 12px; background: #050d18; display: grid; place-items: center; text-align: center; color: var(--dim); padding: 20px; }
.tv-off b { color: var(--text); font: 600 18px var(--display); display: block; margin-bottom: 6px; }
.tv-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .tv-cols { grid-template-columns: 1fr; } }
.tv-key { font: 500 13px var(--mono); word-break: break-all; }
.tv-steps { margin: 0; padding-left: 20px; line-height: 1.7; }
.tv-steps code { font: 500 12.5px var(--mono); background: rgba(127, 160, 200, .12); padding: 1px 6px; border-radius: 5px; }
.choose { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.choose-box { width: 100%; max-width: 760px; }
.choose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
@media (max-width: 640px) { .choose-grid { grid-template-columns: 1fr; } }
.choose-card { display: block; padding: 26px 22px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.choose-card:hover { transform: translateY(-2px); }
.choose-card.radio:hover { border-color: #c8f04a; }
.choose-card.tv:hover { border-color: #5fd4ff; }
.choose-card .ic { font-size: 34px; display: block; margin-bottom: 12px; }
.choose-card h2 { margin: 0 0 6px; font: 700 22px var(--display); }
.choose-card p { margin: 0; color: var(--dim); }
.tv-grid > .card { margin: 0; }
.tv-cols .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 700px) { .tv-cols .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Barras de rolagem discretas: finas, sem setas, quase invisíveis até passar o mouse */
:root { --sb: rgba(140, 170, 210, .22); --sb-hover: rgba(140, 170, 210, .45); }
:root[data-theme="light"] { --sb: rgba(30, 55, 90, .18); --sb-hover: rgba(30, 55, 90, .38); }
* { scrollbar-width: thin; scrollbar-color: var(--sb) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sb); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--sb-hover); background-clip: padding-box; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }