.grade-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  padding: 1rem;
  color: var(--grade-mute);
}
.grade-empty p { margin: 0; }

.btn .silk,
.nav-link .silk,
.input-group-text .silk,
.modal-title .silk,
.page-link .silk {
  vertical-align: -2px;
}

.grade-watch { background: #000; color: #eee; }
.grade-watch .modal-header {
  padding: .3rem .55rem;
  gap: .5rem;
  align-items: center;
  min-height: 0;
  background: #111;
  border-color: #2a2a2a;
}
.grade-watch .modal-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #000;
}
.grade-watch .modal-title {
  font-size: .95rem;
  font-weight: 650;
  margin: 0;
  max-width: min(80vw, 36rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#stream-modal,
#atalhos-modal { z-index: 1100; }

.atalhos-lead {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 .75rem;
  color: var(--bs-secondary-color);
}
.atalhos-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .35rem .85rem;
}
.atalhos-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 1.75rem;
}
.atalhos-row kbd {
  flex: 0 0 4.25rem;
  text-align: center;
  font-size: .75rem;
}
@media (max-width: 575.98px) {
  .atalhos-grid { grid-template-columns: 1fr; }
}

.grade-seo-main { flex: 1 0 auto; padding: 1rem 1.25rem 2rem; }
.grade-seo-main > p,
.grade-seo-main > ol,
.grade-seo-main > ul,
.grade-seo-main > h2 { max-width: 42rem; }
.grade-seo-main .channel-grid { border-left: 1px solid var(--grade-rule); margin-top: .75rem; }

.copy-row { display: flex; gap: .4rem; align-items: stretch; }
.copy-row code {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  padding: .3rem .45rem;
  font-size: .7rem;
  word-break: break-all;
  background: var(--grade-cell);
  border: 1px solid var(--grade-rule);
}
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* O rodapé do player (ficha, chips, formato) e a lista de streams. Vieram de `app-cards.css` em 24/09/2026,
   quando ele passou do teto de 300 linhas; carregam depois do `app-radio.css` e do `app-player.css`, que não
   têm regra de mesmo peso para estes seletores. */
.watch-head {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
}
.player-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: .35rem .75rem;
  padding: .4rem .65rem;
  background: #111;
  border-top: 1px solid #2a2a2a;
}
.watch-ficha-bar {
  min-width: 0;
}
.watch-ficha-bar[hidden] { display: none; }
.watch-ficha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .2rem .3rem;
  min-width: 0;
  font-size: .7rem;
  color: #c8c8c8;
}
.watch-chip {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  max-width: 100%;
  padding: .05rem .35rem;
  border: 1px solid #2e2e2e;
  border-radius: .2rem;
  background: #1a1a1a;
  color: inherit;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.watch-chip .channel-cc { width: 14px; height: 10px; }
.watch-sep { opacity: .45; margin: 0 .12rem; }
a.watch-chip { color: inherit; text-decoration: none; }
a.watch-chip:hover { text-decoration: underline; }
.watch-actions {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex: 0 0 auto;
}
.watch-add,
.watch-fmt {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-height: 1.75rem;
  flex: 0 0 auto;
}
.watch-fmt { max-width: 16rem; }
.watch-fmt-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.watch-fmt-n {
  font-variant-numeric: tabular-nums;
  opacity: .75;
}
#stream-list .watch-streams {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
#stream-list .watch-streams li { display: block; }
#stream-list .watch-stream {
  display: flex;
  width: 100%;
  align-items: center;
  gap: .35rem;
  border: 1px solid var(--grade-rule);
  padding: .45rem .65rem;
  border-radius: .2rem;
  background: var(--grade-cell);
  color: inherit;
  font: inherit;
  text-align: left;
}
#stream-list .watch-stream.is-on {
  font-weight: 650;
  border-color: #555;
}