:root {
  color-scheme: dark;
  --bg: #0b0d10;
  --panel: #14171b;
  --panel-2: #1d2228;
  --edge: rgba(255, 255, 255, 0.1);
  --text: #f4f6f8;
  --muted: #9aa4af;
  --accent: #f2c14e;
  --accent-2: #d99a21;
  --danger: #e45f5f;
  --motu-viewport-top: 0px;
  --motu-viewport-height: 100dvh;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Inter, system-ui, sans-serif;
}

html {
  -webkit-text-size-adjust: 100%;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
  background: var(--bg);
}

.player-panel {
  min-width: 0;
  min-height: 0;
  padding: 14px;
}

.player-frame {
  isolation: isolate;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: #000;
}

#player {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
}

.player-frame:not(.has-native-controls) #player {
  pointer-events: none;
}

.empty-state {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  gap: 10px;
  text-align: center;
  color: var(--muted);
  pointer-events: none;
}

.empty-logo {
  display: block;
  width: min(260px, 42vw);
  height: auto;
  margin: 0 auto;
}

.empty-state.hidden {
  display: none;
}

.player-topbar {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  background: transparent;
  border: 0;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
}

.player-frame.show-touch-controls .player-topbar {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.now-playing {
  display: grid;
  gap: 2px;
  min-width: 0;
  max-width: min(420px, 48vw);
  padding: 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.now-playing span {
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(242, 193, 78, 0.18);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.now-playing strong,
.now-playing small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.now-playing small {
  color: var(--muted);
}

.network-status {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
  padding: 0;
  background: transparent;
  border: 0;
}

.touch-channel-controls,
.mobile-controls-toggle {
  display: none;
}

.touch-channel-controls {
  position: absolute;
  inset: 0;
  z-index: 22;
  opacity: 0;
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
}

.touch-channel-button {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(242, 193, 78, 0.6);
  border-radius: 8px;
  background: rgba(20, 23, 27, 0.9);
  color: var(--text);
  font-weight: 900;
  font-size: 1.8rem;
  line-height: 1;
  transform: translateY(-50%);
}

.touch-channel-button-prev {
  left: 10px;
}

.touch-channel-button-next {
  right: 10px;
}

.player-frame.show-touch-controls .touch-channel-controls {
  opacity: 1;
  transform: translateY(0);
  pointer-events: none;
}

.player-frame.show-touch-controls .touch-channel-button {
  pointer-events: auto;
}

.volume-controls {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 24;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(12, 14, 18, 0.78);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

.volume-button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1;
}

.volume-button:hover,
.volume-button:focus-visible {
  background: rgba(242, 193, 78, 0.22);
  outline: none;
}

.volume-slider {
  width: 88px;
  accent-color: var(--accent);
}

.player-frame:fullscreen {
  width: 100vw;
  height: 100vh;
  border: 0;
  border-radius: 0;
  background: #000;
}

.player-frame:fullscreen.is-live .touch-channel-controls {
  display: flex;
}

.player-frame:fullscreen .player-topbar {
  opacity: 0 !important;
  transform: translateY(-8px) !important;
  pointer-events: none !important;
}

.player-frame:fullscreen.show-touch-controls .player-topbar {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

.player-frame:fullscreen .player-topbar {
  left: 18px;
  right: 18px;
  padding: 0;
  background: transparent;
  border: 0;
}

.player-frame:fullscreen .now-playing {
  padding: 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.player-frame:fullscreen.show-touch-controls .touch-channel-controls {
  opacity: 1;
}

body.app-player-fullscreen .app-shell {
  width: 100vw !important;
  height: var(--motu-viewport-height) !important;
  min-height: var(--motu-viewport-height) !important;
  display: block !important;
  overflow: hidden !important;
}

body.app-player-fullscreen .player-panel {
  position: fixed !important;
  top: var(--motu-viewport-top) !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  z-index: 1000 !important;
  width: 100vw !important;
  height: var(--motu-viewport-height) !important;
  padding: 0 !important;
  border: 0 !important;
  background: #000 !important;
}

body.app-player-fullscreen .player-frame {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
}

body.app-player-fullscreen #player {
  object-fit: contain;
}

body.app-player-fullscreen .player-frame.is-live .touch-channel-controls {
  display: flex !important;
}

body.app-player-fullscreen .library-panel {
  visibility: hidden !important;
}

body.app-player-fullscreen .player-frame .player-topbar {
  opacity: 0 !important;
  transform: translateY(-8px) !important;
  pointer-events: none !important;
}

body.app-player-fullscreen .player-frame.show-touch-controls .player-topbar,
body.app-player-fullscreen .player-frame.show-touch-controls .touch-channel-controls {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

body.app-player-fullscreen .player-frame.show-touch-controls .player-topbar {
  pointer-events: auto !important;
}

body.app-player-fullscreen .player-frame .player-topbar {
  left: 18px;
  right: 18px;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

body.app-player-fullscreen .player-frame .now-playing {
  padding: 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.app-player-fullscreen .player-frame.is-playing:not(.show-touch-controls) .player-topbar {
  opacity: 0 !important;
  transform: translateY(-8px) !important;
  pointer-events: none !important;
}

body.app-player-fullscreen .player-frame.is-playing:not(.show-touch-controls) .touch-channel-controls {
  opacity: 0 !important;
  pointer-events: none !important;
}

.icon-button,
.primary-button,
.secondary-button,
.mode-tab,
.load-more,
.mobile-controls-toggle {
  border: 1px solid var(--edge);
  background: var(--panel-2);
  color: var(--text);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.15;
}

.primary-button,
.mode-tab.is-active,
.mobile-controls-toggle {
  background: var(--accent);
  color: #161616;
  border-color: rgba(242, 193, 78, 0.8);
}

.secondary-button {
  border-color: rgba(255, 255, 255, 0.16);
  background: #26313b;
  color: var(--text);
}

.secondary-button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.secondary-button.is-active {
  background: var(--accent);
  color: #161616;
  border-color: rgba(242, 193, 78, 0.8);
}

.library-panel {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px;
  border-left: 1px solid var(--edge);
  background: var(--panel);
}

.library-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 6px;
}

.library-title {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.library-actions {
  display: grid;
  min-width: 0;
  width: 100%;
  grid-template-columns: 1.35fr 1.15fr 0.9fr;
  gap: 6px;
}

.library-actions .primary-button,
.library-actions .secondary-button {
  min-height: 32px;
  min-width: 0;
  padding: 6px 5px;
  font-size: 0.72rem;
  white-space: nowrap;
}

.stream-switcher {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.stream-switcher a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 5px 4px;
  border: 1px solid rgba(48, 156, 220, .45);
  border-radius: 8px;
  background: linear-gradient(180deg, #173452, #0e2034);
  color: #d7eafa;
  font-size: .76rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.stream-switcher a:hover,
.stream-switcher a:focus-visible {
  border-color: #79cfff;
  outline: 2px solid #29a4ea;
  outline-offset: 1px;
}

.stream-switcher a.is-current {
  border-color: #f7d675;
  background: linear-gradient(180deg, #f6d56e, #d8a430);
  color: #17130a;
  box-shadow: 0 0 14px rgba(241, 190, 66, .18);
}

.roku-config-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(242, 193, 78, 0.25);
  border-radius: 8px;
  background: rgba(242, 193, 78, 0.08);
}

.roku-config-actions {
  display: flex;
  gap: 6px;
}

.roku-config-actions .primary-button,
.roku-config-actions .secondary-button {
  min-height: 34px;
  padding: 7px 10px;
}

h1 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.2;
  white-space: nowrap;
}

.controls-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.field {
  display: grid;
  gap: 5px;
}

.field-wide {
  grid-column: 1 / -1;
}

.settings-row {
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.settings-row > span {
  white-space: nowrap;
}

.settings-row select {
  min-width: 0;
}

.search-row input {
  min-width: 0;
}

.arrange-favorites-tab {
  white-space: nowrap;
  padding-left: 2px;
  padding-right: 2px;
  font-size: 0.68rem;
}

.search-controls {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(150px, 1fr);
  gap: 8px;
  align-items: center;
}

.search-controls input {
  min-width: 0;
}

.search-arrange-button {
  min-width: 0;
  min-height: 34px;
  padding: 7px 10px;
  white-space: nowrap;
}

.field span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.field input,
.field select {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: #0f1216;
  color: var(--text);
  padding: 7px 9px;
  font-size: 0.88rem;
  outline: none;
}

.playlist-select-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.playlist-select-row select {
  min-width: 0;
}

.playlist-select-row .secondary-button {
  min-height: 34px;
  padding: 7px 9px;
  white-space: nowrap;
}

.mode-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.mode-tab {
  min-height: 32px;
  padding: 7px 5px;
  font-size: 0.78rem;
  white-space: nowrap;
}

.list-summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.item-list {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 7px;
  padding-right: 3px;
}

.item-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 28px 34px;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  background: #191d22;
  color: var(--text);
  text-align: left;
}

.item-card.is-active {
  border-color: rgba(242, 193, 78, 0.75);
  box-shadow: inset 3px 0 0 var(--accent);
}

.item-list.is-arranging .item-card {
  cursor: grab;
}

.item-list.is-arranging .item-card:active {
  cursor: grabbing;
}

.item-card.is-dragging {
  opacity: 0.45;
  border-color: var(--accent);
}

.arrange-grip {
  display: grid;
  place-items: center;
  min-width: 24px;
  color: var(--accent);
  font-size: 1.1rem;
  font-weight: 900;
  cursor: ns-resize;
}

.item-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.08);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 900;
}

.item-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.item-title,
.item-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-title {
  font-weight: 800;
}

.item-meta {
  color: var(--muted);
  font-size: 0.76rem;
}

.favorite-button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.25rem;
  line-height: 1;
}

.favorite-button.is-favorite {
  color: var(--accent);
}

.load-more {
  width: 100%;
}

.hidden {
  display: none !important;
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(42vh, 52vh) minmax(0, 1fr);
  }

  .player-panel {
    padding: 10px 10px 0;
  }

  .library-panel {
    border-left: 0;
    border-top: 1px solid var(--edge);
    padding: 10px;
  }

  .mode-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  .app-shell {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 380px);
  }

  .library-panel {
    padding: 12px;
  }

  .mode-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  .app-shell {
    width: 100%;
    height: 100dvh;
    min-height: 100svh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .player-panel {
    flex: 0 0 auto;
    z-index: 20;
    width: 100%;
    min-height: 0;
    padding: max(8px, env(safe-area-inset-top)) 8px 8px;
    background: var(--bg);
    border-bottom: 1px solid var(--edge);
  }

  .player-frame {
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
  }

  .player-frame.is-live .touch-channel-controls {
    display: flex;
  }

  body .player-frame.is-playing:not(.show-touch-controls) .player-topbar {
    opacity: 0 !important;
    transform: translateY(-6px);
    pointer-events: none !important;
  }

  body .player-frame.is-playing.show-touch-controls .player-topbar {
    opacity: 1 !important;
    transform: translateY(0);
    pointer-events: auto !important;
  }

  .player-topbar {
    top: 8px;
    left: 8px;
    right: 8px;
    gap: 8px;
    padding: 0;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .now-playing {
    gap: 1px;
  }

  .now-playing span {
    padding: 2px 7px;
    font-size: 0.66rem;
  }

  .now-playing strong {
    max-width: min(54vw, 440px);
    font-size: 0.9rem;
  }

  .now-playing small {
    display: none;
  }

  .player-actions {
    gap: 6px;
  }

  .icon-button,
  .primary-button,
  .secondary-button,
  .mode-tab,
  .load-more {
    min-height: 42px;
    padding: 10px 12px;
  }

  .library-panel {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    gap: 10px;
    padding: 12px max(10px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    border-top: 1px solid var(--edge);
    border-left: 0;
  }

  .mobile-controls-toggle {
    display: block;
    width: 100%;
    min-height: 42px;
    margin-bottom: 2px;
  }

  .library-header,
  .controls-grid {
    display: none;
  }

  body.mobile-controls-open .library-header {
    display: flex;
  }

  body.mobile-controls-open .controls-grid {
    display: grid;
  }

  .library-header {
    align-items: center;
  }

  h1 {
    font-size: 1.05rem;
  }

  p {
    font-size: 0.8rem;
  }

  .controls-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .field span {
    font-size: 0.72rem;
  }

  .field input,
  .field select {
    min-height: 44px;
    font-size: 16px;
  }

  .mode-tabs {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    margin: 0 -2px;
    padding: 0 2px 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .mode-tabs::-webkit-scrollbar {
    display: none;
  }

  .mode-tab {
    flex: 0 0 auto;
    min-width: 84px;
    font-size: 0.82rem;
  }

  .list-summary {
    flex: 0 0 auto;
    font-size: 0.78rem;
  }

  .item-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-right: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .item-card {
    min-height: 58px;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: 9px;
    padding: 9px;
  }

  .item-icon,
  .favorite-button {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 480px) {
  .player-panel {
    padding-left: 6px;
    padding-right: 6px;
  }

  .player-topbar {
    align-items: center;
    flex-wrap: wrap;
  }

  .now-playing {
    flex: 1 1 42%;
  }

  .now-playing strong {
    max-width: 40vw;
    font-size: 0.84rem;
  }

  .player-actions {
    flex: 0 0 auto;
  }

  .player-actions .icon-button {
    min-height: 36px;
    padding: 7px 8px;
    font-size: 0.76rem;
  }

  .touch-channel-button {
    width: 38px;
    height: 38px;
    padding: 0;
    font-size: 1.5rem;
  }

  .touch-channel-button-prev {
    left: 8px;
  }

  .touch-channel-button-next {
    right: 8px;
  }

  .empty-state {
    padding: 46px 18px 18px;
  }

  .volume-controls {
    right: 8px;
    bottom: 8px;
    gap: 6px;
    padding: 4px 6px;
  }

  .volume-slider {
    width: 68px;
  }

  .empty-logo {
    width: min(190px, 52vw);
  }

  .empty-state span {
    font-size: 0.82rem;
  }

  .library-panel {
    padding-top: 10px;
  }

  .library-header {
    gap: 8px;
  }

  .primary-button {
    min-width: 82px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .item-title {
    font-size: 0.92rem;
  }

  .item-meta {
    font-size: 0.72rem;
  }
}

@media (max-width: 380px) {
  .now-playing span {
    display: none;
  }

  .now-playing strong {
    max-width: 38vw;
  }

  .player-actions .icon-button {
    padding-left: 7px;
    padding-right: 7px;
  }
}

@media (orientation: landscape) and (max-width: 820px) {
  .app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 58vw) minmax(300px, 1fr);
    grid-template-rows: 100vh;
  }

  .player-panel {
    position: static;
    padding: 8px;
    border-bottom: 0;
  }

  .player-frame {
    height: 100%;
    aspect-ratio: auto;
  }

  .library-panel {
    min-height: 100vh;
    overflow: auto;
    border-top: 0;
    border-left: 1px solid var(--edge);
  }

  .mode-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .mode-tab {
    min-width: 0;
    flex: initial;
    font-size: 0.78rem;
    padding: 7px 5px;
  }

  .library-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .controls-grid {
    display: grid;
  }

  .mobile-controls-toggle {
    display: none;
  }
}

@media (orientation: landscape) and (max-width: 740px) {
  .arrange-favorites-tab {
    grid-column: span 2;
  }
}

/* MOTU Stream TV facelift: visual-only treatment over the existing controls. */
:root {
  --bg: #050b14;
  --panel: #0a1523;
  --panel-2: #102238;
  --edge: rgba(54, 157, 224, 0.32);
  --text: #f4f8fc;
  --muted: #91a8bd;
  --accent: #f3c54f;
  --accent-2: #d89a22;
  --motu-blue: #1da7ef;
}

body { background: radial-gradient(circle at 18% 10%, #102b43 0, #07111d 34%, #03070d 100%); }
.app-shell { gap: 1px; background: linear-gradient(90deg, rgba(37, 131, 190, .45), rgba(8, 20, 33, .65)); }
.player-panel { padding: 12px; background: linear-gradient(145deg, rgba(9, 25, 40, .96), rgba(3, 10, 18, .98)); }
.player-frame { border-color: rgba(34, 143, 211, .55); border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(116, 204, 255, .05), 0 0 28px rgba(4, 123, 190, .16); }
.empty-state { color: #9db5c9; text-shadow: 0 1px 16px rgba(0, 0, 0, .65); }

.player-topbar { top: 10px; left: 12px; right: 12px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; opacity: .96; transform: translateY(0); pointer-events: auto; }
.player-brand { display: inline-flex; align-items: center; gap: 7px; min-width: 0; padding: 8px 11px; border: 1px solid rgba(41, 164, 234, .38); border-radius: 10px; background: rgba(3, 14, 25, .84); box-shadow: 0 8px 22px rgba(0, 0, 0, .28); white-space: nowrap; }
.player-brand img { width: 27px; height: 27px; object-fit: contain; }
.player-brand strong { color: var(--accent); font-size: 1.18rem; letter-spacing: .05em; }
.player-brand span { color: #d7eafa; font-size: .78rem; font-weight: 900; letter-spacing: .1em; }
.now-playing { justify-self: start; padding: 9px 11px; border-color: rgba(54, 158, 221, .36); border-radius: 10px; background: rgba(3, 12, 21, .9); box-shadow: 0 8px 24px rgba(0, 0, 0, .32); }
.player-actions { gap: 7px; }

.player-actions .icon-button, .library-actions button, .playlist-select-row button, .roku-config-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 9px; border-color: rgba(48, 156, 220, .45); background: linear-gradient(180deg, #173452, #0e2034); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 4px 12px rgba(0, 0, 0, .18); }
.player-actions .icon-button:hover, .library-actions button:hover, .playlist-select-row button:hover, .roku-config-actions button:hover, .mode-tab:hover { border-color: rgba(74, 190, 255, .8); filter: brightness(1.12); }
#stop-button::before { content: "■"; color: #ff8b7d; font-size: .7rem; }
#fullscreen-button::before { content: "⛶"; color: #9edaff; font-size: 1rem; }
#provider-refresh-button::before { content: "↻"; color: #9edaff; font-size: 1rem; }
#roku-refresh-button::before { content: "⚙"; color: #9edaff; font-size: .9rem; }
#reload-button::before { content: "⟳"; color: #2b3944; font-size: 1rem; }
#add-playlist-button::before { content: "+"; color: var(--accent); font-size: 1.05rem; }

.volume-controls { left: auto; right: 12px; bottom: 12px; width: 260px; min-height: 38px; padding: 5px 8px; border-color: rgba(50, 154, 218, .36); border-radius: 10px; background: linear-gradient(90deg, rgba(4, 17, 29, .94), rgba(10, 28, 46, .88)); box-shadow: 0 8px 22px rgba(0, 0, 0, .3); }
.volume-slider { flex: 1; width: auto; }

/* Keep player identifiers and volume controls out of the picture until interaction. */
.player-frame .player-topbar,
.player-frame .volume-controls {
  opacity: 0 !important;
  visibility: hidden;
  transform: translateY(8px) !important;
  pointer-events: none !important;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms linear;
}

.player-frame.show-touch-controls .player-topbar,
.player-frame.show-touch-controls .volume-controls {
  opacity: 1 !important;
  visibility: visible;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

.library-panel { gap: 9px; padding: 12px; border-left-color: rgba(43, 148, 211, .5); background: linear-gradient(180deg, #0a1727 0%, #07111d 100%); box-shadow: inset 1px 0 0 rgba(115, 206, 255, .06); }
.library-title h1 { color: #e9f4fc; letter-spacing: .01em; }
.library-title p { color: #79dc9c; }
.library-title p::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 5px 1px 0; border-radius: 50%; background: #58d58d; box-shadow: 0 0 9px rgba(88, 213, 141, .7); }
.library-actions .primary-button, .roku-config-actions .primary-button { background: linear-gradient(180deg, #f6d56e, #d9a631); color: #17130a; border-color: #f8dc86; }
.controls-grid, .roku-config-panel, .list-summary { border-color: rgba(46, 143, 204, .26); }
.field > span { color: #8ca8bd; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
select, input[type="search"] { border-color: rgba(46, 146, 207, .38) !important; border-radius: 8px !important; background: #0c1d30 !important; color: var(--text) !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); }

.mode-tabs { gap: 6px; padding: 6px; border: 1px solid rgba(43, 142, 202, .25); border-radius: 11px; background: rgba(6, 18, 31, .76); }
.mode-tab { min-height: 31px; border-color: rgba(50, 149, 211, .34); border-radius: 8px; background: linear-gradient(180deg, #112b45, #0c1c2e); color: #c6d8e6; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035); }
.mode-tab::before { display: inline-block; margin-right: 5px; color: #7ecbfa; font-size: .78rem; }
.mode-tab[data-mode="favorites"]::before { content: "★"; }
.mode-tab[data-mode="all"]::before { content: "▦"; }
.mode-tab[data-mode="live"]::before { content: "●"; color: #ee7474; }
.mode-tab[data-mode="movies"]::before { content: "▶"; }
.mode-tab[data-mode="series"]::before { content: "▤"; }
.mode-tab[data-mode="groups"]::before { content: "◆"; }
.mode-tab[data-mode="local"]::before, .mode-tab[data-mode="pi-local"]::before { content: "□"; }
.arrange-favorites-tab::before { content: "☷"; }
.mode-tab.is-active { background: linear-gradient(180deg, #f6d56e, #d8a430); color: #17130a; border-color: #f7d675; box-shadow: 0 0 16px rgba(241, 190, 66, .18); }
.mode-tab.is-active::before { color: #4b3509; }

.list-summary { padding: 6px 8px; border: 1px solid rgba(43, 145, 205, .24); border-radius: 8px; background: rgba(8, 24, 40, .72); }
.item-card { min-height: 52px; margin-bottom: 6px; border-color: rgba(45, 142, 201, .3); border-radius: 10px; background: linear-gradient(135deg, rgba(16, 38, 61, .98), rgba(8, 20, 34, .98)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 5px 12px rgba(0, 0, 0, .16); }
.item-card:hover { border-color: rgba(75, 186, 245, .75); background: linear-gradient(135deg, rgba(20, 49, 77, .98), rgba(8, 24, 41, .98)); }
.item-card.is-active { border-color: #2db5ff; box-shadow: 0 0 0 1px rgba(45, 181, 255, .38), 0 0 18px rgba(20, 151, 225, .22); }
.item-card .item-title { color: #edf7ff; }
.item-card .item-meta { color: #8caec5; }
.favorite-button { color: var(--accent); }

@media (orientation: landscape) and (max-width: 820px) {
  .player-brand { padding: 6px 8px; gap: 5px; }
  .player-brand img { width: 22px; height: 22px; }
  .player-brand strong { font-size: .98rem; }
  .player-brand span { font-size: .65rem; }
  .player-topbar { gap: 7px; }
}

/* Keep the playback overlays compact and clear of the browser's native controls. */
.player-topbar { min-width: 0; gap: 8px; }
.now-playing {
  display: flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  max-width: min(340px, 36vw);
  padding: 5px 8px;
}
.now-playing span { flex: 0 0 auto; padding: 2px 6px; font-size: .62rem; }
.now-playing strong { max-width: min(250px, 26vw); font-size: .84rem; line-height: 1.15; }
.now-playing small { display: none; }
.volume-controls {
  right: 12px;
  bottom: 52px;
  width: min(260px, 32vw);
  min-width: 180px;
}
.volume-slider { min-width: 0; }

@media (max-width: 820px) {
  .now-playing { max-width: min(48vw, 300px); padding: 4px 7px; }
  .now-playing strong { max-width: 40vw; font-size: .78rem; }
}

@media (max-width: 480px) {
  .volume-controls {
    right: 8px;
    bottom: 42px;
    width: min(210px, 58vw);
    min-width: 140px;
  }
}


/* Isolated US favorites-only view on Cloud port 3033. */
body.favorite-only .library-header,
body.favorite-only .roku-config-panel,
body.favorite-only .controls-grid,
body.favorite-only .mode-tabs,
body.favorite-only .list-summary,
body.favorite-only #load-more-button,
body.favorite-only .item-meta,
body.favorite-only .favorite-button { display: none !important; }
body.favorite-only .library-panel { grid-template-rows: minmax(0, 1fr); }
body.favorite-only .item-card { grid-template-columns: 34px minmax(0, 1fr); }
@media (min-width: 981px) { body.favorite-only .app-shell { grid-template-columns: minmax(0, 1fr) minmax(300px, 25vw); } }

body.favorite-only:not(.st-authorized) .app-shell { visibility: hidden !important; pointer-events: none !important; }
body.st-auth-checking .auth-gate { visibility: hidden; pointer-events: none; }
.auth-gate { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; overflow-y: auto; background: radial-gradient(ellipse at top, #153a58 0, #07111d 58%); color: #eaf3fa; font-family: "Segoe UI", Inter, system-ui, sans-serif; }
.auth-gate.hidden { display: none !important; }
.auth-card { width: min(470px, 100%); padding: clamp(22px, 5vw, 36px); border: 1px solid rgba(104, 180, 226, .4); border-radius: 18px; background: rgba(7, 20, 33, .96); box-shadow: 0 28px 90px rgba(0,0,0,.5); }
.auth-card h1 { margin: 0 0 10px; font-size: clamp(1.55rem, 5vw, 2rem); }
.auth-card p { max-width: 100%; color: #a9bdcc; line-height: 1.55; white-space: normal; overflow-wrap: anywhere; }
.auth-eyebrow { margin: 0 0 8px; color: #7ecbfa !important; font-size: .74rem; font-weight: 800; letter-spacing: .14em; }
.request-code-wrap { display: grid; gap: 5px; margin: 22px 0; padding: 16px; border: 1px solid rgba(242, 193, 78, .45); border-radius: 10px; background: rgba(242, 193, 78, .07); }
.request-code-wrap span { color: #c8d8e5; font-size: .85rem; font-weight: 700; }
.request-code-wrap strong { color: #f5d76f; font: 850 2rem ui-monospace, monospace; letter-spacing: .16em; }
.request-code-wrap small { color: #9aafbf; }
#approval-form { display: grid; gap: 9px; }
#approval-form label { color: #c2d3df; font-size: .85rem; font-weight: 750; }
#approval-code { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #356384; border-radius: 8px; outline-color: #7ecbfa; background: #071421; color: white; font: 750 1.1rem ui-monospace, monospace; letter-spacing: .08em; }
#approval-submit { min-height: 44px; border: 1px solid #f5d76f; border-radius: 8px; background: linear-gradient(#f5d76f, #d9a633); color: #17130a; font-weight: 850; cursor: pointer; }
#approval-submit:disabled { opacity: .55; cursor: wait; }
.auth-message { min-height: 1.3em; color: #ff9c9c !important; font-size: .9rem; }
.owner-link { color: #8ccfff; font-size: .84rem; }