/* Provider-only spotlight. The shared carousel and TikTok feed keep their styles. */
.provider-spotlight .provider-feature-avatar-link{display:block;flex:0 0 36px;border-radius:50%}
.provider-spotlight .provider-feature-name-link{color:inherit;text-decoration:none}
.provider-spotlight .provider-feature-name-link:hover{text-decoration:underline}
.provider-spotlight .provider-entry-art{display:none}
.provider-spotlight .provider-feature-name-row{display:flex;align-items:center;gap:8px}
.provider-spotlight .provider-channel-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 28px;width:28px;height:28px;padding:5px;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
.provider-spotlight .provider-channel-toggle:hover{background:var(--provider-hover)}
.provider-spotlight .provider-channel-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;transform:rotate(-90deg)}
.provider-spotlight .provider-channel-toggle[aria-expanded=false] svg{transform:rotate(90deg)}
.provider-spotlight .provider-channel-toggle:focus-visible,.provider-spotlight .provider-feature-watch:focus-visible{outline:2px solid #ffd000;outline-offset:3px}
.provider-spotlight .provider-channel-banner{position:relative;isolation:isolate;min-height:220px;padding:24px;background:#131316;overflow:hidden}
.provider-spotlight .provider-channel-banner-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45;z-index:-2}
.provider-spotlight .provider-channel-banner::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#080809d9,transparent 75%)}
.provider-spotlight .provider-channel-banner-copy{width:min(100%,330px);padding:18px;border-radius:5px;background:#0e0e10e8;color:#efeff1}
.provider-spotlight .provider-channel-status{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;margin-bottom:10px}
.provider-spotlight .provider-channel-banner h3{margin:0 0 16px;font:600 17px/1.4 Arial,sans-serif;letter-spacing:0;text-transform:none}
.provider-spotlight .provider-channel-banner .provider-feature-watch{display:inline-flex;width:auto;margin:0;padding:10px 18px;border:0;border-radius:4px;background:#ffd000;color:#111;font-weight:700;cursor:pointer}
.provider-spotlight .provider-channel-profile{--channel-accent:#ffd000}
.provider-spotlight .provider-channel-profile .wcp-channel{padding:0 20px 28px;background:var(--provider-surface);color:var(--provider-text)}
.provider-spotlight .provider-channel-profile .wcp-tabs{border-color:var(--provider-border)}
.provider-spotlight .provider-channel-profile .wcp-tabs button{color:var(--provider-text)}
.provider-spotlight .provider-channel-profile .wcp-tabs button[aria-selected=true]{color:var(--channel-accent)}
.provider-spotlight .provider-channel-profile .wcp-about,.provider-spotlight .provider-channel-profile .wcp-empty{background:var(--provider-hover);color:var(--provider-text)}
.provider-spotlight .provider-channel-profile :is(.wcp-empty h3,.wcp-media-card,.wcp-day h3){color:var(--provider-text)}
.provider-spotlight .provider-channel-profile :is(.wcp-description,.wcp-media-card small,.wcp-schedule-heading p,.wcp-event small,.wcp-no-event){color:var(--provider-muted)}
.provider-spotlight .provider-channel-profile .wcp-event{background:var(--provider-hover)}
body[data-watch-theme=light] .provider-spotlight .wcp-tabs button[aria-selected=true]{color:var(--provider-text)}
@media(max-width:760px){.provider-spotlight .provider-channel-banner{min-height:180px;padding:14px}.provider-spotlight .provider-channel-profile .wcp-channel{padding:0 14px 24px}}
/* Full desktop channel view: video meets the header/sidebar, chat owns the right lane. */
@media (min-width: 1001px) {
  body.provider-view:not(.watch-channel-active) {
    --provider-lane: clamp(220px, 18vw, 360px);
    --sidebar: clamp(170px, 13.3vw, 260px);
  }
  body.provider-view.sidebar-collapsed:not(.sidebar-open):not(.watch-channel-active) {
    --sidebar: clamp(40px, 3.125vw, 60px);
  }
  body.provider-view:not(.watch-channel-active) #creator-sidebar {
    width: var(--sidebar);
  }
  body.provider-view:not(.sidebar-collapsed):not(.watch-channel-active) #sidebar-toggle,
  body.provider-view.sidebar-open:not(.watch-channel-active) #sidebar-toggle {
    left: calc(var(--sidebar) - 38px);
  }
  body.provider-view:not(.watch-channel-active):has(.provider-spotlight.is-provider-empty) {
    --provider-lane: 0px;
  }
  body.provider-view:not(.watch-channel-active):has(.provider-spotlight.is-chat-collapsed:not(.is-provider-empty)) {
    --provider-lane: 0px;
  }
  body.provider-view:not(.watch-channel-active) #main {
    padding-top: var(--header, 50px);
    padding-left: 0;
    padding-right: var(--provider-lane);
  }
  body.provider-view:not(.watch-channel-active) #main > .content-section {
    margin-left: 24px;
    margin-right: 24px;
  }
  body.provider-view:not(.watch-channel-active) .provider-spotlight {
    padding: 0;
    container-type: normal;
  }
  body.provider-view:not(.watch-channel-active) .provider-feature-layout {
    display: block;
    position: relative;
    max-width: none;
    margin: 0;
  }
  body.provider-view:not(.watch-channel-active) .provider-feature-stage.feature-slide {
    border: 0;
    border-radius: 0;
  }
  body.provider-view:not(.watch-channel-active) .provider-feature-chat {
    position: fixed;
    z-index: 35;
    top: var(--header, 50px);
    right: 0;
    bottom: 0;
    width: var(--provider-lane);
    height: auto;
    max-height: none;
    min-height: 0;
    border: 0;
    border-left: 1px solid var(--provider-border);
    border-radius: 0;
  }
  /* The guest invitation belongs to the page column, never over chat. */
  body.provider-view:not(.watch-channel-active) .watch-join-strip {
    right: var(--provider-lane);
  }
  body.provider-view:not(.watch-channel-active) .provider-feature-video {
    min-height: 0;
    /* The complete player must fit above the fixed guest invitation. */
    max-height: max(300px, calc(100svh - var(--header, 50px) - var(--watch-guest-bar-height, 0px) - 2px));
  }
  body.provider-view:not(.watch-channel-active) .topbar {
    box-shadow: none;
  }
  body.provider-view:not(.watch-channel-active) .provider-feature-footer {
    min-height: 96px;
    padding: 16px 20px;
  }

}
.provider-spotlight {
  --provider-chat-width: 280px;
  --provider-surface: #18181b;
  --provider-border: #353538;
  --provider-text: #efeff1;
  --provider-muted: #adadb8;
  --provider-hover: #303034;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 16px 24px 24px;
  color: var(--provider-text);
  container: provider-spotlight / inline-size;
}

.provider-spotlight[hidden],
.provider-spotlight [hidden] {
  display: none !important;
}

.provider-spotlight *,
.provider-spotlight *::before,
.provider-spotlight *::after {
  box-sizing: border-box;
}

.provider-spotlight .provider-feature-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--provider-chat-width);
  align-items: stretch;
  gap: 12px;
  width: 100%;
  max-width: 2000px;
  min-width: 0;
  margin: 0 auto;
}

/* Reset every shared deck position/state on the single provider stage. */
.provider-spotlight .provider-feature-stage.feature-slide {
  display: block;
  position: relative;
  inset: auto;
  left: auto;
  top: auto;
  flex: none;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0;
  aspect-ratio: auto;
  transform: none;
  translate: none;
  scale: none;
  rotate: none;
  opacity: 1;
  visibility: visible;
  filter: none;
  pointer-events: auto;
  z-index: 0;
  overflow: hidden;
  border: 1px solid var(--provider-border);
  border-radius: 6px;
  box-shadow: none;
  background: #080809;
  transition: none;
  animation: none;
  isolation: isolate;
  /* This stage is stationary; it does not use carousel transforms. */
  will-change: auto;
}

.provider-spotlight .provider-feature-video {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 300px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #080809;
}

.provider-spotlight .provider-feature-poster {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #adadb8;
  background: #101013;
  font-size: 14px;
  text-align: center;
}

.provider-spotlight .provider-feature-poster > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.provider-spotlight .provider-feature-video > .feature-player {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  overflow: hidden;
  z-index: 1;
  background: transparent;
}

.provider-spotlight .feature-player > iframe,
.provider-spotlight .feature-player .featured-live-frame,
.provider-spotlight .feature-player > video {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  aspect-ratio: auto;
}

.provider-spotlight .provider-feature-fallback {
  box-sizing: border-box;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  height: 100%;
  padding: 28px 24px;
  color: #efeff1;
  text-align: center;
  background: #101013;
}

.provider-spotlight .provider-feature-fallback :is(h2, h3, p) {
  max-width: 420px;
  margin: 0;
}

.provider-spotlight .provider-feature-fallback :is(p, .provider-feature-fallback-reason) {
  color: #adadb8;
  font-size: 13px;
  line-height: 1.5;
}

.provider-spotlight .provider-feature-footer {
  box-sizing: border-box;
  position: relative;
  inset: auto;
  z-index: 3;
  padding: 12px 18px 10px;
  color: #fff;
  background: #09090b;
  pointer-events: none;
}

.provider-spotlight .provider-feature-poster:has(> img) .provider-feature-fallback {
  background: rgb(0 0 0 / 35%);
}

.provider-spotlight .provider-feature-details {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  pointer-events: auto;
}

.provider-spotlight .provider-feature-avatar {
  display: block;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border-radius: 50%;
  object-fit: cover;
  background: #303034;
}

.provider-spotlight .provider-feature-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.provider-spotlight .provider-feature-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.provider-spotlight .provider-feature-name {
  display: block;
  overflow: hidden;
  margin: 0 0 3px;
  color: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-spotlight .provider-feature-title {
  overflow: hidden;
  margin: 0;
  color: #efeff1;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-spotlight .provider-feature-meta {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: #c8c8d0;
  font-size: 11px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-spotlight .provider-feature-watch {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 15px;
  border: 0;
  border-radius: 4px;
  color: #111;
  background: #ffd600;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.provider-spotlight .provider-feature-watch:hover {
  color: #111;
  background: #ffe34c;
}

.provider-spotlight .provider-feature-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 32px;
  margin: 5px 0 0 48px;
  pointer-events: auto;
}

.provider-spotlight .provider-feature-dots {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 1px;
  min-width: 0;
}

.provider-spotlight .provider-feature-dots button {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 15px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
}

.provider-spotlight .provider-feature-dots button::before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #77777d;
}

.provider-spotlight .provider-feature-dots button[aria-current="true"] {
  width: 34px;
}

.provider-spotlight .provider-feature-dots button[aria-current="true"]::before {
  width: 28px;
  background: #fff;
}

.provider-spotlight .provider-feature-dots button:hover::before {
  background: #fff;
}

.provider-spotlight .provider-feature-arrows {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}

.provider-spotlight .provider-feature-arrows button,
.provider-spotlight .provider-chat-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 7px;
  border: 0;
  border-radius: 4px;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.provider-spotlight .provider-feature-arrows button:hover {
  background: rgb(255 255 255 / 15%);
}

.provider-spotlight .provider-chat-toggle:hover {
  background: var(--provider-hover);
}

.provider-spotlight .provider-feature-arrows button:disabled {
  opacity: .35;
  cursor: default;
}

.provider-spotlight .provider-feature-arrows svg,
.provider-spotlight .provider-chat-toggle svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.provider-spotlight :is(button, a):focus-visible {
  outline: 2px solid #ffd600;
  outline-offset: 3px;
}

.provider-spotlight .provider-feature-chat {
  display: flex;
  position: relative;
  flex-direction: column;
  min-width: 0;
  min-height: 300px;
  overflow: hidden;
  border: 1px solid var(--provider-border);
  border-radius: 6px;
  color: var(--provider-text);
  background: var(--provider-surface);
}

.provider-spotlight .provider-chat-heading {
  box-sizing: border-box;
  display: flex;
  position: relative;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  height: 44px;
  padding: 0 44px;
  border-bottom: 1px solid var(--provider-border);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.provider-spotlight .provider-chat-heading :is(h2, h3, p) {
  margin: 0;
  font: inherit;
}

.provider-spotlight .provider-chat-heading > .provider-chat-toggle {
  position: absolute;
  top: 6px;
  left: 6px;
}

.provider-spotlight .provider-chat-toggle-label {
  display: none;
}

/* Embedded chat owns its header and separator. Keep only our collapse
   control in that header without adding another row above the iframe. */
.provider-spotlight.is-chat-embedded .provider-chat-heading {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 44px;
  padding: 0;
  border: 0;
  pointer-events: none;
}

.provider-spotlight.is-chat-embedded .provider-chat-heading > h2 {
  display: none;
}

.provider-spotlight.is-chat-embedded .provider-chat-toggle {
  pointer-events: auto;
}

/* YouTube's filter is on the left and its menu is at the far right. */
.provider-spotlight.is-chat-embedded[data-provider="youtube"] .provider-chat-heading {
  right: 40px;
  left: auto;
}

.provider-spotlight .provider-chat-content {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.provider-spotlight .provider-chat-frame {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  background: var(--provider-surface);
}

.provider-spotlight .provider-chat-empty {
  box-sizing: border-box;
  display: flex;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow: auto;
  padding: 24px 20px;
  text-align: center;
}

.provider-spotlight .provider-chat-empty h3 {
  margin: 0;
  color: var(--provider-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.provider-spotlight .provider-chat-empty p {
  max-width: 240px;
  margin: 0;
  color: var(--provider-muted);
  font-size: 12px;
  line-height: 1.55;
}

.provider-spotlight .provider-chat-empty a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--provider-border);
  border-radius: 4px;
  color: var(--provider-text);
  background: var(--provider-hover);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.provider-spotlight .provider-chat-empty a:hover {
  border-color: var(--provider-muted);
}

.provider-spotlight.is-chat-collapsed .provider-feature-layout {
  grid-template-columns: minmax(0, 1fr) 44px;
}

.provider-spotlight.is-chat-collapsed .provider-chat-heading {
  justify-content: center;
  padding: 0;
  border-bottom: 0;
}

.provider-spotlight.is-chat-collapsed .provider-chat-heading > .provider-chat-toggle {
  position: static;
}

.provider-spotlight.is-chat-collapsed .provider-chat-heading > :not(.provider-chat-toggle),
.provider-spotlight.is-chat-collapsed .provider-chat-content {
  display: none;
}

.provider-spotlight .provider-feature-empty {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  min-height: 280px;
  padding: 36px;
  border: 1px solid var(--provider-border);
  border-radius: 6px;
  color: var(--provider-text);
  background: var(--provider-surface);
}

.provider-spotlight .provider-feature-empty :is(h2, h3, p) {
  max-width: 560px;
  margin: 0;
}

.provider-spotlight .provider-feature-empty :is(h2, h3) {
  font-size: 21px;
  line-height: 1.3;
}

.provider-spotlight .provider-feature-empty p {
  color: var(--provider-muted);
  font-size: 14px;
  line-height: 1.6;
}

.provider-spotlight.is-provider-empty .provider-feature-layout {
  grid-template-columns: minmax(0, 1fr);
}

body[data-watch-theme="light"] .provider-spotlight {
  --provider-surface: #fff;
  --provider-border: #dedee3;
  --provider-text: #18181b;
  --provider-muted: #60606a;
  --provider-hover: #ededf0;
}

@media (max-width: 1000px) {
  .provider-spotlight {
    --provider-chat-width: 240px;
  }
}

/* Also stack when an expanded sidebar leaves too little room for the player. */
@container provider-spotlight (max-width: 720px) {
  .provider-spotlight .provider-feature-layout,
  .provider-spotlight.is-chat-collapsed .provider-feature-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .provider-spotlight .provider-feature-footer {
    position: relative;
    inset: auto;
    padding: 14px 14px 6px;
    color: var(--provider-text);
    background: var(--provider-surface);
    border-top: 1px solid var(--provider-border);
  }

  .provider-spotlight .provider-feature-title {
    color: var(--provider-text);
  }

  .provider-spotlight .provider-feature-meta {
    color: var(--provider-muted);
  }

  .provider-spotlight .provider-feature-dots button[aria-current="true"]::before,
  .provider-spotlight .provider-feature-dots button:hover::before {
    background: var(--provider-text);
  }

  .provider-spotlight .provider-feature-chat {
    min-height: 0;
    height: 320px;
    max-height: 320px;
  }

  .provider-spotlight.is-chat-collapsed .provider-feature-chat {
    height: 44px;
  }

  .provider-spotlight.is-chat-collapsed .provider-chat-heading {
    justify-content: flex-end;
    padding: 0 8px;
  }

  .provider-spotlight .provider-feature-fallback {
    padding: 24px;
  }
}

@media (max-width: 760px) {
  .provider-spotlight {
    padding: 12px 12px 20px;
  }

  .provider-spotlight .provider-feature-layout,
  .provider-spotlight.is-chat-collapsed .provider-feature-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .provider-spotlight .provider-feature-footer {
    position: relative;
    inset: auto;
    padding: 14px 14px 6px;
    color: var(--provider-text);
    background: var(--provider-surface);
    border-top: 1px solid var(--provider-border);
  }

  .provider-spotlight .provider-feature-title {
    color: var(--provider-text);
  }

  .provider-spotlight .provider-feature-meta {
    color: var(--provider-muted);
  }

  .provider-spotlight .provider-feature-dots button[aria-current="true"]::before,
  .provider-spotlight .provider-feature-dots button:hover::before {
    background: var(--provider-text);
  }

  .provider-spotlight .provider-feature-chat {
    min-height: 0;
    height: 320px;
    max-height: 320px;
  }

  .provider-spotlight.is-chat-collapsed .provider-feature-chat {
    height: 44px;
  }

  .provider-spotlight.is-chat-collapsed .provider-chat-heading {
    justify-content: flex-end;
    padding: 0 8px;
  }

  .provider-spotlight .provider-feature-controls {
    margin-left: 0;
  }

  .provider-spotlight .provider-feature-arrows button {
    width: 40px;
    height: 40px;
  }

  .provider-spotlight .provider-feature-fallback {
    padding: 24px;
  }

  .provider-spotlight .provider-feature-empty {
    min-height: 230px;
    padding: 24px;
  }
}

@media (max-width: 500px) {
  .provider-spotlight .provider-feature-video {
    min-height: 200px;
  }

  .provider-spotlight[data-provider="twitch"] .provider-feature-video,
  .provider-spotlight .provider-feature-stage[data-platform="twitch"] .provider-feature-video {
    min-height: 300px;
  }

  .provider-spotlight .provider-feature-details {
    gap: 9px;
    flex-wrap: wrap;
  }

  .provider-spotlight .provider-feature-copy {
    flex-basis: calc(100% - 45px);
  }

  .provider-spotlight .provider-feature-name {
    font-size: 15px;
  }

  .provider-spotlight .provider-feature-watch {
    min-height: 36px;
    margin-left: 45px;
  }
}

/* Platform entry: the complete hero and its chat are contained in the feed.
   The gradient controls occupy a real strip below the iframe so provider
   visibility checks and native playback controls are never covered. */
body.provider-browse .provider-spotlight.is-browse-mode {
  --provider-chat-width:clamp(240px,20vw,320px);
  padding:16px 24px 24px;
}
.provider-spotlight.is-browse-mode .provider-feature-layout {
  max-width:1800px;
  gap:16px;
  align-items:stretch;
}
.provider-spotlight.is-browse-mode .provider-feature-stage.feature-slide {
  display:grid;
  grid-template-rows:minmax(300px,1fr) 100px;
  aspect-ratio:16 / 9;
  min-height:400px;
  border-radius:6px;
}
.provider-spotlight.is-browse-mode .provider-feature-video {
  height:100%;
  min-height:300px;
  aspect-ratio:auto;
}
.provider-spotlight.is-browse-mode .provider-feature-footer {
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:0;
  padding:10px 16px 6px;
  border:0;
  background:#0c1214;
  isolation:isolate;
}
.provider-spotlight.is-browse-mode .provider-entry-art {
  display:block;
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center bottom;
  opacity:.35;
  filter:blur(12px);
  transform:scale(1.08);
  pointer-events:none;
}
.provider-spotlight.is-browse-mode .provider-feature-footer::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,#080d10ed,#0c1616c9 70%,#101719dc);
  pointer-events:none;
}
.provider-spotlight.is-browse-mode .provider-feature-details {
  flex:1 1 auto;
  flex-wrap:nowrap;
  gap:12px;
}
.provider-spotlight.is-browse-mode .provider-feature-copy {flex:1 1 auto;min-width:0}
.provider-spotlight.is-browse-mode .provider-feature-name {color:#fff;font-size:16px}
.provider-spotlight.is-browse-mode .provider-feature-title {color:#efeff1}
.provider-spotlight.is-browse-mode .provider-feature-meta {color:#c8c8d0}
.provider-spotlight.is-browse-mode .provider-entry-watch {
  margin:0;
  min-width:100px;
  height:36px;
  min-height:36px;
  padding:6px 12px;
  font-size:14px;
  font-weight:600;
  line-height:20px;
  border-radius:4px;
}
.provider-spotlight.is-browse-mode .provider-feature-controls {flex:0 0 28px;min-height:28px;margin-top:2px}
.provider-spotlight.is-browse-mode .provider-feature-dots button[aria-current="true"]::before,
.provider-spotlight.is-browse-mode .provider-feature-dots button:hover::before {background:#fff}
.provider-spotlight.is-browse-mode .provider-feature-chat {
  position:relative;
  inset:auto;
  width:auto;
  height:auto;
  min-height:0;
  max-height:none;
  align-self:stretch;
}
.provider-spotlight.is-browse-mode.is-chat-collapsed .provider-feature-chat {height:44px;align-self:start}

@container provider-spotlight (max-width:720px) {
  .provider-spotlight.is-browse-mode .provider-feature-chat {height:320px;max-height:320px}
  .provider-spotlight.is-browse-mode.is-chat-collapsed .provider-feature-chat {height:44px}
}
@media(max-width:760px) {
  body.provider-browse .provider-spotlight.is-browse-mode {padding:12px 12px 20px}
  .provider-spotlight.is-browse-mode .provider-feature-chat {height:320px;max-height:320px}
  .provider-spotlight.is-browse-mode.is-chat-collapsed .provider-feature-chat {height:44px}
  .provider-spotlight.is-browse-mode .provider-feature-footer {padding-inline:12px}
  .provider-spotlight.is-browse-mode .provider-feature-controls {margin-left:0}
  .provider-spotlight.is-browse-mode .provider-feature-arrows button {width:28px;height:28px;padding:5px}
}
@media(max-width:500px) {
  .provider-spotlight.is-browse-mode:not([data-provider="twitch"]) .provider-feature-stage.feature-slide {grid-template-rows:minmax(200px,1fr) 100px;min-height:300px}
  .provider-spotlight.is-browse-mode:not([data-provider="twitch"]) .provider-feature-video {min-height:200px}
}

/* Desktop platform entry: full 16:9 player, with a persistent blurred
   information bar in its own row below the video. */
@media (min-width:1001px) {
  body.provider-browse:not(.watch-channel-active) {
    --sidebar:clamp(170px,13.3vw,260px);
  }
  body.provider-browse.sidebar-collapsed:not(.sidebar-open):not(.watch-channel-active) {
    --sidebar:clamp(40px,3.125vw,60px);
  }
  body.provider-browse:not(.watch-channel-active) #creator-sidebar {
    width:var(--sidebar);
  }
  body.provider-browse:not(.sidebar-collapsed):not(.watch-channel-active) #sidebar-toggle,
  body.provider-browse.sidebar-open:not(.watch-channel-active) #sidebar-toggle {
    left:calc(var(--sidebar) - 38px);
  }
  body.provider-browse:not(.watch-channel-active) #main {
    padding-top:var(--header,50px);
    padding-left:0;
    padding-right:0;
  }
  body.provider-browse:not(.watch-channel-active) #main > .content-section {
    margin-left:28px;
    margin-right:28px;
  }
  body.provider-browse:not(.watch-channel-active) .provider-spotlight.is-browse-mode {
    --provider-chat-width:clamp(240px,20.15625vw,320px);
    padding:0 28px 20px;
  }
  body.provider-browse:not(.watch-channel-active) .provider-feature-layout {
    gap:8px;
  }
  body.provider-browse:not(.watch-channel-active) .provider-feature-stage.feature-slide {
    display:block;
    min-height:300px;
    aspect-ratio:auto;
    border:0;
    border-radius:6px;
  }
  body.provider-browse:not(.watch-channel-active) .provider-feature-video {
    height:auto;
    aspect-ratio:16 / 9;
  }
  body.provider-browse:not(.watch-channel-active) .provider-feature-footer {
    position:relative;
    inset:auto;
    min-height:100px;
    height:auto;
    margin:0;
    padding:12px 16px 6px;
    border:0;
    border-radius:0;
    overflow:hidden;
    background:rgb(8 12 15 / 75%);
    backdrop-filter:blur(12px);
    opacity:1;
    pointer-events:auto;
    transition:none;
  }
  body.provider-browse:not(.watch-channel-active) .provider-entry-art {
    display:block;
    opacity:.45;
    filter:blur(12px);
    transform:scale(1.08);
  }
  body.provider-browse:not(.watch-channel-active) .provider-feature-footer::before {
    background:linear-gradient(90deg,rgb(8 13 16 / 85%),rgb(12 22 22 / 55%) 70%,rgb(16 23 25 / 75%));
  }
  body.provider-browse:not(.watch-channel-active) .provider-feature-controls {
    margin-left:46px;
    margin-top:0;
  }

}
@media (min-width:1001px) and (prefers-reduced-motion:reduce) {
  body.provider-browse:not(.watch-channel-active) .provider-feature-footer {transition:none}
}

@media(min-width:1001px){body.provider-browse:not(.watch-channel-active) #games{margin-top:0}}

/* The chat control moves with the panel: a glass header while open and a
   compact restore button on the same video when closed. */
@media(min-width:761px) {
  .provider-spotlight .provider-feature-layout {position:relative}
  .provider-spotlight.is-chat-collapsed .provider-feature-layout {
    grid-template-columns:minmax(0,1fr) 0px;
    gap:0;
  }
  .provider-spotlight.is-chat-collapsed .provider-feature-chat {display:none}
  body.provider-view:not(.watch-channel-active) .provider-spotlight.is-chat-collapsed .provider-feature-video {
    width:100%;
  }
  .provider-spotlight .provider-chat-heading,
  .provider-spotlight.is-chat-embedded .provider-chat-heading,
  .provider-spotlight.is-chat-embedded[data-provider="youtube"] .provider-chat-heading {
    position:absolute;
    z-index:4;
    inset:0 0 auto;
    display:block;
    width:100%;
    height:80px;
    padding:16px;
    border:0;
    background:linear-gradient(180deg,#0b0b0c 0px,#0b0b0c 64px,transparent 80px);
    pointer-events:none;
  }
  .provider-spotlight .provider-chat-heading > h2 {display:none}
  .provider-spotlight .provider-chat-toggle {
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    border:0;
    color:#fff;
    background:rgb(11 11 12 / 64%);
    backdrop-filter:blur(8px);
    box-shadow:inset 4px 4px 14px -2px rgb(255 255 255 / 12%),inset -4px -4px 14px -2px rgb(0 0 0 / 40%),0 12px 36px -8px rgb(0 0 0 / 55%),inset 0 0 0 1px rgb(255 255 255 / 5%);
    pointer-events:auto;
    cursor:pointer;
  }
  .provider-spotlight .provider-chat-heading > .provider-chat-toggle {
    position:relative;
    inset:auto;
    width:100%;
    height:48px;
    padding:0 12px;
    border-radius:8px;
    font-size:18px;
    font-weight:600;
  }
  .provider-spotlight .provider-chat-toggle:hover {background:rgb(34 34 36 / 84%)}
  .provider-spotlight .provider-chat-toggle svg {width:20px;height:20px;flex:0 0 20px}
  .provider-spotlight .provider-chat-heading .provider-chat-toggle-label {display:block}
  .provider-spotlight .provider-feature-video > .provider-chat-toggle,
  .provider-spotlight .provider-channel-banner > .provider-chat-toggle {
    position:absolute;
    z-index:4;
    inset:64px 16px auto auto;
    justify-content:center;
    width:36px;
    height:36px;
    padding:8px;
    border-radius:4px;
  }
  .provider-spotlight .provider-feature-video > .provider-chat-toggle .provider-chat-toggle-label,
  .provider-spotlight .provider-channel-banner > .provider-chat-toggle .provider-chat-toggle-label {display:none}
}

@media(min-width:1001px) {
  body.provider-browse:not(.watch-channel-active) .provider-feature-layout {
    transition:grid-template-columns .22s ease,gap .22s ease;
  }
  body.provider-browse:not(.watch-channel-active) .provider-spotlight.is-chat-collapsed .provider-feature-layout {gap:0}
}
@media(prefers-reduced-motion:reduce) {
  body.provider-browse:not(.watch-channel-active) .provider-feature-layout {transition:none}
}

/* Individual streams share the glass information strip, without the browse controls. */
.provider-spotlight.is-channel-mode .provider-feature-controls{display:none}
@media(min-width:761px){
  .provider-spotlight.is-channel-mode .provider-feature-footer{
    isolation:isolate;
    overflow:hidden;
    background:rgb(8 12 15 / 60%);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
  }
  .provider-spotlight.is-channel-mode .provider-entry-art{
    display:block;
    position:absolute;
    inset:0;
    z-index:-2;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center bottom;
    opacity:.55;
    filter:blur(12px);
    transform:scale(1.08);
    pointer-events:none;
  }
  .provider-spotlight.is-channel-mode .provider-feature-footer::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(90deg,rgb(8 13 16 / 65%),rgb(12 22 22 / 25%) 70%,rgb(16 23 25 / 50%));
    pointer-events:none;
  }
}