html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #0b1b2e;
  color: #f9fcff;
  font-family: Arial, Helvetica, sans-serif;
}

/* Modern Xtream shell. Kept separate from the ES5 DOM so old signage engines
   only parse the compatibility bundle while modern browsers get a responsive UI. */
.xtream-next {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: none;
  overflow: hidden;
  color: #f7fbff;
  background: #050d16;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  --xn-accent: #31d7b4;
  --xn-panel: #0b1825;
  --xn-muted: #8fa4b7;
}

.xnext-sidebar {
  position: relative;
  z-index: 9;
  display: flex;
  flex: 0 0 clamp(190px, 15vw, 270px);
  flex-direction: column;
  padding: clamp(22px, 3vh, 44px) 16px 24px;
  border-right: 1px solid rgba(155, 181, 201, .14);
  background: #08131e;
}

.xnext-brand { display: grid; gap: 5px; padding: 0 15px clamp(28px, 4vh, 52px); }
.xnext-brand > span { font-size: clamp(22px, 1.8vw, 32px); letter-spacing: -.05em; }
.xnext-brand strong { color: var(--xn-accent); }
.xnext-brand small { overflow: hidden; color: var(--xn-muted); font-size: 11px; letter-spacing: .12em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.xnext-sidebar nav { display: grid; gap: 9px; }
.xnext-sidebar button { display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 10px 15px; border: 0; border-radius: 12px; color: #a9bac9; background: transparent; font: inherit; font-size: clamp(14px, 1vw, 18px); text-align: left; }
.xnext-sidebar button i { display: grid; width: 27px; height: 27px; place-items: center; color: #72899c; font-style: normal; }
.xnext-sidebar button.active, .xnext-sidebar button:focus, .xnext-sidebar button:hover { outline: 0; color: #fff; background: rgba(49, 215, 180, .13); box-shadow: inset 3px 0 var(--xn-accent); }
.xnext-sidebar button.active i { color: var(--xn-accent); }
.xnext-remote-help { margin: auto 15px 0; color: #71899c; font-size: 11px; line-height: 1.7; }

.xnext-main { min-width: 0; flex: 1; overflow: auto; background: radial-gradient(circle at 90% -10%, #16394b 0, transparent 32%), #06101a; }
.xnext-topbar { position: sticky; z-index: 8; top: 0; display: grid; grid-template-columns: 1fr minmax(260px, 36vw) auto; align-items: center; gap: 30px; min-height: clamp(88px, 11vh, 126px); padding: 18px clamp(28px, 4vw, 70px); border-bottom: 1px solid rgba(151, 178, 200, .12); background: rgba(6, 16, 26, .93); backdrop-filter: blur(18px); }
.xnext-topbar h1 { margin: 2px 0 0; font-size: clamp(25px, 2.2vw, 42px); letter-spacing: -.035em; }
.xnext-topbar small { color: var(--xn-accent); font-size: 10px; font-weight: 800; letter-spacing: .17em; }
.xnext-clock { min-width: 62px; font-size: clamp(16px, 1.25vw, 24px); font-variant-numeric: tabular-nums; text-align: right; }
.xnext-menu { display: none; }
.xnext-search { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border: 1px solid rgba(157, 184, 204, .23); border-radius: 12px; background: rgba(12, 30, 44, .8); }
.xnext-search:focus-within { border-color: var(--xn-accent); box-shadow: 0 0 0 3px rgba(49, 215, 180, .13); }
.xnext-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: #fff; background: transparent; font: inherit; }
.xnext-search kbd { padding: 3px 7px; border: 1px solid #3c5264; border-radius: 6px; color: var(--xn-muted); background: #101e2a; }

.xnext-library { padding: clamp(25px, 3.5vw, 62px) clamp(28px, 4vw, 70px) 90px; }
.xnext-categories { display: flex; gap: 9px; overflow: auto; padding: 0 0 26px; scrollbar-width: none; }
.xnext-categories button { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; min-height: 40px; padding: 7px 13px; border: 1px solid rgba(149, 178, 199, .2); border-radius: 999px; color: #b7c6d2; background: #0b1a27; }
.xnext-categories button.active, .xnext-categories button:focus { outline: 0; border-color: var(--xn-accent); color: #04110e; background: var(--xn-accent); }
.xnext-categories b { font-size: 10px; opacity: .7; }
.xnext-section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.xnext-section-head h2 { margin: 0; font-size: clamp(24px, 2.2vw, 40px); }
.xnext-section-head p { margin: 6px 0 0; color: var(--xn-muted); }
.xnext-section-head button, .xnext-more { border: 1px solid rgba(157,184,204,.25); border-radius: 10px; color: #dce7ee; background: #0c1c29; padding: 11px 16px; }

.xnext-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(145px, 11.5vw, 225px), 1fr)); gap: clamp(14px, 1.5vw, 26px); }
.xnext-card { position: relative; display: grid; min-width: 0; padding: 0; overflow: visible; border: 0; color: #fff; background: transparent; text-align: left; }
.xnext-poster { position: relative; display: grid; overflow: hidden; aspect-ratio: 2 / 3; place-items: center; border: 2px solid transparent; border-radius: 12px; background: linear-gradient(145deg, #142b3c, #08131e); box-shadow: 0 12px 28px rgba(0,0,0,.26); transition: transform .17s ease, border-color .17s ease, box-shadow .17s ease; }
.xnext-poster img { width: 100%; height: 100%; object-fit: cover; }
.xnext-card.kind-live .xnext-poster { aspect-ratio: 1 / 1; }
.xnext-card.kind-live .xnext-poster img { box-sizing: border-box; padding: clamp(7px, .75vw, 13px); background: rgba(255,255,255,.96); object-fit: contain; }
.xnext-poster > i { color: #7890a3; font-size: 36px; font-style: normal; }
.xnext-poster em { position: absolute; left: 8px; bottom: 8px; padding: 4px 7px; border-radius: 6px; color: #fff; background: rgba(3,10,16,.82); font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.xnext-card-copy { display: grid; gap: 5px; padding: 11px 3px; }
.xnext-card-copy strong, .xnext-card-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xnext-card-copy strong { font-size: clamp(13px, 1vw, 18px); }
.xnext-card-copy small { color: var(--xn-muted); font-size: clamp(10px, .75vw, 13px); }
.xnext-card.focused .xnext-poster, .xnext-card:focus .xnext-poster, .xnext-card:hover .xnext-poster { outline: 0; border-color: var(--xn-accent); transform: translateY(-5px) scale(1.025); box-shadow: 0 16px 35px rgba(0,0,0,.45), 0 0 0 4px rgba(49,215,180,.13); }
.xnext-card-backdrop { display: none; }
.xnext-card-progress { position: absolute; z-index: 2; right: 7px; bottom: 7px; left: 7px; height: 5px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.28); }
.xnext-card-progress > i { display: block; height: 100%; background: var(--xn-accent); }
.xnext-more { display: block; margin: 38px auto 0; }
.xnext-more[hidden] { display: none; }
.xnext-empty { display: none; min-height: 300px; place-items: center; align-content: center; gap: 7px; color: var(--xn-muted); }
.xnext-empty.visible { display: grid; }
.xnext-empty strong { color: #fff; font-size: 22px; }

.xnext-detail, .xnext-player { position: absolute; z-index: 15; inset: 0; display: none; background: #02080e; }
.detail-mode .xnext-detail, .player-mode .xnext-player { display: block; }
.detail-mode .xnext-sidebar, .detail-mode .xnext-main, .player-mode .xnext-sidebar, .player-mode .xnext-main { visibility: hidden; }
.xnext-detail-backdrop { position: absolute; inset: 0; opacity: .92; background-position: center; background-size: cover; }
.xnext-detail-close { position: absolute; z-index: 2; top: 38px; left: 46px; width: 55px; height: 55px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; color: #fff; background: rgba(3,10,16,.7); font-size: 24px; }
.xnext-detail-copy { position: absolute; z-index: 2; left: clamp(45px, 8vw, 150px); bottom: clamp(65px, 12vh, 170px); width: min(740px, 70vw); }
.xnext-detail-copy > small { color: var(--xn-accent); font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.xnext-detail-copy h2 { margin: 12px 0; font-size: clamp(40px, 6vw, 98px); line-height: .98; }
.xnext-detail-meta { color: #bfd0dc; font-size: clamp(15px, 1.4vw, 24px); }
.xnext-detail-plot { max-width: 680px; color: #d0dae1; font-size: clamp(14px, 1.15vw, 20px); line-height: 1.55; white-space: pre-line; }
.xnext-detail-copy > div { display: flex; gap: 12px; margin-top: 27px; }
.xnext-detail-copy button { min-height: 52px; padding: 0 24px; border: 1px solid #536a7b; border-radius: 10px; color: #fff; background: #102230; font-weight: 800; }
.xnext-detail-copy button:first-child { border-color: var(--xn-accent); color: #04110e; background: var(--xn-accent); }

.xnext-video-host, .xnext-video { width: 100%; height: 100%; background: #000; object-fit: contain; }
.xnext-player-shade { position: absolute; inset: 55% 0 0; pointer-events: none; opacity: 0; background: linear-gradient(transparent, rgba(0,8,14,.96)); transition: opacity .18s; }
.xnext-now { position: absolute; left: clamp(35px, 5vw, 90px); bottom: clamp(190px, 22vh, 250px); display: flex; align-items: center; gap: 18px; opacity: 0; transition: opacity .18s; }
.xnext-now img { width: 92px; height: 92px; border-radius: 10px; object-fit: cover; }
.xnext-now > div { display: grid; gap: 5px; }
.xnext-now small { color: var(--xn-accent); font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.xnext-now strong { max-width: 70vw; overflow: hidden; font-size: clamp(24px, 3vw, 54px); text-overflow: ellipsis; white-space: nowrap; }
.xnext-now span { color: #b8c9d5; font-size: clamp(12px, 1.2vw, 20px); }
.xnext-controls { position: absolute; z-index: 4; left: 50%; bottom: clamp(24px, 4vh, 62px); display: flex; gap: 12px; opacity: 0; transform: translate(-50%, 20px); transition: opacity .18s, transform .18s; }
.xnext-controls button { display: grid; width: clamp(105px, 9vw, 170px); min-height: clamp(68px, 8vh, 102px); place-items: center; border: 1px solid #405667; border-radius: 12px; color: #fff; background: rgba(9,25,37,.94); font-size: clamp(18px, 1.6vw, 28px); }
.xnext-controls button span { font-size: clamp(10px, .75vw, 14px); font-weight: 800; text-transform: uppercase; }
.xnext-controls button:focus, .xnext-controls button:hover { outline: 0; border-color: var(--xn-accent); background: #123548; box-shadow: 0 0 0 4px rgba(49,215,180,.15); }
.controls-visible .xnext-controls, .controls-visible .xnext-now, .controls-visible .xnext-player-shade { opacity: 1; }
.controls-visible .xnext-controls { transform: translate(-50%, 0); }
.xnext-channel-drawer { position: absolute; z-index: 9; top: 0; right: 0; bottom: 0; width: min(43vw, 640px); display: flex; visibility: hidden; flex-direction: column; border-left: 1px solid rgba(255,255,255,.14); opacity: 0; background: rgba(4,17,27,.82); box-shadow: -22px 0 60px rgba(0,0,0,.5); backdrop-filter: blur(18px); transform: translateX(105%); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.channels-visible .xnext-channel-drawer { visibility: visible; opacity: 1; transform: translateX(0); }
.xnext-channel-drawer > header { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: clamp(24px,4vh,50px) clamp(20px,3vw,42px) 22px; border-bottom: 1px solid rgba(255,255,255,.1); }
.xnext-channel-drawer > header div { display: grid; gap: 5px; }
.xnext-channel-drawer > header small { color: var(--xn-accent); font-size: 10px; font-weight: 900; letter-spacing: .17em; }
.xnext-channel-drawer > header strong { font-size: clamp(25px,2.6vw,42px); }
.xnext-channel-count { color: var(--xn-muted); font-variant-numeric: tabular-nums; }
.xnext-channel-list { flex: 1; overflow-y: auto; padding: 10px clamp(12px,2vw,28px); }
.xnext-channel-list button { display: grid; width: 100%; min-height: 76px; grid-template-columns: 2.4em 3.5em minmax(0,1fr); gap: 12px; align-items: center; padding: 10px; border: 0; border-bottom: 1px solid rgba(255,255,255,.08); border-radius: 9px; color: #fff; background: transparent; text-align: left; }
.xnext-channel-list button.active { color: #02110d; background: var(--xn-accent); }
.xnext-channel-list button.current:not(.active) { box-shadow: inset 4px 0 var(--xn-accent); }
.xnext-channel-list button > b { font-size: clamp(15px,1.3vw,21px); font-variant-numeric: tabular-nums; text-align: right; }
.xnext-channel-list button img, .xnext-channel-list button > i { width: 3.5em; height: 3.5em; box-sizing: border-box; padding: 4px; border-radius: 7px; background: rgba(255,255,255,.94); object-fit: contain; }
.xnext-channel-list button > span { display: grid; min-width: 0; gap: 4px; }
.xnext-channel-list button strong, .xnext-channel-list button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xnext-channel-list button small { color: #a9bdca; }
.xnext-channel-list button.active small { color: #23463e; }
.xnext-channel-list .load-more { display: block; margin: 13px 0; border: 1px solid rgba(255,255,255,.18); text-align: center; }
.xnext-channel-drawer > footer { padding: 15px 22px 22px; color: #9bb0bf; font-size: clamp(10px,.85vw,14px); text-align: center; }
.xnext-progress { position: absolute; z-index: 8; right: clamp(35px,5vw,90px); bottom: clamp(118px,14vh,165px); left: clamp(35px,5vw,90px); visibility: hidden; opacity: 0; transition: opacity .18s; }
.xnext-progress[hidden] { display: none; }
.controls-visible .xnext-progress { visibility: visible; opacity: 1; }
.xnext-progress > div { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: #d8e3ea; font-size: clamp(11px,.9vw,15px); font-variant-numeric: tabular-nums; }
.xnext-progress > div strong { color: #fff; font-size: inherit; }
.xnext-progress-range { width: 100%; height: 14px; margin: 0; accent-color: var(--xn-accent); cursor: pointer; }
.xnext-message { position: absolute; z-index: 30; top: 30px; left: 50%; max-width: min(680px, 80vw); padding: 13px 20px; border: 1px solid rgba(153,182,201,.3); border-radius: 10px; opacity: 0; color: #fff; background: rgba(7,21,32,.94); pointer-events: none; transform: translate(-50%,-15px); transition: .18s; }
.xnext-message.visible { opacity: 1; transform: translate(-50%,0); }
.xnext-message.error { border-color: #ff7c71; }

@media (max-width: 900px), (pointer: coarse) and (max-width: 1100px) {
  .xnext-sidebar { position: absolute; inset: 0 auto 0 0; width: min(82vw, 300px); transform: translateX(-102%); transition: transform .2s; box-shadow: 20px 0 60px rgba(0,0,0,.55); }
  .xnext-sidebar.mobile-open { transform: translateX(0); }
  .xnext-topbar { grid-template-columns: auto 1fr auto; gap: 14px; padding: 14px 18px; }
  .xnext-menu { display: block; width: 46px; height: 46px; border: 1px solid #334a5c; border-radius: 10px; color: #fff; background: #0d1d2a; font-size: 21px; }
  .xnext-search { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .xnext-clock { grid-column: 3; grid-row: 1; }
  .xnext-library { padding: 24px 18px 80px; }
  .xnext-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px; }
  .xnext-controls { width: calc(100% - 24px); gap: 7px; }
  .xnext-controls button { min-width: 0; flex: 1; width: auto; }
  .xnext-channel-drawer { width: min(88vw, 620px); }
  .xnext-now { bottom: 165px; }
  .xnext-progress { right: 20px; bottom: 105px; left: 20px; }
}

@media (orientation: landscape) and (max-height: 620px) {
  .xnext-topbar { position: relative; min-height: 72px; padding-top: 10px; padding-bottom: 10px; }
  .xnext-library { padding-top: 18px; }
  .xnext-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
  .xnext-poster { aspect-ratio: 16 / 9; }
  .xnext-now { bottom: 105px; }
  .xnext-controls { bottom: 14px; }
  .xnext-controls button { min-height: 70px; }
}

* {
  box-sizing: border-box;
}

.player-root,
.pairing-screen,
.stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pairing-screen {
  display: block;
  overflow: hidden;
  background: #0b1b2e;
}

.pairing-screen:before {
  position: absolute;
  top: -18vh;
  right: -8vw;
  width: 40vw;
  height: 40vw;
  min-width: 420px;
  min-height: 420px;
  border-radius: 50%;
  background: #2dd4bf;
  content: "";
}

.pairing-screen:after {
  position: absolute;
  right: 10vw;
  bottom: -28vw;
  width: 50vw;
  height: 50vw;
  min-width: 580px;
  min-height: 580px;
  border: 6vw solid #2f9bff;
  border-radius: 50%;
  content: "";
}

.player-brand {
  position: absolute;
  top: 6vh;
  left: 6vw;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(20px, 2.1vw, 36px);
}

.player-mark {
  display: block;
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.pairing-content {
  position: absolute;
  top: 50%;
  left: 6vw;
  z-index: 2;
  width: 88vw;
  max-width: 980px;
  transform: translateY(-45%);
}

.player-eyebrow {
  margin: 0 0 2vh;
  color: #67b9ff;
  font-size: clamp(11px, 1vw, 18px);
  font-weight: bold;
  letter-spacing: 0.18em;
}

.pairing-content h1 {
  margin: 0;
  font-size: clamp(34px, 5vw, 86px);
  letter-spacing: -0.045em;
  line-height: 1;
}

.pairing-content > p:nth-child(3) {
  margin: 2vh 0 4vh;
  color: #aebfca;
  font-size: clamp(14px, 1.4vw, 25px);
}

.pairing-code {
  display: grid;
  width: 100%;
  max-width: 720px;
  grid-template-columns: repeat(6, minmax(0, 104px));
  gap: clamp(5px, 0.7vw, 13px);
  margin: 0 0 3vh;
}

.pairing-code span {
  display: grid;
  width: 100%;
  height: clamp(60px, 8vw, 136px);
  place-items: center;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 0.3vw;
  background: rgba(255,255,255,0.07);
  color: #f9fcff;
  font-size: clamp(30px, 4.5vw, 76px);
  font-weight: bold;
}

.pairing-url {
  color: #aebfca;
  font-size: clamp(11px, 1.05vw, 18px);
}

.pairing-url b {
  color: white;
}

.player-status {
  position: absolute;
  right: 4vw;
  bottom: 4vh;
  left: 6vw;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  color: #8198a6;
  font-size: clamp(9px, 0.85vw, 15px);
  letter-spacing: 0.08em;
}

.player-status > span:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0;
}

#connection-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #edb44d;
}

#connection-dot.connected {
  background: #2f9bff;
}

.stage {
  display: none;
  overflow: hidden;
  transform-origin: 0 0;
}

.stage.active {
  display: block;
}

.web-cache-root {
  position: fixed;
  top: 0;
  left: -100000px;
  z-index: -1;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  opacity: 0.001;
  pointer-events: none;
}

.web-cache-root iframe {
  width: 1920px !important;
  height: 1080px !important;
}

.stage-element {
  position: absolute;
  margin: 0;
  padding: 0;
  overflow: hidden;
  white-space: pre-wrap;
}

.stage-element iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.stage-ticker {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: ticker-scroll 12s linear infinite;
}

@keyframes ticker-scroll {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

.stage-element img,
.stage-element video {
  width: 100%;
  height: 100%;
}

.stage-slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.stage-background-removed {
  mix-blend-mode: multiply;
  filter: contrast(1.04) saturate(1.03);
}

.stage-rss {
  display: flex;
  align-items: center;
  padding: 0.45em 0.7em;
  line-height: 1.3;
}

.player-notice {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 100;
  display: none;
  padding: 10px 14px;
  border-radius: 4px;
  background: rgba(0,0,0,0.68);
  color: white;
  font-size: 12px;
}

.player-notice.visible {
  display: block;
}

@media (max-width: 600px) {
  .player-brand {
    top: 24px;
    left: 20px;
    gap: 10px;
  }

  .pairing-content {
    top: 48%;
    left: 20px;
    width: calc(100% - 40px);
    transform: translateY(-46%);
  }

  .pairing-content h1 {
    font-size: clamp(30px, 9vw, 44px);
  }

  .pairing-content > p:nth-child(3) {
    margin: 14px 0 24px;
    font-size: clamp(14px, 4vw, 18px);
  }

  .pairing-code {
    max-width: none;
    gap: 5px;
  }

  .pairing-code span {
    height: clamp(58px, 20vw, 86px);
    font-size: clamp(28px, 11vw, 48px);
  }

  .pairing-url {
    font-size: 12px;
  }

  .player-status {
    right: 20px;
    bottom: 18px;
    left: 20px;
    gap: 12px;
    font-size: 10px;
  }

  .player-status > span:last-child {
    max-width: 46%;
    text-align: right;
  }
}

@media (max-height: 520px) {
  .player-brand {
    top: 12px;
  }

  .pairing-content {
    top: 49%;
    transform: translateY(-48%);
  }

  .player-eyebrow {
    margin-bottom: 7px;
  }

  .pairing-content h1 {
    font-size: clamp(27px, 7vw, 46px);
  }

  .pairing-content > p:nth-child(3) {
    margin: 8px 0 12px;
    font-size: clamp(12px, 2.6vw, 17px);
  }

  .pairing-code {
    margin-bottom: 9px;
  }

  .pairing-code span {
    height: clamp(48px, 17vh, 72px);
    font-size: clamp(26px, 9vh, 48px);
  }

  .player-status {
    bottom: 7px;
  }
}

.tv-player {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  background: #020509;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  cursor: none;
}

.tv-player.tv-controls-visible {
  cursor: default;
}

.tv-video-host,
.tv-video,
.tv-shade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  width: 100%;
  height: 100%;
}

.tv-video {
  object-fit: contain;
  background: #000;
}

.tv-shade {
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, rgba(2, 5, 9, 0.8), transparent 36%, transparent 55%, rgba(2, 5, 9, 0.94));
  transition: opacity 180ms ease;
}

.tv-controls-visible .tv-shade {
  opacity: 1;
}

.tv-channel-info {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 42px 64px;
  padding: clamp(24px, 4vh, 60px) clamp(28px, 4vw, 76px);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-18px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.tv-controls-visible .tv-channel-info,
.tv-controls-visible .tv-program-info,
.tv-controls-visible .tv-remote-controls,
.xtream-controls-visible .xtream-controls {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.tv-channel-identity {
  display: flex;
  align-items: center;
  gap: 22px;
  gap: clamp(14px, 1.6vw, 28px);
}

.tv-channel-number {
  min-width: 1.6em;
  font-size: 64px;
  font-size: clamp(32px, 4.4vw, 78px);
  font-weight: 900;
  line-height: 1;
  color: #2f9bff;
}

.tv-channel-logo {
  display: none;
  width: 92px;
  width: clamp(54px, 7vw, 112px);
  height: 64px;
  height: clamp(40px, 5vw, 80px);
  object-fit: contain;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
}

.tv-channel-identity > div {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}

.tv-channel-name {
  font-size: 34px;
  font-size: clamp(22px, 2.4vw, 42px);
}

.tv-source-name {
  max-width: 60vw;
  overflow: hidden;
  color: #c6d0da;
  font-size: 19px;
  font-size: clamp(13px, 1.25vw, 23px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tv-clock {
  font-size: 42px;
  font-size: clamp(24px, 3vw, 50px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.tv-program-info {
  position: absolute;
  right: 64px;
  right: clamp(28px, 4vw, 76px);
  bottom: 160px;
  bottom: clamp(110px, 15vh, 200px);
  left: 64px;
  left: clamp(28px, 4vw, 76px);
  display: flex;
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(240px, 1fr);
  gap: 50px;
  gap: clamp(20px, 4vw, 80px);
  visibility: hidden;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}

.tv-now,
.tv-next {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2em 1em;
  align-items: baseline;
}

.tv-now > span,
.tv-next > span {
  grid-row: span 2;
  padding: 0.3em 0.55em;
  border-radius: 5px;
  background: #2f9bff;
  color: #112318;
  font-size: clamp(10px, 0.9vw, 15px);
  font-weight: 900;
}

.tv-next > span {
  background: #33465a;
  color: #fff;
}

.tv-program-info strong {
  overflow: hidden;
  font-size: 30px;
  font-size: clamp(18px, 2vw, 36px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tv-program-info small {
  color: #c1ccd5;
  font-size: 17px;
  font-size: clamp(12px, 1.15vw, 21px);
}

.tv-progress {
  position: absolute;
  right: 0;
  bottom: -18px;
  left: 0;
  height: 5px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.25);
}

.tv-progress i {
  display: block;
  width: 0;
  height: 100%;
  background: #2f9bff;
}

.tv-remote-controls,
.xtream-controls {
  position: absolute;
  right: 64px;
  right: clamp(28px, 4vw, 76px);
  bottom: 32px;
  bottom: clamp(20px, 3vh, 46px);
  left: 64px;
  left: clamp(28px, 4vw, 76px);
  display: flex;
  justify-content: center;
  gap: 14px;
  gap: clamp(8px, 1vw, 18px);
  visibility: hidden;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}

.tv-remote-controls button,
.xtream-controls button {
  display: flex;
  min-width: 120px;
  min-width: clamp(74px, 9vw, 140px);
  min-height: 70px;
  min-height: clamp(55px, 7vh, 82px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15em;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 12px;
  background: rgba(14, 29, 43, 0.9);
  color: #fff;
  font-size: 28px;
  font-size: clamp(22px, 2.2vw, 34px);
}

.tv-remote-controls button:focus,
.tv-remote-controls button:hover,
.xtream-controls button:focus,
.xtream-controls button:hover {
  outline: 3px solid #2f9bff;
  background: #17324a;
}

.tv-remote-controls button span,
.xtream-controls button span {
  font-size: clamp(9px, 0.8vw, 13px);
  font-weight: 800;
  text-transform: uppercase;
}

.tv-channel-drawer {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: auto;
  width: 42vw;
  width: min(42vw, 620px);
  padding: 32px 0 0;
  padding: clamp(24px, 4vh, 56px) 0 0;
  visibility: hidden;
  overflow: hidden;
  background: rgba(6, 17, 28, 0.84);
  box-shadow: -15px 0 40px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(16px);
  transform: translateX(105%);
  transition: transform 220ms ease;
}

.tv-drawer-visible .tv-channel-drawer {
  visibility: visible;
  transform: translateX(0);
}

.tv-drawer-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 28px 22px;
  padding: 0 clamp(20px, 3vw, 42px) 22px;
}

.tv-drawer-head strong {
  font-size: clamp(24px, 3vw, 42px);
}

.tv-channel-count {
  color: #aebbc6;
  font-size: 0.52em;
  font-weight: 700;
}

.tv-drawer-head small {
  color: #9faebb;
}

.tv-channel-list {
  height: calc(100% - 70px);
  overflow-y: auto;
  padding: 0 20px 40px;
  padding: 0 clamp(12px, 2vw, 28px) 40px;
  -webkit-overflow-scrolling: touch;
}

.tv-channel-spacer {
  width: 1px;
  pointer-events: none;
}

.tv-channel-list button {
  display: flex;
  display: grid;
  width: 100%;
  grid-template-columns: 2.5em 3.5em minmax(0, 1fr);
  gap: 0.8em;
  align-items: center;
  box-sizing: border-box;
  height: 84px;
  padding: 0.75em;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 7px;
  background: transparent;
  color: #fff;
  text-align: left;
}

.tv-channel-list button.active {
  background: #2f9bff;
  color: #132416;
}

.tv-channel-list button.current:not(.active) {
  box-shadow: inset 5px 0 #2f9bff;
}

.tv-channel-list button > b {
  font-size: clamp(18px, 1.7vw, 27px);
}

.tv-channel-list button img,
.tv-channel-list button > i {
  width: 3.5em;
  height: 2.5em;
  object-fit: contain;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.9);
}

.tv-channel-list button span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.tv-channel-list button strong,
.tv-channel-list button small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tv-channel-list button strong {
  font-size: clamp(15px, 1.35vw, 22px);
}

.tv-channel-list button small {
  margin-top: 0.2em;
  color: #aebbc6;
}

.tv-channel-list button.active small {
  color: #405025;
}

.tv-digit-entry {
  position: absolute;
  top: 160px;
  top: 16vh;
  left: 50%;
  min-width: 2.2em;
  padding: 0.18em 0.45em;
  border-radius: 12px;
  background: rgba(8, 22, 34, 0.92);
  color: #2f9bff;
  font-size: clamp(58px, 9vw, 150px);
  font-weight: 900;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  transform: translateX(-50%) scale(0.9);
  transition: opacity 120ms ease, transform 120ms ease;
}

.tv-digit-entry.visible {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.tv-message {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 80vw;
  padding: 0.7em 1em;
  border-radius: 10px;
  background: rgba(6, 17, 28, 0.9);
  font-size: clamp(18px, 2vw, 34px);
  text-align: center;
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.tv-message.visible {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 720px), (orientation: portrait) {
  .tv-channel-drawer {
    width: min(88vw, 620px);
  }

  .tv-program-info {
    bottom: 105px;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .tv-next {
    display: none;
  }

  .tv-remote-controls {
    right: 12px;
    bottom: 14px;
    left: 12px;
    gap: 5px;
  }

  .tv-remote-controls button {
    min-width: 0;
    flex: 1;
  }

  .tv-source-name {
    max-width: 50vw;
  }
}

.xtream-player {
  position: fixed;
  inset: 0;
  z-index: 55;
  overflow: hidden;
  background: #030914;
  color: #f7fbff;
  font-family: Arial, Helvetica, sans-serif;
}

.xtream-video-host,
.xtream-video,
.xtream-playback-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.xtream-video {
  background: #000;
  object-fit: contain;
}

.xtream-start {
  position: absolute;
  top: 62%;
  left: 50%;
  z-index: 8;
  display: flex;
  min-width: clamp(190px, 22vw, 360px);
  min-height: clamp(72px, 9vh, 110px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  border: 2px solid #2f9bff;
  border-radius: 16px;
  background: rgba(7, 25, 42, 0.96);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: clamp(30px, 3.3vw, 56px);
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.xtream-start.visible {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.xtream-start span {
  font-size: clamp(13px, 1.2vw, 22px);
  font-weight: 800;
}

.xtream-playback-shade {
  pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(1, 8, 17, 0.94));
}

.xtream-library {
  position: absolute;
  inset: 0;
  display: block;
  padding: clamp(28px, 4vh, 64px) clamp(30px, 4vw, 78px) clamp(26px, 3vh, 48px);
  background:
    radial-gradient(circle at 86% 0%, rgba(47, 155, 255, 0.24), transparent 35%),
    linear-gradient(150deg, #071425, #0b1d31 55%, #07111f);
}

.xtream-library-header {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(300px, 1.5fr) auto;
  gap: clamp(20px, 3vw, 60px);
  align-items: center;
}

.xtream-brand {
  display: block;
  font-size: clamp(22px, 2vw, 38px);
}

.xtream-brand strong {
  color: #2f9bff;
}

.xtream-source-name {
  display: block;
  max-width: 28vw;
  margin-top: 0.35em;
  overflow: hidden;
  color: #92a7bb;
  font-size: clamp(12px, 1vw, 18px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xtream-library-title {
  margin: 0;
  overflow: hidden;
  font-size: clamp(28px, 3vw, 54px);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xtream-library-subtitle {
  margin: 0.45em 0 0;
  color: #9db0c1;
  font-size: clamp(12px, 1.05vw, 19px);
}

.xtream-clock {
  font-size: clamp(24px, 2.6vw, 48px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.xtream-tabs {
  display: flex;
  gap: clamp(8px, 0.9vw, 16px);
  margin: clamp(25px, 3.6vh, 54px) 0 clamp(18px, 2.5vh, 38px);
}

.xtream-tabs button {
  min-width: clamp(110px, 11vw, 190px);
  padding: 0.8em 1.25em;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: #dce6ee;
  font-size: clamp(15px, 1.25vw, 22px);
  font-weight: 800;
}

.xtream-tabs button.active,
.xtream-tabs button:focus,
.xtream-tabs button:hover {
  outline: none;
  border-color: #2f9bff;
  background: #2f9bff;
  color: #071425;
}

.xtream-library-grid {
  display: grid;
  height: calc(100% - clamp(190px, 24vh, 300px));
  grid-template-columns: repeat(auto-fill, minmax(clamp(145px, 10.5vw, 220px), 1fr));
  gap: clamp(14px, 1.35vw, 26px);
  align-content: start;
  overflow-y: auto;
  padding: 5px 7px 40px;
  -webkit-overflow-scrolling: touch;
}

.xtream-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.35em;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #f7fbff;
  text-align: left;
  transform: scale(1);
  transition: transform 130ms ease, background 130ms ease;
}

.xtream-card.focused,
.xtream-card:focus,
.xtream-card:hover {
  z-index: 2;
  outline: 4px solid #2f9bff;
  outline-offset: 5px;
  background: rgba(47, 155, 255, 0.13);
  transform: scale(1.025);
}

.xtream-card-cover {
  position: relative;
  display: grid;
  width: 100%;
  height: clamp(100px, 10.5vw, 210px);
  aspect-ratio: 16 / 10;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(145deg, #15314c, #0b1d30);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
}

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

.xtream-card.kind-live .xtream-card-cover {
  height: auto;
  aspect-ratio: 1 / 1;
}

.xtream-card.kind-live .xtream-card-cover img {
  box-sizing: border-box;
  padding: clamp(6px, 0.7vw, 12px);
  background: rgba(255, 255, 255, 0.96);
  object-fit: contain;
}

.xtream-card-cover > b {
  color: #67b9ff;
  font-size: clamp(30px, 3vw, 58px);
}

.xtream-series-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 0.35em 0.55em;
  border-radius: 4px;
  background: #2f9bff;
  color: #071425;
  font-size: clamp(8px, 0.65vw, 12px);
  font-style: normal;
  font-weight: 900;
}

.xtream-card > strong,
.xtream-card > small {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xtream-card-progress {
  position: absolute;
  right: 7px;
  bottom: 7px;
  left: 7px;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
}

.xtream-card-progress > i {
  display: block;
  height: 100%;
  background: #2f9bff;
}

.xtream-card > strong {
  margin-top: 0.35em;
  font-size: clamp(14px, 1.15vw, 21px);
}

.xtream-card > small {
  color: #91a7b9;
  font-size: clamp(10px, 0.82vw, 15px);
}

.xtream-more-card {
  min-height: clamp(150px, 14vw, 260px);
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(255, 255, 255, 0.24);
  text-align: center;
}

.xtream-more-card > span {
  color: #2f9bff;
  font-size: clamp(32px, 3vw, 56px);
}

.xtream-library-footer {
  position: absolute;
  right: clamp(30px, 4vw, 78px);
  bottom: clamp(14px, 2vh, 32px);
  left: clamp(30px, 4vw, 78px);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: #8fa4b6;
  font-size: clamp(10px, 0.85vw, 15px);
}

.xtream-now-playing {
  position: absolute;
  right: clamp(28px, 4vw, 76px);
  bottom: clamp(190px, 22vh, 250px);
  left: clamp(28px, 4vw, 76px);
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 28px);
  visibility: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 170ms ease, transform 170ms ease;
}

.xtream-channel-drawer {
  position: absolute;
  z-index: 9;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  visibility: hidden;
  width: min(43vw, 640px);
  flex-direction: column;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  opacity: 0;
  background: rgba(5, 18, 30, 0.84);
  box-shadow: -22px 0 60px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
  transform: translateX(105%);
  transition: opacity 200ms ease, transform 200ms ease;
}

.xtream-drawer-visible .xtream-channel-drawer {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
}

.xtream-channel-drawer > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(24px, 4vh, 50px) clamp(20px, 3vw, 42px) 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.xtream-channel-drawer > header div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.xtream-channel-drawer > header small {
  color: #2f9bff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.17em;
}

.xtream-channel-drawer > header strong {
  font-size: clamp(25px, 2.6vw, 42px);
}

.xtream-channel-count {
  color: #9db0c1;
}

.xtream-channel-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px clamp(12px, 2vw, 28px);
}

.xtream-channel-list button {
  display: flex;
  width: 100%;
  min-height: 76px;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  color: #fff;
  background: transparent;
  text-align: left;
}

.xtream-channel-list button.active {
  color: #06111d;
  background: #2f9bff;
}

.xtream-channel-list button.current:not(.active) {
  box-shadow: inset 4px 0 #2f9bff;
}

.xtream-channel-list button > b {
  width: 2.4em;
  flex: 0 0 auto;
  text-align: right;
}

.xtream-channel-list button img,
.xtream-channel-list button > i {
  width: 3.5em;
  height: 3.5em;
  box-sizing: border-box;
  flex: 0 0 auto;
  padding: 4px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.94);
  object-fit: contain;
}

.xtream-channel-list button > span {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.xtream-channel-list button strong,
.xtream-channel-list button small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xtream-channel-list button small {
  margin-top: 4px;
  color: #a9bdca;
}

.xtream-channel-list .load-more {
  justify-content: center;
  margin: 13px 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.xtream-channel-drawer > footer {
  padding: 15px 22px 22px;
  color: #9bb0bf;
  font-size: clamp(10px, 0.85vw, 14px);
  text-align: center;
}

.xtream-progress {
  position: absolute;
  z-index: 8;
  right: clamp(35px, 5vw, 90px);
  bottom: clamp(118px, 14vh, 165px);
  left: clamp(35px, 5vw, 90px);
  visibility: hidden;
  opacity: 0;
  transition: opacity 180ms ease;
}

.xtream-controls-visible .xtream-progress {
  visibility: visible;
  opacity: 1;
}

.xtream-progress > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: #d8e3ea;
  font-size: clamp(11px, 0.9vw, 15px);
}

.xtream-progress-range {
  width: 100%;
  height: 14px;
  margin: 0;
  accent-color: #2f9bff;
}

.xtream-controls {
  z-index: 7;
}

.xtream-now-playing.visible {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.xtream-now-cover {
  width: clamp(90px, 8vw, 150px);
  height: clamp(60px, 5vw, 96px);
  border-radius: 8px;
  background: #fff;
  object-fit: cover;
}

.xtream-now-playing > div {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.xtream-now-kind {
  color: #67b9ff;
  font-size: clamp(10px, 0.85vw, 15px);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.xtream-now-title {
  overflow: hidden;
  font-size: clamp(24px, 2.5vw, 46px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xtream-now-meta {
  color: #a8b8c5;
  font-size: clamp(12px, 1vw, 18px);
}

.xtream-now-playing button {
  display: flex;
  min-width: clamp(100px, 10vw, 170px);
  min-height: clamp(60px, 7vh, 90px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  background: rgba(14, 29, 43, 0.92);
  color: #fff;
  font-size: clamp(20px, 2vw, 34px);
}

.xtream-now-playing button span {
  font-size: clamp(9px, 0.75vw, 13px);
  font-weight: 800;
}

.xtream-message {
  position: absolute;
  top: 45%;
  left: 50%;
  z-index: 5;
  max-width: 75vw;
  padding: 0.75em 1em;
  border-radius: 10px;
  background: rgba(4, 14, 25, 0.94);
  font-size: clamp(17px, 1.7vw, 30px);
  text-align: center;
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.xtream-message.visible {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 720px), (orientation: portrait) {
  .xtream-channel-drawer {
    width: min(88vw, 620px);
  }

  .xtream-progress {
    right: 20px;
    bottom: 110px;
    left: 20px;
  }

  .xtream-library {
    padding: 22px 20px 44px;
  }

  .xtream-library-header {
    grid-template-columns: 1fr auto;
  }

  .xtream-library-header > div:nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .xtream-tabs {
    overflow-x: auto;
    margin: 18px 0;
  }

  .xtream-tabs button {
    min-width: 105px;
  }

  .xtream-library-grid {
    height: calc(100% - 220px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .xtream-library-footer {
    right: 20px;
    bottom: 12px;
    left: 20px;
  }

  .xtream-library-footer span:last-child {
    display: none;
  }

  .xtream-controls {
    right: 12px;
    bottom: 14px;
    left: 12px;
    gap: 5px;
  }

  .xtream-controls button {
    min-width: 0;
    flex: 1;
  }
}