/* Sena — estilos para TV (1rem = 10px em 1920x1080). Foco = fundo branco / texto preto, como no app de referência. */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0a0c3a;
  color: #fff;
  font-family: "Inter", "LG Smart UI", "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
}

body {
  background: #0a0c3a url(../assets/bg.jpg) center / cover no-repeat;
}

#app {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.screen {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ico,
.ico-inline,
.kicon {
  display: inline-block;
  vertical-align: middle;
}

.ico svg,
.ico-inline svg,
.kicon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ico-inline {
  width: 2rem;
  height: 2rem;
  margin-right: 0.8rem;
  opacity: 0.85;
}

.muted {
  color: rgba(255, 255, 255, 0.62);
}

.empty {
  color: rgba(255, 255, 255, 0.7);
  font-size: 2.6rem;
  line-height: 1.5;
  padding: 4rem;
  text-align: center;
}

.empty.small {
  font-size: 2.2rem;
  padding: 2rem 0;
  text-align: left;
}

/* ------------------------------------------------------------ splash --- */
.splash {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: #0a0c3a;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.splash img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.splash.hide {
  opacity: 0;
}

/* ----------------------------------------------------------- spinner --- */
.spinner {
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  border: 0.7rem solid rgba(255, 255, 255, 0.18);
  border-top-color: #3ee6ff;
  -webkit-animation: spin 0.9s linear infinite;
  animation: spin 0.9s linear infinite;
  margin: 0 auto;
}

.spinner.small {
  width: 4.4rem;
  height: 4.4rem;
  border-width: 0.5rem;
}

@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loader {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 90;
  background: rgba(5, 6, 30, 0.72);
  display: none;
  text-align: center;
  padding-top: 42rem;
}

.loader.show {
  display: block;
}

.loader-text {
  margin-top: 3rem;
  font-size: 2.8rem;
  font-weight: 600;
}

/* ------------------------------------------------------------- toast --- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 6rem;
  z-index: 95;
  -webkit-transform: translate(-50%, 3rem);
  transform: translate(-50%, 3rem);
  opacity: 0;
  background: rgba(18, 18, 22, 0.96);
  border: 0.15rem solid rgba(255, 255, 255, 0.18);
  border-radius: 1rem;
  padding: 1.8rem 3.6rem;
  font-size: 2.4rem;
  font-weight: 600;
  white-space: nowrap;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}

.toast.show {
  opacity: 1;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

.toast.error {
  border-color: #ff5a6e;
}

/* ------------------------------------------------------ botões base --- */
.btn,
.pill-btn,
.dt-btn,
.tab,
.season-btn {
  display: inline-block;
  background: #151515;
  border: 0.15rem solid rgba(255, 255, 255, 0.12);
  color: #fff;
  border-radius: 0.9rem;
  font-weight: 700;
  text-align: center;
  -webkit-transition: -webkit-transform 0.12s, background 0.12s;
  transition: transform 0.12s, background 0.12s;
}

.btn.focused,
.pill-btn.focused,
.dt-btn.focused,
.tab.focused,
.season-btn.focused {
  background: #fff;
  color: #000;
  border-color: #fff;
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.pill-btn {
  min-width: 24rem;
  padding: 1.8rem 3.6rem;
  font-size: 2.5rem;
  margin-right: 2rem;
}

.pill-btn.danger {
  border-color: rgba(255, 90, 110, 0.6);
}

.tab.on {
  border-color: #fff;
}

/* ------------------------------------------------------------- home --- */
.home-logo {
  position: absolute;
  left: 50%;
  top: 10rem;
  height: 17rem;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.home-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 41.5rem;
  text-align: center;
  white-space: nowrap;
  font-size: 0;
}

.menu-card {
  display: inline-block;
  vertical-align: middle;
  width: 25rem;
  height: 25rem;
  margin: 0 0.7rem;
  background: rgba(16, 16, 60, 0.92);
  border: 0.15rem solid rgba(255, 255, 255, 0.14);
  border-radius: 0.9rem;
  position: relative;
  -webkit-transition: -webkit-transform 0.15s;
  transition: transform 0.15s;
}

.menu-card.focused {
  -webkit-transform: scale(1.11);
  transform: scale(1.11);
  border: 0.35rem solid #fff;
  margin: 0 2.2rem;
  background: rgba(20, 20, 80, 0.96);
}

.mc-icon {
  position: absolute;
  left: 50%;
  top: 2.8rem;
  width: 15rem;
  height: 12.5rem;
  margin-left: -7.5rem;
}

.mc-icon svg {
  width: 100%;
  height: 100%;
}

.mc-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3.6rem;
  font-size: 3rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
}

.reload-btn {
  position: absolute;
  left: 50%;
  top: 88.2rem;
  width: 41.2rem;
  height: 7.6rem;
  margin-left: -20.6rem;
  background: rgba(16, 16, 40, 0.94);
  border: 0.15rem solid rgba(255, 255, 255, 0.12);
  border-radius: 0.6rem;
  font-size: 2.9rem;
  font-weight: 700;
  line-height: 7.3rem;
  text-align: center;
  -webkit-transition: -webkit-transform 0.12s;
  transition: transform 0.12s;
}

.reload-btn .ico {
  position: absolute;
  left: 2.2rem;
  top: 2rem;
  width: 3.4rem;
  height: 3.4rem;
}

.reload-btn.focused {
  background: #fff;
  color: #000;
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.footer {
  position: absolute;
  left: 5rem;
  right: 5rem;
  bottom: 2.2rem;
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 1.45;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  text-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.5);
}

.f-col {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}

.f-col.center {
  text-align: center;
}

.f-col.right {
  text-align: right;
}

/* ------------------------------------------------------- virtual list --- */
.vcoll {
  position: absolute;
  overflow: hidden;
}

.vcoll-inner {
  position: relative;
  width: 100%;
  -webkit-transition: -webkit-transform 0.12s ease-out;
  transition: transform 0.12s ease-out;
}

.vcell {
  position: absolute;
  left: 0;
  width: 100%;
}

/* linhas (categorias / canais / EPG) */
.row-item {
  height: 8.4rem;
  margin: 0 0.15rem;
  background: rgba(21, 21, 21, 0.95);
  border: 0.15rem solid rgba(255, 255, 255, 0.1);
  border-radius: 0.6rem;
  padding: 0 2rem;
  font-size: 2rem;
  font-weight: 700;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.row-item.selected {
  border: 0.25rem solid #fff;
}

.row-item.focused {
  background: #fff;
  color: #000;
  border-color: #fff;
}

.row-item.playing:not(.focused) {
  border-color: #3ee6ff;
}

.ri-name {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ri-count {
  margin-left: 1.5rem;
}

/* ------------------------------------------------------------- live --- */
.live-top > div {
  position: absolute;
  top: 2.4rem;
  height: 7.8rem;
  background: rgba(21, 21, 21, 0.95);
  border: 0.15rem solid rgba(255, 255, 255, 0.1);
  border-radius: 0.6rem;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 7.5rem;
  padding: 0 2.4rem;
  white-space: nowrap;
  overflow: hidden;
}

.lt-cat {
  left: 1.2rem;
  width: 69.9rem;
}

.lt-cat .ico {
  width: 3.8rem;
  height: 3.8rem;
  margin-right: 2.4rem;
  margin-top: -0.4rem;
}

.lt-cat-name {
  display: inline-block;
  max-width: 50rem;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

.lt-count {
  position: absolute;
  right: 2.4rem;
}

.lt-sort {
  left: 72.9rem;
  width: 27.6rem;
  font-size: 2.4rem !important;
}

.lt-sort .ico {
  width: 2.8rem;
  height: 2.8rem;
  margin-right: 1.6rem;
  margin-top: -0.4rem;
}

.lt-sort.focused {
  background: #fff !important;
  color: #000;
}

.lt-clock {
  left: 101.9rem;
  width: 88.6rem;
}

.lt-time {
  position: absolute;
  right: 2.4rem;
}

.live-cats {
  left: 1.2rem;
  top: 11.25rem;
  width: 39.8rem;
  bottom: 0;
}

.live-channels {
  left: 41.7rem;
  top: 11.25rem;
  width: 58.8rem;
  bottom: 0;
}

.ch-line {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

.ch-row {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  min-width: 0;
}

.ch-num {
  width: 6rem;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

.ch-logo {
  width: 5.4rem;
  height: 5.4rem;
  margin-right: 2rem;
  border-radius: 0.6rem;
  background: center / contain no-repeat;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

.ch-logo.empty {
  background: rgba(255, 255, 255, 0.06);
}

.ch-name {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.star-btn {
  width: 8.4rem;
  height: 8.4rem;
  margin-left: 0.9rem;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  background: rgba(21, 21, 21, 0.95);
  border: 0.15rem solid rgba(255, 255, 255, 0.1);
  border-radius: 0.6rem;
  padding: 2.1rem;
  color: #fff;
}

.star-btn svg {
  width: 100%;
  height: 100%;
}

.star-btn.on {
  color: #ffd23e;
}

.star-btn.focused {
  background: #fff;
  color: #000;
}

.star-btn.focused.on {
  color: #d39b00;
}

.live-right {
  position: absolute;
  left: 101.85rem;
  top: 11.25rem;
  width: 79.65rem;
  bottom: 0;
}

.live-preview {
  position: relative;
  width: 100%;
  height: 44.55rem;
  background: #000;
  overflow: hidden;
}

.live-video {
  width: 100%;
  height: 100%;
  background: #000;
  display: block;
}

.lp-state {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 9rem;
  text-align: center;
  padding-top: 13rem;
  font-size: 2.2rem;
}

.lp-state p {
  margin-top: 2rem;
}

.ico-big {
  display: block;
  width: 7rem;
  height: 7rem;
  margin: 0 auto 1rem;
  color: #ffcf5a;
}

.ico-big svg {
  width: 100%;
  height: 100%;
}

.lp-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 9rem;
  padding: 0 4.5rem;
  line-height: 9rem;
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
  white-space: nowrap;
  overflow: hidden;
}

.lp-num {
  display: inline-block;
  width: 17rem;
  font-size: 2.4rem;
  font-weight: 700;
}

.lp-name {
  font-size: 3.2rem;
  font-weight: 700;
}

.live-epg {
  margin-top: 3.15rem;
}

.epg-row {
  height: 8.4rem;
  margin-bottom: 1.1rem;
  background: rgba(21, 21, 21, 0.95);
  border: 0.15rem solid rgba(255, 255, 255, 0.1);
  border-radius: 0.6rem;
  padding: 0 3rem 0 2rem;
  font-size: 2rem;
  font-weight: 700;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.epg-row .dot {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: #aaa;
  margin-right: 3.6rem;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

.epg-row.live .dot {
  background: #ff3b4f;
  box-shadow: 0 0 1rem rgba(255, 59, 79, 0.8);
}

.epg-row.live {
  border-color: rgba(255, 255, 255, 0.4);
}

.epg-time {
  width: 22rem;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

.epg-title {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  text-align: right;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.live-days {
  position: absolute;
  left: 182.85rem;
  top: 11.25rem;
  width: 8rem;
}

.day {
  height: 8.4rem;
  margin-bottom: 1.1rem;
  background: rgba(21, 21, 21, 0.95);
  border: 0.15rem solid rgba(255, 255, 255, 0.1);
  border-radius: 0.6rem;
  text-align: center;
  padding-top: 1.2rem;
}

.day b {
  display: block;
  font-size: 2.9rem;
  line-height: 1;
}

.day span {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  margin-top: 0.4rem;
}

.day.today {
  border: 0.25rem solid #fff;
}

/* tela cheia */
.live.fullscreen .live-preview {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
}

.live.fullscreen .lp-info {
  display: none;
}

.live.fullscreen .lp-state {
  bottom: 0;
  padding-top: 45rem;
}

.fs-info {
  position: fixed;
  left: 6rem;
  right: 6rem;
  bottom: 5rem;
  z-index: 25;
  height: 18rem;
  border-radius: 1.4rem;
  background: rgba(10, 10, 30, 0.88);
  border: 0.15rem solid rgba(255, 255, 255, 0.15);
  padding: 2.6rem 3.6rem;
  display: none;
}

.live.fullscreen .fs-info.show {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

.fs-left {
  width: 26rem;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.fs-num {
  font-size: 5.4rem;
  font-weight: 800;
  margin-right: 2.4rem;
}

.fs-logo {
  width: 11rem;
  height: 11rem;
  background: center / contain no-repeat;
}

.fs-mid {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  min-width: 0;
}

.fs-name {
  font-size: 3.8rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fs-prog {
  font-size: 2.4rem;
  margin-top: 1.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fs-next {
  font-size: 2rem;
  margin-top: 1rem;
  color: rgba(255, 255, 255, 0.7);
}

.bar {
  height: 0.7rem;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 0.4rem;
  margin-top: 1.2rem;
  overflow: hidden;
}

.bar i {
  display: block;
  height: 100%;
  background: #3ee6ff;
}

.fs-right {
  width: 34rem;
  text-align: right;
  font-size: 4rem;
  font-weight: 800;
}

.fs-right small {
  display: block;
  font-size: 1.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 5rem;
}

/* ---------------------------------------------------------- catálogo --- */
.cat-side {
  left: 3rem;
  top: 2rem;
  width: 47.7rem;
  bottom: 0;
}

.cat-side.vcoll {
  overflow: visible;
}

.cat-side .vcoll-inner {
  overflow: visible;
}

.side-item {
  height: 6.3rem;
  margin: 0 0.2rem;
  background: rgba(21, 21, 21, 0.95);
  border: 0.15rem solid rgba(255, 255, 255, 0.1);
  border-radius: 0.6rem;
  padding: 0 2rem;
  font-size: 2.4rem;
  font-weight: 700;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-transition: -webkit-transform 0.12s;
  transition: transform 0.12s;
}

.side-item.search .ico {
  width: 3.2rem;
  height: 3.2rem;
  margin-right: 1.8rem;
}

.side-item.search span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.side-item.selected {
  border: 0.25rem solid #fff;
}

.side-item.focused {
  background: #fff;
  color: #000;
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.cat-main {
  position: absolute;
  left: 55.5rem;
  top: 0;
  right: 0;
  bottom: 0;
}

.cat-title {
  position: absolute;
  left: 0;
  top: 1.6rem;
  font-size: 4.8rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
  max-width: 125rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cat-title small {
  font-size: 2.6rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  margin-left: 1rem;
}

.cat-empty {
  position: absolute;
  left: 0;
  top: 14rem;
  font-size: 2.8rem;
  color: rgba(255, 255, 255, 0.7);
}

.cat-grid {
  left: 0;
  top: 12rem;
  width: 136.5rem;
  bottom: 0;
}

.poster-card {
  width: 29rem;
  -webkit-transition: -webkit-transform 0.15s;
  transition: transform 0.15s;
  -webkit-transform-origin: center top;
  transform-origin: center top;
}

.poster {
  position: relative;
  width: 29rem;
  height: 43.8rem;
  border-radius: 0.6rem;
  border: 0.15rem solid rgba(255, 255, 255, 0.18);
  background: #1b1b2e center / cover no-repeat;
  overflow: hidden;
}

.poster-fallback {
  position: absolute;
  left: 2rem;
  right: 2rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
  font-size: 2.6rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
}

.poster-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.8rem;
  background: rgba(0, 0, 0, 0.6);
}

.poster-progress i {
  display: block;
  height: 100%;
  background: #3ee6ff;
}

.poster-fav {
  position: absolute;
  right: 1.2rem;
  top: 1.2rem;
  width: 3.6rem;
  height: 3.6rem;
  color: #ffd23e;
  filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.6));
}

.poster-fav svg {
  width: 100%;
  height: 100%;
}

.poster-title {
  margin-top: 1.6rem;
  padding: 0 1rem;
  font-size: 2.6rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.poster-card.focused {
  -webkit-transform: scale(1.06);
  transform: scale(1.06);
}

.poster-card.focused .poster {
  border: 0.45rem solid #fff;
}

.poster-card.focused .poster-title {
  color: #fff;
}

/* ---------------------------------------------------------- detalhes --- */
.dt-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #0a0c3a center / cover no-repeat;
}

.dt-shade {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0.1) 100%);
  background: linear-gradient(to right, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0.1) 100%);
}

.dt-content {
  position: absolute;
  left: 8.1rem;
  top: 0;
  padding-top: 6rem;
  padding-bottom: 4rem;
  right: 0;
  bottom: 0;
  overflow: hidden;
  text-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.5);
}

.dt-content > .spinner {
  margin: 40rem 0 0 80rem;
}

.dt-title {
  font-size: 7.8rem;
  font-weight: 800;
  max-width: 150rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.dt-meta {
  margin-top: 3rem;
  font-size: 2.8rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.dt-meta > * {
  margin-right: 3rem;
}

.stars .star {
  font-style: normal;
  font-size: 4rem;
  color: rgba(255, 255, 255, 0.25);
  margin-right: 0.4rem;
}

.stars .star.on {
  color: #ffc41a;
}

.stars .star.half {
  color: #ffc41a;
  opacity: 0.55;
}

.dt-year {
  background: #fff;
  color: #000;
  font-weight: 800;
  padding: 0.6rem 1.4rem;
  border-radius: 0.6rem;
  font-size: 3.2rem;
  text-shadow: none;
}

.dt-dur .ico {
  width: 3rem;
  height: 3rem;
  margin-right: 1rem;
  margin-top: -0.4rem;
}

.dt-plot {
  margin-top: 3.4rem;
  max-width: 105rem;
  font-size: 2.7rem;
  line-height: 1.5;
  max-height: 16.2rem;
  overflow: hidden;
}

.dt-credits {
  margin-top: 2rem;
  max-width: 105rem;
  font-size: 2.2rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  max-height: 6.6rem;
  overflow: hidden;
}

.dt-actions {
  margin-top: 4.4rem;
}

.dt-btn {
  display: block;
  width: 40.8rem;
  height: 7.4rem;
  line-height: 7.1rem;
  margin-bottom: 1.8rem;
  font-size: 2.4rem;
  letter-spacing: 0.08rem;
  text-shadow: none;
  -webkit-transform-origin: left center;
  transform-origin: left center;
}

.dt-btn .ico {
  width: 3.2rem;
  height: 3.2rem;
  margin-right: 1.6rem;
  margin-top: -0.4rem;
}

.dt-btn.primary:not(.focused) {
  background: rgba(21, 21, 21, 0.95);
}

.dt-btn.focused {
  -webkit-transform: scale(1.08);
  transform: scale(1.08);
}

.dt-sub {
  margin-top: 4rem;
  font-size: 3.6rem;
  font-weight: 800;
}

.season-row,
.ep-row {
  white-space: nowrap;
  overflow: hidden;
  margin-left: -2.4rem;
  padding: 1.6rem 2.4rem;
  font-size: 0;
}

.season-btn {
  min-width: 25rem;
  height: 7rem;
  line-height: 6.7rem;
  padding: 0 3rem;
  font-size: 2.6rem;
  margin-right: 4rem;
}

.season-btn.on {
  border: 0.25rem solid #fff;
}

.ep-card {
  display: inline-block;
  vertical-align: top;
  width: 39.6rem;
  margin-right: 4.2rem;
  white-space: normal;
  -webkit-transition: -webkit-transform 0.12s;
  transition: transform 0.12s;
}

.ep-img {
  position: relative;
  width: 39.6rem;
  height: 22.3rem;
  border-radius: 0.6rem;
  border: 0.15rem solid rgba(255, 255, 255, 0.2);
  background: #1b1b2e center / cover no-repeat;
  overflow: hidden;
}

.ep-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7rem;
  height: 7rem;
  margin: -3.5rem 0 0 -3.5rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  padding: 2rem 1.8rem 2rem 2.2rem;
  opacity: 0;
}

.ep-play svg {
  width: 100%;
  height: 100%;
}

.ep-title {
  margin-top: 1.2rem;
  font-size: 2.3rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ep-dur {
  font-size: 1.9rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 0.4rem;
}

.ep-card.focused {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.ep-card.focused .ep-img {
  border: 0.45rem solid #fff;
}

.ep-card.focused .ep-play {
  opacity: 1;
}

/* ------------------------------------------------------------ player --- */
.player {
  background: #000;
}

.pl-video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

.pl-state {
  position: absolute;
  left: 0;
  right: 0;
  top: 42rem;
  text-align: center;
  font-size: 2.6rem;
  z-index: 3;
}

.pl-state h2 {
  font-size: 4rem;
  margin-bottom: 1.6rem;
}

.pl-state p {
  margin-top: 1.6rem;
}

.pl-err-actions {
  margin-top: 4rem;
}

.player.is-error .pl-state {
  top: 30rem;
}

.pl-top,
.pl-bottom {
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  z-index: 2;
}

.pl-top {
  top: 0;
  padding: 5rem 8rem 10rem;
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
}

.pl-title {
  font-size: 4.4rem;
  font-weight: 800;
}

.pl-sub {
  font-size: 2.6rem;
  margin-top: 1rem;
  color: rgba(255, 255, 255, 0.8);
}

.pl-bottom {
  bottom: 0;
  padding: 10rem 8rem 5rem;
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.85));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.85));
}

.player.show-ui .pl-top,
.player.show-ui .pl-bottom {
  opacity: 1;
}

.player.is-error .pl-bottom {
  display: none;
}

.pl-timeline {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  font-size: 2.4rem;
  font-weight: 700;
}

.pl-bar {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  height: 0.8rem;
  margin: 0 3rem;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 0.4rem;
}

.pl-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 0.4rem;
  background: -webkit-linear-gradient(left, #3ee6ff, #3b5bff);
  background: linear-gradient(to right, #3ee6ff, #3b5bff);
}

.pl-knob {
  position: absolute;
  top: 50%;
  width: 2.4rem;
  height: 2.4rem;
  margin: -1.2rem 0 0 -1.2rem;
  border-radius: 50%;
  background: #fff;
}

.pl-controls {
  text-align: center;
  margin-top: 3rem;
  font-size: 0;
}

.ctl {
  display: inline-block;
  vertical-align: middle;
  width: 8rem;
  height: 8rem;
  margin: 0 1.6rem;
  border-radius: 50%;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  -webkit-transition: -webkit-transform 0.12s;
  transition: transform 0.12s;
}

.ctl.big {
  width: 10rem;
  height: 10rem;
  padding: 2.6rem;
}

.ctl svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ctl.focused {
  background: #fff;
  color: #000;
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.pl-seek {
  position: absolute;
  left: 50%;
  top: 44rem;
  width: 20rem;
  margin-left: -10rem;
  text-align: center;
  font-size: 5rem;
  font-weight: 800;
  text-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.7);
  display: none;
  z-index: 3;
}

.player.seeking .pl-seek {
  display: block;
}

.pl-next {
  position: absolute;
  right: 8rem;
  bottom: 34rem;
  width: 56rem;
  padding: 3rem;
  border-radius: 1.2rem;
  background: rgba(10, 10, 30, 0.92);
  border: 0.15rem solid rgba(255, 255, 255, 0.2);
  font-size: 2.4rem;
  display: none;
  z-index: 4;
}

.pl-next.show {
  display: block;
}

.pl-next strong {
  display: block;
  font-size: 3rem;
  margin: 1.2rem 0;
}

.pl-next small {
  color: rgba(255, 255, 255, 0.7);
  font-size: 2rem;
}

/* ------------------------------------------------------------ listas --- */
.pl-head {
  position: absolute;
  left: 10rem;
  right: 10rem;
  top: 7rem;
  height: 10rem;
}

.page-title {
  font-size: 7rem;
  font-weight: 800;
  line-height: 10rem;
}

.square-btn {
  position: absolute;
  right: 0;
  top: 1.2rem;
  width: 7.6rem;
  height: 7.6rem;
  padding: 1.8rem;
  border-radius: 0.9rem;
  background: rgba(21, 21, 21, 0.95);
  border: 0.15rem solid rgba(255, 255, 255, 0.14);
}

.square-btn svg,
.round-btn svg {
  width: 100%;
  height: 100%;
  display: block;
}

.square-btn.focused,
.round-btn.focused {
  background: #fff;
  color: #000;
}

.pl-list {
  position: absolute;
  left: 10rem;
  right: 10rem;
  top: 21rem;
  bottom: 14rem;
  overflow: hidden;
  padding: 0.6rem;
}

.pl-row-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  margin-bottom: 1.6rem;
}

.pl-row {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  height: 9rem;
  background: rgba(21, 21, 21, 0.95);
  border: 0.15rem solid rgba(255, 255, 255, 0.12);
  border-radius: 0.9rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding: 0 3rem;
  font-size: 2.8rem;
  font-weight: 700;
}

.pl-row.focused {
  background: #fff;
  color: #000;
}

.pl-num {
  width: 6rem;
  color: rgba(255, 255, 255, 0.6);
}

.pl-row.focused .pl-num {
  color: rgba(0, 0, 0, 0.5);
}

.pl-name {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pl-type {
  font-size: 2.2rem;
  font-weight: 600;
  opacity: 0.7;
  margin-left: 2rem;
}

.pl-active {
  margin-left: 2rem;
  font-size: 2rem;
  padding: 0.6rem 1.6rem;
  border-radius: 3rem;
  background: -webkit-linear-gradient(left, #3ee6ff, #3b5bff);
  background: linear-gradient(to right, #3ee6ff, #3b5bff);
  color: #fff;
}

.round-btn {
  width: 9rem;
  height: 9rem;
  margin-left: 1.6rem;
  padding: 2.4rem;
  border-radius: 0.9rem;
  background: rgba(21, 21, 21, 0.95);
  border: 0.15rem solid rgba(255, 255, 255, 0.12);
}

/* ---------------------------------------------------- adicionar lista --- */
.ap-title {
  position: absolute;
  left: 0;
  right: 0;
  top: 6rem;
  text-align: center;
  font-size: 5.4rem;
  font-weight: 800;
}

.ap-tabs {
  position: absolute;
  left: 0;
  right: 0;
  top: 17rem;
  text-align: center;
  font-size: 0;
}

.ap-tabs .tab {
  min-width: 26rem;
  padding: 1.6rem 3rem;
  margin: 0 1rem;
  font-size: 2.6rem;
}

.ap-fields {
  position: absolute;
  left: 50%;
  top: 28rem;
  width: 88rem;
  margin-left: -44rem;
}

.field {
  position: relative;
  height: 8rem;
  margin-bottom: 2rem;
  background: rgba(21, 21, 21, 0.92);
  border: 0.2rem solid rgba(255, 255, 255, 0.18);
  border-radius: 0.9rem;
  padding: 0 3rem;
  font-size: 2.6rem;
  line-height: 7.6rem;
  white-space: nowrap;
  overflow: hidden;
}

.field-ph {
  color: rgba(255, 255, 255, 0.45);
}

.field.filled .field-ph {
  display: none;
}

.field-value {
  font-weight: 600;
}

.field.focused {
  border-color: #fff;
  background: rgba(40, 40, 60, 0.96);
}

.field.editing {
  border-color: #3ee6ff;
}

.field.editing .field-value:after {
  content: "";
  display: inline-block;
  width: 0.25rem;
  height: 3.2rem;
  margin-left: 0.3rem;
  vertical-align: middle;
  background: #3ee6ff;
  -webkit-animation: blink 1s steps(1) infinite;
  animation: blink 1s steps(1) infinite;
}

@-webkit-keyframes blink {
  50% {
    opacity: 0;
  }
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.field.select .field-ph {
  display: none;
}

.field-caret {
  position: absolute;
  right: 3rem;
  top: 0;
  font-style: normal;
  font-size: 2.6rem;
  opacity: 0.7;
}

.ap-actions {
  position: absolute;
  left: 0;
  right: 0;
  top: 75rem;
  text-align: center;
  font-size: 0;
}

.ap-actions .pill-btn {
  margin: 0 1.2rem;
}

.ap-info {
  position: absolute;
  left: 50%;
  top: 86rem;
  width: 120rem;
  margin-left: -60rem;
  text-align: center;
  font-size: 2.2rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}

.ap-info .link {
  color: #3ee6ff;
}

.add-playlist .footer {
  display: none;
}

/* ----------------------------------------------------- configurações --- */
.st-title {
  position: absolute;
  left: 10rem;
  top: 7.5rem;
  font-size: 8rem;
  font-weight: 800;
}

.st-menu {
  position: absolute;
  left: 13.2rem;
  top: 23rem;
  width: 61.6rem;
}

.st-item {
  height: 7.8rem;
  margin-bottom: 1.2rem;
  background: rgba(21, 21, 21, 0.95);
  border: 0.15rem solid rgba(255, 255, 255, 0.1);
  border-radius: 0.6rem;
  padding: 0 4rem;
  line-height: 7.5rem;
  font-size: 2.9rem;
  font-weight: 700;
  -webkit-transition: -webkit-transform 0.12s;
  transition: transform 0.12s;
}

.st-item.focused {
  background: #fff;
  color: #000;
  -webkit-transform: scale(1.04);
  transform: scale(1.04);
}

.settings.zone-content .st-item.focused {
  background: rgba(21, 21, 21, 0.95);
  color: #fff;
  border: 0.25rem solid #fff;
  -webkit-transform: none;
  transform: none;
}

.st-content {
  position: absolute;
  left: 81.9rem;
  top: 22rem;
  width: 97rem;
  bottom: 4rem;
  overflow: hidden;
  padding: 0.6rem;
}

.st-h {
  font-size: 3.9rem;
  font-weight: 700;
  margin: 1rem 0 1.6rem;
}

.st-h + .muted,
.st-content > .muted {
  font-size: 2.3rem;
  line-height: 1.5;
  margin-bottom: 2.4rem;
}

.kv {
  margin-bottom: 4rem;
}

.kv-row {
  height: 4.8rem;
  margin-bottom: 0.8rem;
  background: rgba(20, 20, 20, 0.75);
  border-radius: 0.4rem;
  padding: 0 2rem;
  line-height: 4.8rem;
  font-size: 2.3rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

.kv-row span {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
}

.kv-row b {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}

.dns-list {
  margin-bottom: 3rem;
}

.dns-row {
  height: 6.6rem;
  margin-bottom: 1rem;
  background: rgba(20, 20, 20, 0.8);
  border: 0.15rem solid rgba(255, 255, 255, 0.1);
  border-radius: 0.6rem;
  padding: 0 2.4rem;
  font-size: 2.5rem;
  font-weight: 700;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.dns-row.on {
  border-color: #3ee6ff;
}

.dns-n {
  width: 4rem;
  color: rgba(255, 255, 255, 0.55);
}

.dns-row .ico {
  width: 3rem;
  height: 3rem;
  margin-right: 1.6rem;
  color: #3ee6ff;
}

.dns-row span:last-of-type {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}

.badge {
  font-style: normal;
  font-size: 1.9rem;
  padding: 0.5rem 1.4rem;
  border-radius: 3rem;
  background: -webkit-linear-gradient(left, #3ee6ff, #3b5bff);
  background: linear-gradient(to right, #3ee6ff, #3b5bff);
}

.st-actions {
  margin-top: 2rem;
}

.opt-row {
  height: 9rem;
  margin-bottom: 1.4rem;
  background: rgba(21, 21, 21, 0.95);
  border: 0.15rem solid rgba(255, 255, 255, 0.12);
  border-radius: 0.6rem;
  padding: 0 3rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  font-size: 2.6rem;
}

.opt-row > div,
.opt-row > span {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.opt-row small {
  display: block;
  font-size: 2rem;
  margin-top: 0.4rem;
  opacity: 0.7;
}

.opt-row .ico {
  width: 3.4rem;
  height: 3.4rem;
}

.opt-row.on {
  border-color: rgba(255, 255, 255, 0.5);
}

.opt-row.focused {
  background: #fff;
  color: #000;
}

.opt-row.compact {
  height: 6.4rem;
  margin-bottom: 0.9rem;
  font-size: 2.3rem;
  font-weight: 600;
}

.checkbox {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 0.6rem;
  border: 0.25rem solid rgba(255, 255, 255, 0.5);
  padding: 0.3rem;
}

.opt-row.on .checkbox {
  background: #3b5bff;
  border-color: #3b5bff;
  color: #fff;
}

.checkbox svg {
  width: 100%;
  height: 100%;
  display: block;
}

.st-tabs {
  font-size: 0;
  margin-bottom: 2.4rem;
}

.st-tabs .tab {
  font-size: 2.4rem;
  padding: 1.4rem 2.8rem;
  margin-right: 1.6rem;
}

.cat-toggle-list {
  height: 52rem;
  overflow: hidden;
  padding: 0.4rem;
}

/* ------------------------------------------------------------ modais --- */
.overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 60;
}

.modal-overlay {
  background: rgba(3, 4, 20, 0.75);
}

.modal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90rem;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: #12122e;
  border: 0.2rem solid rgba(255, 255, 255, 0.16);
  border-radius: 1.6rem;
  padding: 5rem 5.4rem 4.4rem;
  box-shadow: 0 3rem 8rem rgba(0, 0, 0, 0.6);
}

.modal-title {
  font-size: 4rem;
  font-weight: 800;
  margin-bottom: 2.4rem;
}

.modal-body {
  font-size: 2.6rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  max-height: 56rem;
  overflow: hidden;
}

.modal-actions {
  margin-top: 4rem;
  text-align: right;
  font-size: 0;
}

.modal-actions .btn {
  min-width: 22rem;
  padding: 1.8rem 3.4rem;
  font-size: 2.5rem;
  margin-left: 2rem;
}

.notice-modal .modal {
  border-color: #3ee6ff;
}

.choice-list {
  max-height: 54rem;
  overflow: hidden;
  padding: 0.4rem;
}

.choice {
  height: 7.4rem;
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 0.15rem solid rgba(255, 255, 255, 0.12);
  border-radius: 0.8rem;
  padding: 0 2.6rem;
  font-size: 2.5rem;
  font-weight: 600;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.choice span {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.choice-check {
  width: 3.2rem;
  height: 3.2rem;
  color: #3ee6ff;
}

.choice-check svg {
  width: 100%;
  height: 100%;
}

.choice.focused {
  background: #fff;
  color: #000;
}

.choice.focused .choice-check {
  color: #3b5bff;
}

.pin-modal .modal {
  top: 30%;
}

.pin-boxes {
  text-align: center;
  font-size: 0;
  margin: 1rem 0 2.4rem;
}

.pin-boxes span {
  display: inline-block;
  width: 9rem;
  height: 10rem;
  margin: 0 1.2rem;
  border-radius: 1rem;
  border: 0.25rem solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.3);
  font-size: 6rem;
  line-height: 9.4rem;
  font-weight: 800;
  vertical-align: middle;
}

.pin-boxes span.cur {
  border-color: #3ee6ff;
}

.pin-modal .muted {
  font-size: 2.2rem;
  text-align: center;
}

/* ----------------------------------------------------------- teclado --- */
.keyboard-overlay {
  z-index: 70;
  pointer-events: none;
}

.keyboard {
  pointer-events: auto;
  position: absolute;
  left: 50%;
  bottom: 3rem;
  width: 132rem;
  margin-left: -66rem;
  background: rgba(14, 14, 36, 0.97);
  border: 0.2rem solid rgba(255, 255, 255, 0.16);
  border-radius: 1.6rem;
  padding: 2.2rem;
  box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.6);
}

.keyboard.numeric {
  width: 52rem;
  margin-left: -26rem;
}

.krow {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  margin-bottom: 1rem;
}

.krow:last-child {
  margin-bottom: 0;
}

.key {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  height: 7rem;
  margin: 0 0.5rem;
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.08);
  border: 0.15rem solid rgba(255, 255, 255, 0.08);
  text-align: center;
  line-height: 6.7rem;
  font-size: 2.8rem;
  font-weight: 600;
}

.key.short {
  font-size: 2.2rem;
}

.key.wide {
  -webkit-box-flex: 1.4;
  -webkit-flex: 1.4;
  flex: 1.4;
}

.key.wide2 {
  -webkit-box-flex: 2;
  -webkit-flex: 2;
  flex: 2;
  font-size: 2.4rem;
}

.key.space {
  -webkit-box-flex: 5;
  -webkit-flex: 5;
  flex: 5;
  font-size: 2.4rem;
}

.key.done {
  background: -webkit-linear-gradient(left, #2fd3ff, #3b5bff);
  background: linear-gradient(to right, #2fd3ff, #3b5bff);
}

.key.on {
  border-color: #3ee6ff;
}

.key .kicon {
  width: 3.4rem;
  height: 3.4rem;
}

.key.focused {
  background: #fff;
  color: #000;
}

.numeric .key {
  height: 9rem;
  line-height: 8.7rem;
  font-size: 3.6rem;
}

.st-actions + .st-h,
.kv + .st-h {
  margin-top: 4.4rem;
}