/* ========================================================================== 
   Space Gate NOVA+ — Reference Live Screen Clone
   Mirrors the supplied Windows/Android composition while preserving the
   existing playback, access, session and channel logic.
   ========================================================================== */
:root {
    --sg-ref-bg: #000000;
    --sg-ref-surface: #07070a;
    --sg-ref-surface-2: #0b0b0f;
    --sg-ref-border: rgba(255,255,255,.13);
    --sg-ref-border-soft: rgba(255,255,255,.085);
    --sg-ref-text: #f7f7fa;
    --sg-ref-muted: #aaaab4;
    --sg-ref-purple: #8b15ff;
    --sg-ref-purple-2: #b100ff;
    --sg-ref-blue: #00a8ff;
    --sg-ref-red: #ff2a2f;
    --sg-ref-shell-width: 1180px;
    --sg-ref-radius: 26px;
    --sg-ref-font: 'IBM Plex Sans Arabic','Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

html {
    background: #000 !important;
}

body.sg-nova-live.sg-reference-live {
    margin: 0 !important;
    min-height: 100vh !important;
    padding: 34px 0 46px !important;
    overflow-x: hidden !important;
    background:
        radial-gradient(circle at 54% 7%, rgba(58,0,112,.14), transparent 35%),
        #000 !important;
    color: var(--sg-ref-text) !important;
    font-family: var(--sg-ref-font) !important;
}

body.sg-reference-live * {
    scrollbar-color: rgba(139,21,255,.55) transparent;
}

/* --------------------------------------------------------------------------
   Desktop application frame / mobile application header
   -------------------------------------------------------------------------- */
body.sg-reference-live .bein-header,
body.sg-reference-live .sh-navbar {
    position: relative !important;
    inset: auto !important;
    z-index: 1000 !important;
    width: calc(100% - 40px) !important;
    max-width: var(--sg-ref-shell-width) !important;
    height: 68px !important;
    min-height: 68px !important;
    margin: 0 auto !important;
    border: 2px solid rgba(255,255,255,.18) !important;
    border-bottom-width: 1px !important;
    border-radius: var(--sg-ref-radius) var(--sg-ref-radius) 0 0 !important;
    background: rgba(2,2,4,.98) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

body.sg-reference-live .bein-header-inner {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 28px !important;
    display: flex !important;
    align-items: center !important;
    direction: ltr !important;
    gap: 16px !important;
}

body.sg-reference-live .connect-logo,
body.sg-reference-live .sh-brand {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 11px !important;
    color: #fff !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

body.sg-reference-live .connect-logo img,
body.sg-reference-live .sh-brand img {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 0 12px rgba(139,21,255,.30)) !important;
}

body.sg-reference-live .sg-reference-brand-copy {
    display: grid !important;
    gap: 2px !important;
    text-align: left !important;
    letter-spacing: .2px !important;
}
body.sg-reference-live .sg-reference-brand-copy strong {
    color: #fff !important;
    font: 800 13px/1.05 'Inter',sans-serif !important;
}
body.sg-reference-live .sg-reference-brand-copy em {
    color: #9b44ff !important;
    font: 800 16px/1.05 'Inter',sans-serif !important;
    font-style: normal !important;
}

body.sg-reference-live .top-nav,
body.sg-reference-live .sh-nav-links,
body.sg-reference-live .header-actions,
body.sg-reference-live .sh-actions {
    display: none !important;
}

body.sg-reference-live .sg-reference-window-controls {
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 24px !important;
    color: rgba(255,255,255,.82) !important;
    direction: ltr !important;
}
body.sg-reference-live .sg-reference-window-controls span {
    width: 18px !important;
    height: 18px !important;
    display: grid !important;
    place-items: center !important;
    font: 400 20px/1 'Inter',sans-serif !important;
}
body.sg-reference-live .sg-reference-window-controls .sg-window-box {
    font-size: 17px !important;
    transform: translateY(-1px) !important;
}

body.sg-reference-live .sg-reference-mobile-actions {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Main application body
   -------------------------------------------------------------------------- */
body.sg-reference-live .bein-page {
    position: relative !important;
    width: calc(100% - 40px) !important;
    max-width: var(--sg-ref-shell-width) !important;
    min-height: 760px !important;
    margin: 0 auto !important;
    padding: 0 28px 18px !important;
    border: 2px solid rgba(255,255,255,.18) !important;
    border-top: 0 !important;
    border-radius: 0 0 var(--sg-ref-radius) var(--sg-ref-radius) !important;
    background: #000 !important;
    overflow: hidden !important;
}

body.sg-reference-live .bein-layout,
body.sg-reference-live .player-column {
    width: 100% !important;
    display: block !important;
}

body.sg-reference-live .player-hero-shell,
body.sg-reference-live .sh-live-hero {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
    overflow: visible !important;
    background: #000 !important;
}
body.sg-reference-live .player-hero-shell::before,
body.sg-reference-live .sh-live-hero::before {
    content: none !important;
    display: none !important;
}

body.sg-reference-live .sg-reference-player-actions {
    height: 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    direction: ltr !important;
}
body.sg-reference-live .sg-reference-action-group {
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
}
body.sg-reference-live .sg-reference-icon-btn {
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #fff !important;
    transition: background .18s ease, color .18s ease, transform .18s ease !important;
}
body.sg-reference-live .sg-reference-icon-btn:hover,
body.sg-reference-live .sg-reference-icon-btn:focus-visible {
    background: rgba(255,255,255,.09) !important;
    transform: translateY(-1px) !important;
}
body.sg-reference-live .sg-reference-icon-btn .material-icons {
    font-size: 28px !important;
}
body.sg-reference-live .sg-reference-icon-btn.is-favorite {
    color: #c32cff !important;
}

/* Direct live video occupies the supplied hero/background/information area. */
body.sg-reference-live .player-container {
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 320px !important;
    height: clamp(280px, 27vw, 350px) !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 2px !important;
    background:
        radial-gradient(circle at 72% 28%, rgba(100,0,190,.24), transparent 31%),
        #000 !important;
    box-shadow: none !important;
}
body.sg-reference-live .player-shell {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    background: #000 !important;
}
body.sg-reference-live .player-shell video,
body.sg-reference-live .player-shell .sg-plyr-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    background: #000 !important;
    filter: none !important;
}

body.sg-reference-live .player-shell::before,
body.sg-reference-live .player-shell::after {
    content: none !important;
    display: none !important;
}
body.sg-reference-live .big-play,
body.sg-reference-live .now-playing,
body.sg-reference-live .sg-player-watermark,
body.sg-reference-live .top-layer,
body.sg-reference-live .player-status-line {
    display: none !important;
}

body.sg-reference-live .player-loading {
    z-index: 30 !important;
    background: rgba(0,0,0,.72) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    backdrop-filter: blur(5px) !important;
}
body.sg-reference-live .spinner {
    border-color: rgba(255,255,255,.22) !important;
    border-top-color: var(--sg-ref-purple) !important;
}

body.sg-reference-live .player-controls {
    z-index: 40 !important;
    padding: 48px 18px 13px !important;
    background: linear-gradient(to top, rgba(0,0,0,.94), rgba(0,0,0,.20) 64%, transparent) !important;
    direction: ltr !important;
}
body.sg-reference-live .progress {
    accent-color: var(--sg-ref-purple) !important;
    box-shadow: none !important;
}
body.sg-reference-live .progress::-webkit-slider-runnable-track {
    background: linear-gradient(90deg,var(--sg-ref-purple-2),var(--sg-ref-blue)) !important;
}
body.sg-reference-live .progress::-webkit-slider-thumb {
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(139,21,255,.30) !important;
}
body.sg-reference-live .control-btn,
body.sg-reference-live .quality-select,
body.sg-reference-live .network-mode-select {
    border-color: rgba(255,255,255,.16) !important;
    background: rgba(0,0,0,.45) !important;
}

/* --------------------------------------------------------------------------
   Live details card directly under the player
   -------------------------------------------------------------------------- */
body.sg-reference-live .sg-reference-live-details {
    width: 100% !important;
    margin: 16px 0 10px !important;
    direction: rtl !important;
}
body.sg-reference-live .sg-reference-section-label {
    position: relative !important;
    margin: 0 0 10px !important;
    padding-right: 12px !important;
    color: #fff !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
    text-align: right !important;
}
body.sg-reference-live .sg-reference-section-label::before {
    content: '' !important;
    position: absolute !important;
    top: 2px !important;
    right: 0 !important;
    width: 3px !important;
    height: 18px !important;
    border-radius: 3px !important;
    background: linear-gradient(180deg,var(--sg-ref-purple-2),var(--sg-ref-blue)) !important;
}
body.sg-reference-live .sg-reference-server-card {
    min-height: 64px !important;
    display: grid !important;
    grid-template-columns: 48px 1fr auto !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 9px 14px !important;
    border: 1px solid rgba(139,21,255,.38) !important;
    border-radius: 10px !important;
    background:
        radial-gradient(circle at 90% 20%, rgba(139,21,255,.14), transparent 42%),
        #08080b !important;
    color: #fff !important;
    box-shadow: inset 0 0 24px rgba(139,21,255,.045) !important;
}
body.sg-reference-live .sg-reference-server-play {
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: linear-gradient(135deg,var(--sg-ref-purple-2),#6c18ff) !important;
    color: #fff !important;
    box-shadow: 0 0 18px rgba(139,21,255,.30) !important;
}
body.sg-reference-live .sg-reference-server-play .material-icons {
    font-size: 24px !important;
}
body.sg-reference-live .sg-reference-server-copy {
    min-width: 0 !important;
    display: grid !important;
    gap: 2px !important;
    text-align: right !important;
}
body.sg-reference-live .sg-reference-server-copy strong {
    overflow: hidden !important;
    color: #fff !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}
body.sg-reference-live .sg-reference-server-copy small {
    overflow: hidden !important;
    color: var(--sg-ref-muted) !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}
body.sg-reference-live .sg-reference-server-tag {
    min-width: 58px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 7px !important;
    background: rgba(255,255,255,.025) !important;
    color: #cfcfd6 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   Related channels list
   -------------------------------------------------------------------------- */
body.sg-reference-live .guide-panel,
body.sg-reference-live .sh-section {
    position: relative !important;
    width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 0 2px !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
body.sg-reference-live .sh-section-header {
    margin: 0 0 10px !important;
    min-height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
body.sg-reference-live .sh-section-title {
    position: relative !important;
    margin: 0 !important;
    padding-right: 12px !important;
    color: #fff !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
}
body.sg-reference-live .sh-section-title::before {
    content: '' !important;
    position: absolute !important;
    top: 2px !important;
    right: 0 !important;
    width: 3px !important;
    height: 18px !important;
    border-radius: 3px !important;
    background: linear-gradient(180deg,var(--sg-ref-purple-2),var(--sg-ref-blue)) !important;
}
body.sg-reference-live .guide-tools,
body.sg-reference-live .channel-layout-actions,
body.sg-reference-live .sg-carousel-arrow,
body.sg-reference-live .sh-see-all,
body.sg-reference-live .sg-public-live-notice {
    display: none !important;
}

body.sg-reference-live .sg-carousel-wrap {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
}
body.sg-reference-live .schedule-list,
body.sg-reference-live .sh-carousel,
body.sg-reference-live #channelsCarouselWrap .schedule-list,
body.sg-reference-live #channelsCarouselWrap.is-vertical .schedule-list {
    width: 100% !important;
    max-height: 312px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    direction: ltr !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    grid-auto-rows: 96px !important;
    gap: 10px 12px !important;
    overflow: hidden !important;
    scroll-snap-type: none !important;
    transition: max-height .28s ease !important;
}
body.sg-reference-live #channelsCarouselWrap.is-expanded .schedule-list {
    max-height: 2400px !important;
}

body.sg-reference-live .channel-card,
body.sg-reference-live #channelsCarouselWrap:not(.is-vertical) .channel-card,
body.sg-reference-live #channelsCarouselWrap.is-vertical .channel-card {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
    margin: 0 !important;
    padding: 8px !important;
    display: grid !important;
    grid-template-columns: 78px minmax(0,1fr) !important;
    grid-template-rows: 1fr !important;
    align-items: stretch !important;
    gap: 12px !important;
    overflow: hidden !important;
    border: 1px solid var(--sg-ref-border-soft) !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg,#08080a,#050506) !important;
    color: #fff !important;
    text-align: left !important;
    direction: ltr !important;
    transform: none !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.018) !important;
    transition: border-color .18s ease, background .18s ease, transform .18s ease !important;
}
body.sg-reference-live .channel-card:hover {
    z-index: auto !important;
    border-color: rgba(139,21,255,.42) !important;
    background: linear-gradient(180deg,#0d0b12,#07070a) !important;
    transform: translateY(-1px) !important;
}
body.sg-reference-live .channel-card.active-channel {
    border-color: rgba(139,21,255,.72) !important;
    background: linear-gradient(90deg,rgba(139,21,255,.10),#07070a 46%) !important;
    box-shadow: inset 3px 0 0 var(--sg-ref-purple),0 0 0 1px rgba(139,21,255,.08) !important;
}
body.sg-reference-live .channel-card.is-locked {
    opacity: .86 !important;
}

body.sg-reference-live .channel-logo,
body.sg-reference-live .sh-card-thumb {
    position: relative !important;
    width: 78px !important;
    height: 78px !important;
    min-width: 78px !important;
    min-height: 78px !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border: 1px solid rgba(153,67,255,.42) !important;
    border-radius: 7px !important;
    background:
        radial-gradient(circle at 50% 110%,rgba(118,0,255,.44),transparent 55%),
        linear-gradient(150deg,#1d0b34,#08020e) !important;
    box-shadow: inset 0 0 18px rgba(139,21,255,.20) !important;
}
body.sg-reference-live .channel-logo::after,
body.sg-reference-live .channel-logo::before {
    content: none !important;
    display: none !important;
}
body.sg-reference-live .channel-logo img {
    width: 88% !important;
    height: 88% !important;
    max-width: 88% !important;
    max-height: 88% !important;
    object-fit: contain !important;
    padding: 0 !important;
    filter: drop-shadow(0 7px 10px rgba(0,0,0,.42)) !important;
}
body.sg-reference-live .bein-badge {
    width: 88% !important;
    height: 88% !important;
    border-radius: 5px !important;
}
body.sg-reference-live .channel-access-badge {
    display: none !important;
}

body.sg-reference-live .channel-copy {
    position: relative !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 3px 64px 9px 0 !important;
    display: grid !important;
    grid-template-rows: auto auto auto 1fr !important;
    align-content: start !important;
    gap: 2px !important;
    direction: ltr !important;
    text-align: left !important;
}
body.sg-reference-live .channel-headline {
    min-width: 0 !important;
    display: block !important;
}
body.sg-reference-live .channel-title {
    max-width: calc(100% - 4px) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    overflow: hidden !important;
    color: #f9f9fb !important;
    font: 800 14px/1.25 'Inter',var(--sg-ref-font) !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    vertical-align: top !important;
}
body.sg-reference-live .channel-title::after {
    content: 'LIVE' !important;
    flex: 0 0 auto !important;
    height: 16px !important;
    padding: 0 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 3px !important;
    background: #6c08ed !important;
    color: #fff !important;
    font: 800 8px/1 'Inter',sans-serif !important;
}
body.sg-reference-live .channel-time,
body.sg-reference-live .recommended-line {
    overflow: hidden !important;
    color: #babac1 !important;
    font-size: 10px !important;
    line-height: 1.28 !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}
body.sg-reference-live .recommended-line b {
    color: #d7d7dd !important;
    font-weight: 600 !important;
}
body.sg-reference-live .channel-ref-number {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 4 !important;
    color: #f1f1f4 !important;
    font: 500 12px/1 'Inter',sans-serif !important;
    direction: ltr !important;
}
body.sg-reference-live .favorite-star {
    position: absolute !important;
    right: 11px !important;
    bottom: 11px !important;
    z-index: 5 !important;
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #b8b8c0 !important;
    font-size: 25px !important;
    line-height: 1 !important;
}
body.sg-reference-live .favorite-star.is-fav {
    color: #b52cff !important;
    background: transparent !important;
}
body.sg-reference-live .quality-row {
    position: absolute !important;
    left: 0 !important;
    right: 54px !important;
    bottom: 4px !important;
    height: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: 99px !important;
    background: rgba(255,255,255,.09) !important;
}
body.sg-reference-live .qbtn {
    width: 72% !important;
    height: 3px !important;
    min-height: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 99px !important;
    background: linear-gradient(90deg,#d400ff 0%,#8d20ff 42%,#00a9ff 100%) !important;
    color: transparent !important;
    font-size: 0 !important;
}
body.sg-reference-live .qbtn > * {
    display: none !important;
}

body.sg-reference-live .sg-reference-show-more {
    min-width: 158px !important;
    height: 42px !important;
    margin: 12px auto 0 !important;
    padding: 0 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 8px !important;
    background: #08080a !important;
    color: #d4d4da !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}
body.sg-reference-live .sg-reference-show-more:hover {
    border-color: rgba(139,21,255,.50) !important;
    color: #fff !important;
}
body.sg-reference-live .sg-reference-show-more .material-icons {
    font-size: 19px !important;
    transition: transform .22s ease !important;
}
body.sg-reference-live #channelsCarouselWrap.is-expanded + .sg-reference-show-more .material-icons {
    transform: rotate(180deg) !important;
}

body.sg-reference-live .empty-filter-state,
body.sg-reference-live .empty-state {
    margin: 18px 0 !important;
}
body.sg-reference-live .bottom-nav,
body.sg-reference-live .sg-app-bottom-nav {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Mobile — matches the supplied Android page rather than the outer phone frame
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
    body.sg-nova-live.sg-reference-live {
        padding: 0 0 20px !important;
        background: #000 !important;
    }

    body.sg-reference-live .bein-header,
    body.sg-reference-live .sh-navbar {
        position: sticky !important;
        top: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: 62px !important;
        min-height: 62px !important;
        margin: 0 !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,.06) !important;
        border-radius: 0 !important;
        background: rgba(0,0,0,.96) !important;
    }
    body.sg-reference-live .bein-header-inner {
        padding: 0 13px !important;
        gap: 8px !important;
    }
    body.sg-reference-live .connect-logo,
    body.sg-reference-live .sh-brand {
        gap: 9px !important;
    }
    body.sg-reference-live .connect-logo img,
    body.sg-reference-live .sh-brand img {
        width: 37px !important;
        height: 37px !important;
        flex-basis: 37px !important;
    }
    body.sg-reference-live .sg-reference-brand-copy strong {
        font-size: 11px !important;
    }
    body.sg-reference-live .sg-reference-brand-copy em {
        font-size: 15px !important;
    }
    body.sg-reference-live .sg-reference-window-controls {
        display: none !important;
    }
    body.sg-reference-live .sg-reference-mobile-actions {
        margin-left: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        direction: ltr !important;
    }
    body.sg-reference-live .sg-reference-mobile-actions .sg-reference-icon-btn {
        width: 36px !important;
        height: 36px !important;
    }
    body.sg-reference-live .sg-reference-mobile-actions .material-icons {
        font-size: 25px !important;
    }

    body.sg-reference-live .bein-page {
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 12px 12px !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }
    body.sg-reference-live .sg-reference-player-actions {
        display: none !important;
    }

    body.sg-reference-live .player-container {
        width: calc(100% + 24px) !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 -12px !important;
        aspect-ratio: 16 / 9 !important;
        border-radius: 0 !important;
    }
    body.sg-reference-live .player-shell {
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 16 / 9 !important;
    }
    body.sg-reference-live .player-controls {
        padding: 34px 9px 8px !important;
    }
    body.sg-reference-live .control-btn.icon-control {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
    }
    body.sg-reference-live .volume-range,
    body.sg-reference-live #pipBtn,
    body.sg-reference-live .time-label {
        display: none !important;
    }

    body.sg-reference-live .sg-reference-live-details {
        margin: 12px 0 11px !important;
    }
    body.sg-reference-live .sg-reference-section-label,
    body.sg-reference-live .sh-section-title {
        margin-bottom: 9px !important;
        font-size: 13px !important;
    }
    body.sg-reference-live .sg-reference-server-card {
        min-height: 58px !important;
        grid-template-columns: 42px minmax(0,1fr) auto !important;
        gap: 9px !important;
        padding: 8px 10px !important;
    }
    body.sg-reference-live .sg-reference-server-play {
        width: 34px !important;
        height: 34px !important;
    }
    body.sg-reference-live .sg-reference-server-copy strong {
        font-size: 12px !important;
    }
    body.sg-reference-live .sg-reference-server-copy small {
        font-size: 10px !important;
    }
    body.sg-reference-live .sg-reference-server-tag {
        min-width: 50px !important;
        height: 28px !important;
        padding: 0 8px !important;
        font-size: 10px !important;
    }

    body.sg-reference-live .schedule-list,
    body.sg-reference-live .sh-carousel,
    body.sg-reference-live #channelsCarouselWrap .schedule-list,
    body.sg-reference-live #channelsCarouselWrap.is-vertical .schedule-list {
        max-height: 342px !important;
        grid-template-columns: 1fr !important;
        grid-auto-rows: 62px !important;
        gap: 5px !important;
    }
    body.sg-reference-live #channelsCarouselWrap.is-expanded .schedule-list {
        max-height: 4000px !important;
    }
    body.sg-reference-live .channel-card,
    body.sg-reference-live #channelsCarouselWrap:not(.is-vertical) .channel-card,
    body.sg-reference-live #channelsCarouselWrap.is-vertical .channel-card {
        height: 62px !important;
        min-height: 62px !important;
        max-height: 62px !important;
        padding: 5px !important;
        grid-template-columns: 52px minmax(0,1fr) !important;
        gap: 8px !important;
        border-radius: 8px !important;
    }
    body.sg-reference-live .channel-logo,
    body.sg-reference-live .sh-card-thumb {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        border-radius: 5px !important;
    }
    body.sg-reference-live .channel-copy {
        padding: 1px 48px 7px 0 !important;
        gap: 0 !important;
    }
    body.sg-reference-live .channel-title {
        font-size: 11px !important;
        gap: 5px !important;
    }
    body.sg-reference-live .channel-title::after {
        height: 13px !important;
        padding: 0 4px !important;
        font-size: 6px !important;
    }
    body.sg-reference-live .channel-time,
    body.sg-reference-live .recommended-line {
        font-size: 8px !important;
        line-height: 1.2 !important;
    }
    body.sg-reference-live .channel-ref-number {
        top: 10px !important;
        right: 9px !important;
        font-size: 9px !important;
    }
    body.sg-reference-live .favorite-star {
        right: 5px !important;
        bottom: 5px !important;
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        font-size: 21px !important;
    }
    body.sg-reference-live .quality-row {
        right: 39px !important;
        bottom: 3px !important;
        height: 2px !important;
    }
    body.sg-reference-live .qbtn {
        height: 2px !important;
        min-height: 2px !important;
    }
    body.sg-reference-live .sg-reference-show-more {
        min-width: 136px !important;
        height: 36px !important;
        margin-top: 8px !important;
        font-size: 10px !important;
    }

    body.sg-reference-live .player-container.is-mini {
        right: 9px !important;
        bottom: 10px !important;
        width: min(64vw,280px) !important;
        height: auto !important;
        margin: 0 !important;
        aspect-ratio: 16/9 !important;
        border: 1px solid rgba(139,21,255,.42) !important;
        border-radius: 10px !important;
    }
}

@media (max-width: 390px) {
    body.sg-reference-live .bein-page {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }
    body.sg-reference-live .player-container {
        width: calc(100% + 20px) !important;
        margin-right: -10px !important;
        margin-left: -10px !important;
    }
    body.sg-reference-live .sg-reference-server-tag {
        display: none !important;
    }
    body.sg-reference-live .sg-reference-server-card {
        grid-template-columns: 40px minmax(0,1fr) !important;
    }
}

/* Preserve the existing filtering logic even though this skin uses !important
   layout declarations. JavaScript currently toggles inline display values. */
body.sg-reference-live .channel-card[style*="display: none"],
body.sg-reference-live .qbtn[style*="display: none"],
body.sg-reference-live .sg-reference-show-more[hidden] {
    display: none !important;
}

/* ========================================================================== 
   Space Gate NOVA+ — Responsive fidelity pass 2026-07-12
   These rules intentionally load last and override all legacy live-page skins.
   ========================================================================== */
:root {
    --sg-ref-shell-width: 1180px;
    --sg-ref-shell-pad: clamp(18px, 2.1vw, 30px);
    --sg-ref-player-ratio: 3.03 / 1;
    --sg-ref-card-h: 102px;
    --sg-ref-card-logo: 84px;
}

html, body.sg-nova-live.sg-reference-live {
    background: #000 !important;
    color-scheme: dark !important;
}

body.sg-nova-live.sg-reference-live {
    padding: clamp(18px, 3.1vh, 34px) 0 48px !important;
    background:
        radial-gradient(ellipse at 50% -5%, rgba(75, 0, 145, .12), transparent 34%),
        #000 !important;
}

body.sg-reference-live .bein-header,
body.sg-reference-live .sh-navbar,
body.sg-reference-live .bein-page {
    width: min(calc(100% - 40px), var(--sg-ref-shell-width)) !important;
}

body.sg-reference-live .bein-header,
body.sg-reference-live .sh-navbar {
    height: 68px !important;
    min-height: 68px !important;
    border-color: rgba(255,255,255,.20) !important;
    background: #030305 !important;
}

body.sg-reference-live .bein-header-inner {
    padding-inline: var(--sg-ref-shell-pad) !important;
}

body.sg-reference-live .bein-page {
    padding: 0 var(--sg-ref-shell-pad) 18px !important;
    border-color: rgba(255,255,255,.20) !important;
    background: #000 !important;
}

body.sg-reference-live .sg-reference-player-actions {
    height: 58px !important;
    min-height: 58px !important;
}

body.sg-reference-live .player-container {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: var(--sg-ref-player-ratio) !important;
    min-height: 330px !important;
    max-height: 404px !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background: #000 !important;
    isolation: isolate !important;
}

body.sg-reference-live .player-shell,
body.sg-reference-live .player-shell video,
body.sg-reference-live .player-shell .sg-plyr-video {
    width: 100% !important;
    height: 100% !important;
}

body.sg-reference-live .player-shell video,
body.sg-reference-live .player-shell .sg-plyr-video {
    object-fit: cover !important;
    object-position: 50% 50% !important;
    background: #000 !important;
}

/* Keep the live video cinematic while making controls legible over any feed. */
body.sg-reference-live .player-shell::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    background: linear-gradient(180deg, rgba(0,0,0,.20), transparent 20%, transparent 58%, rgba(0,0,0,.82)) !important;
    transition: opacity .22s ease !important;
}
body.sg-reference-live .player-shell.controls-hidden::before,
body.sg-reference-live .player-shell.has-started:not(.controls-visible):not(:hover)::before {
    opacity: .18 !important;
}

body.sg-reference-live .player-controls {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 54px 18px 14px !important;
    background: linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,.35) 58%, transparent) !important;
}
body.sg-reference-live .progress {
    height: 4px !important;
    margin-bottom: 12px !important;
}
body.sg-reference-live .controls-row {
    min-height: 36px !important;
}
body.sg-reference-live .control-btn,
body.sg-reference-live .quality-select {
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 8px !important;
    background: rgba(0,0,0,.52) !important;
    border-color: rgba(255,255,255,.22) !important;
}
body.sg-reference-live .quality-select {
    min-width: 76px !important;
}

/* In the reference, details are a compact card aligned to the right. */
body.sg-reference-live .sg-reference-live-details {
    width: min(440px, 46%) !important;
    margin: 14px 0 10px auto !important;
}
body.sg-reference-live .sg-reference-server-card {
    min-height: 68px !important;
    grid-template-columns: 44px minmax(0,1fr) auto !important;
    padding: 10px 13px !important;
    border-color: rgba(133, 27, 255, .48) !important;
    background:
        radial-gradient(circle at 92% 20%, rgba(135,20,255,.17), transparent 44%),
        linear-gradient(180deg,#0b0910,#050507) !important;
}
body.sg-reference-live .sg-reference-server-copy strong,
body.sg-reference-live .sg-reference-server-copy small {
    color: #fff !important;
    opacity: 1 !important;
}
body.sg-reference-live .sg-reference-server-copy small {
    color: #aaaab5 !important;
}

body.sg-reference-live .guide-panel,
body.sg-reference-live .sh-section {
    padding-top: 0 !important;
}
body.sg-reference-live .sh-section-header {
    margin-top: 2px !important;
    margin-bottom: 11px !important;
}

/* Desktop reference is always two columns, never four. */
body.sg-reference-live .schedule-list,
body.sg-reference-live .sh-carousel,
body.sg-reference-live #channelsCarouselWrap .schedule-list,
body.sg-reference-live #channelsCarouselWrap:not(.is-vertical) .schedule-list,
body.sg-reference-live #channelsCarouselWrap.is-vertical .schedule-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-rows: var(--sg-ref-card-h) !important;
    gap: 10px 12px !important;
    width: 100% !important;
    max-height: calc((var(--sg-ref-card-h) * 3) + 20px) !important;
    overflow: hidden !important;
    direction: ltr !important;
}
body.sg-reference-live #channelsCarouselWrap.is-expanded .schedule-list {
    max-height: 6000px !important;
}

body.sg-reference-live .channel-card,
body.sg-reference-live #channelsCarouselWrap:not(.is-vertical) .channel-card,
body.sg-reference-live #channelsCarouselWrap.is-vertical .channel-card {
    width: 100% !important;
    height: var(--sg-ref-card-h) !important;
    min-height: var(--sg-ref-card-h) !important;
    max-height: var(--sg-ref-card-h) !important;
    grid-template-columns: var(--sg-ref-card-logo) minmax(0,1fr) !important;
    gap: 13px !important;
    padding: 8px !important;
    border-radius: 10px !important;
    border-color: rgba(255,255,255,.105) !important;
    background: linear-gradient(180deg,#09090c,#050506) !important;
}
body.sg-reference-live .channel-card.active-channel {
    border-color: rgba(153,49,255,.76) !important;
    box-shadow: inset 3px 0 0 #9b2cff, 0 0 0 1px rgba(153,49,255,.10) !important;
}
body.sg-reference-live .channel-logo,
body.sg-reference-live .sh-card-thumb {
    width: var(--sg-ref-card-logo) !important;
    height: var(--sg-ref-card-logo) !important;
    min-width: var(--sg-ref-card-logo) !important;
    min-height: var(--sg-ref-card-logo) !important;
    border-radius: 8px !important;
    background:
        radial-gradient(circle at 50% 110%, rgba(127,0,255,.52), transparent 58%),
        linear-gradient(145deg,#251046,#09030f) !important;
}
body.sg-reference-live .channel-logo img {
    position: relative !important;
    z-index: 2 !important;
    width: 88% !important;
    height: 88% !important;
    max-width: 88% !important;
    max-height: 88% !important;
    object-fit: contain !important;
}
body.sg-reference-live .bein-badge {
    width: 88% !important;
    height: 88% !important;
    color: #fff !important;
    background: linear-gradient(180deg,#f7f3fb 0 46%,#42146d 46% 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25) !important;
}
body.sg-reference-live .bein-badge .sports-word {
    color: #8133c8 !important;
    font-size: 10px !important;
}
body.sg-reference-live .bein-number {
    color: #fff !important;
}
body.sg-reference-live .channel-copy {
    padding: 4px 62px 10px 0 !important;
}
body.sg-reference-live .channel-title {
    max-width: 100% !important;
    color: #fff !important;
    font-size: clamp(12px, 1vw, 14px) !important;
}
body.sg-reference-live .channel-time,
body.sg-reference-live .recommended-line {
    color: #b9b9c2 !important;
    font-size: 10px !important;
}
body.sg-reference-live .channel-ref-number {
    top: 15px !important;
    right: 13px !important;
}
body.sg-reference-live .favorite-star {
    right: 9px !important;
    bottom: 9px !important;
}
body.sg-reference-live .quality-row {
    right: 52px !important;
    bottom: 5px !important;
}

body.sg-reference-live .sg-reference-show-more {
    height: 40px !important;
    min-width: 154px !important;
    margin-top: 12px !important;
}

/* Mid-size windows and embedded WebViews use the Android composition. */
@media (max-width: 900px) {
    :root {
        --sg-ref-card-h: 68px;
        --sg-ref-card-logo: 56px;
    }

    body.sg-nova-live.sg-reference-live {
        padding: 0 0 max(16px, env(safe-area-inset-bottom)) !important;
        background: #000 !important;
    }

    body.sg-reference-live .bein-header,
    body.sg-reference-live .sh-navbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        width: 100% !important;
        max-width: none !important;
        height: calc(64px + env(safe-area-inset-top)) !important;
        min-height: calc(64px + env(safe-area-inset-top)) !important;
        padding-top: env(safe-area-inset-top) !important;
        margin: 0 !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,.07) !important;
        border-radius: 0 !important;
    }
    body.sg-reference-live .bein-header-inner {
        height: 64px !important;
        padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left)) !important;
    }
    body.sg-reference-live .connect-logo img,
    body.sg-reference-live .sh-brand img {
        width: 38px !important;
        height: 38px !important;
        flex-basis: 38px !important;
    }
    body.sg-reference-live .sg-reference-brand-copy strong { font-size: 11px !important; }
    body.sg-reference-live .sg-reference-brand-copy em { font-size: 15px !important; }
    body.sg-reference-live .sg-reference-window-controls { display: none !important; }
    body.sg-reference-live .sg-reference-mobile-actions {
        display: inline-flex !important;
        margin-left: auto !important;
    }

    body.sg-reference-live .bein-page {
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        padding: 0 12px 14px !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }
    body.sg-reference-live .sg-reference-player-actions { display: none !important; }

    body.sg-reference-live .player-container {
        width: calc(100% + 24px) !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        margin: 0 -12px !important;
    }
    body.sg-reference-live .player-shell video,
    body.sg-reference-live .player-shell .sg-plyr-video {
        object-fit: cover !important;
    }
    body.sg-reference-live .player-controls {
        padding: 40px 10px 8px !important;
    }
    body.sg-reference-live .progress {
        margin-bottom: 8px !important;
    }
    body.sg-reference-live .control-btn,
    body.sg-reference-live .quality-select {
        height: 32px !important;
        min-width: 32px !important;
    }
    body.sg-reference-live .volume-range,
    body.sg-reference-live #pipBtn,
    body.sg-reference-live .time-label {
        display: none !important;
    }
    body.sg-reference-live .quality-select {
        min-width: 66px !important;
        margin-left: auto !important;
    }

    body.sg-reference-live .sg-reference-live-details {
        width: 100% !important;
        margin: 12px 0 10px !important;
    }
    body.sg-reference-live .sg-reference-section-label,
    body.sg-reference-live .sh-section-title {
        font-size: 13px !important;
    }
    body.sg-reference-live .sg-reference-server-card {
        min-height: 60px !important;
        grid-template-columns: 38px minmax(0,1fr) auto !important;
        gap: 9px !important;
        padding: 8px 10px !important;
    }
    body.sg-reference-live .sg-reference-server-play {
        width: 34px !important;
        height: 34px !important;
    }

    body.sg-reference-live .schedule-list,
    body.sg-reference-live .sh-carousel,
    body.sg-reference-live #channelsCarouselWrap .schedule-list,
    body.sg-reference-live #channelsCarouselWrap:not(.is-vertical) .schedule-list,
    body.sg-reference-live #channelsCarouselWrap.is-vertical .schedule-list {
        grid-template-columns: minmax(0,1fr) !important;
        grid-auto-rows: var(--sg-ref-card-h) !important;
        gap: 5px !important;
        max-height: calc((var(--sg-ref-card-h) * 5) + 20px) !important;
    }
    body.sg-reference-live #channelsCarouselWrap.is-expanded .schedule-list {
        max-height: 8000px !important;
    }
    body.sg-reference-live .channel-card,
    body.sg-reference-live #channelsCarouselWrap:not(.is-vertical) .channel-card,
    body.sg-reference-live #channelsCarouselWrap.is-vertical .channel-card {
        grid-template-columns: var(--sg-ref-card-logo) minmax(0,1fr) !important;
        height: var(--sg-ref-card-h) !important;
        min-height: var(--sg-ref-card-h) !important;
        max-height: var(--sg-ref-card-h) !important;
        gap: 9px !important;
        padding: 5px !important;
        border-radius: 8px !important;
    }
    body.sg-reference-live .channel-logo,
    body.sg-reference-live .sh-card-thumb {
        width: var(--sg-ref-card-logo) !important;
        height: var(--sg-ref-card-logo) !important;
        min-width: var(--sg-ref-card-logo) !important;
        min-height: var(--sg-ref-card-logo) !important;
        border-radius: 6px !important;
    }
    body.sg-reference-live .channel-copy {
        padding: 2px 48px 8px 0 !important;
        gap: 0 !important;
    }
    body.sg-reference-live .channel-title {
        font-size: 11px !important;
    }
    body.sg-reference-live .channel-time,
    body.sg-reference-live .recommended-line {
        font-size: 8.5px !important;
        line-height: 1.24 !important;
    }
    body.sg-reference-live .channel-ref-number {
        top: 10px !important;
        right: 8px !important;
        font-size: 9px !important;
    }
    body.sg-reference-live .favorite-star {
        right: 4px !important;
        bottom: 4px !important;
        width: 23px !important;
        height: 23px !important;
        min-width: 23px !important;
        font-size: 21px !important;
    }
    body.sg-reference-live .quality-row {
        right: 38px !important;
        bottom: 3px !important;
        height: 2px !important;
    }
    body.sg-reference-live .qbtn {
        height: 2px !important;
        min-height: 2px !important;
    }
}

@media (max-width: 430px) {
    body.sg-reference-live .bein-page {
        padding-inline: 10px !important;
    }
    body.sg-reference-live .player-container {
        width: calc(100% + 20px) !important;
        margin-inline: -10px !important;
    }
    body.sg-reference-live .sg-reference-server-tag {
        min-width: 46px !important;
        padding-inline: 7px !important;
    }
    body.sg-reference-live .controls-row {
        gap: 5px !important;
    }
    body.sg-reference-live .control-btn,
    body.sg-reference-live .quality-select {
        padding-inline: 7px !important;
    }
}

@media (max-width: 360px) {
    body.sg-reference-live .sg-reference-brand-copy strong { font-size: 10px !important; }
    body.sg-reference-live .sg-reference-brand-copy em { font-size: 14px !important; }
    body.sg-reference-live .sg-reference-mobile-actions { gap: 0 !important; }
    body.sg-reference-live .sg-reference-mobile-actions .sg-reference-icon-btn {
        width: 33px !important;
        height: 33px !important;
    }
    body.sg-reference-live .sg-reference-server-tag { display: none !important; }
    body.sg-reference-live .sg-reference-server-card {
        grid-template-columns: 38px minmax(0,1fr) !important;
    }
}

/* Landscape phones: keep the player usable without forcing desktop cards. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 520px) {
    body.sg-reference-live .bein-header,
    body.sg-reference-live .sh-navbar {
        position: relative !important;
    }
    body.sg-reference-live .player-container {
        max-height: calc(100svh - 64px) !important;
        aspect-ratio: 16 / 9 !important;
    }
}

/* ========================================================================== 
   Desktop full-screen fidelity pass — supplied 1000×762 Windows reference
   Android/mobile rules below 901px remain unchanged.
   ========================================================================== */
@media (min-width: 901px) {
    :root {
        --sg-desktop-gutter: clamp(18px, 2vw, 34px);
        --sg-ref-card-h: clamp(96px, 6.35vw, 112px);
        --sg-ref-card-logo: calc(var(--sg-ref-card-h) - 16px);
    }

    html,
    body.sg-nova-live.sg-reference-live {
        width: 100% !important;
        min-width: 901px !important;
        min-height: 100% !important;
        background: #000 !important;
    }

    body.sg-nova-live.sg-reference-live {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding: 0 !important;
        overflow-x: clip !important;
    }

    /* The Windows reference is a borderless, edge-to-edge screen. */
    body.sg-reference-live .bein-header,
    body.sg-reference-live .sh-navbar {
        display: none !important;
    }

    body.sg-reference-live .bein-page {
        width: 100% !important;
        max-width: none !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 var(--sg-desktop-gutter) 28px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #000 !important;
        overflow: visible !important;
    }

    body.sg-reference-live .bein-layout,
    body.sg-reference-live .player-column,
    body.sg-reference-live .player-hero-shell,
    body.sg-reference-live .sh-live-hero {
        width: 100% !important;
        max-width: none !important;
    }

    body.sg-reference-live .player-hero-shell,
    body.sg-reference-live .sh-live-hero {
        position: relative !important;
        overflow: visible !important;
    }

    /* Back/share/favorite float over the live picture, as in the reference. */
    body.sg-reference-live .sg-reference-player-actions {
        position: absolute !important;
        top: 0 !important;
        left: calc(var(--sg-desktop-gutter) * -1) !important;
        right: calc(var(--sg-desktop-gutter) * -1) !important;
        z-index: 90 !important;
        width: auto !important;
        height: 62px !important;
        min-height: 62px !important;
        padding: 0 var(--sg-desktop-gutter) !important;
        pointer-events: none !important;
    }
    body.sg-reference-live .sg-reference-player-actions .sg-reference-icon-btn {
        pointer-events: auto !important;
    }
    body.sg-reference-live .sg-reference-icon-btn {
        width: 42px !important;
        height: 42px !important;
    }
    body.sg-reference-live .sg-reference-icon-btn .material-icons {
        font-size: 29px !important;
    }

    /* The live feed replaces the complete hero artwork/information region. */
    body.sg-reference-live .player-container {
        width: calc(100% + (var(--sg-desktop-gutter) * 2)) !important;
        height: clamp(300px, 31.25vw, 560px) !important;
        min-height: 300px !important;
        max-height: 560px !important;
        margin: 0 calc(var(--sg-desktop-gutter) * -1) !important;
        aspect-ratio: auto !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #000 !important;
    }

    body.sg-reference-live .player-shell,
    body.sg-reference-live .player-shell video,
    body.sg-reference-live .player-shell .sg-plyr-video {
        width: 100% !important;
        height: 100% !important;
    }
    body.sg-reference-live .player-shell video,
    body.sg-reference-live .player-shell .sg-plyr-video {
        object-fit: cover !important;
        object-position: center center !important;
    }

    body.sg-reference-live .player-controls {
        padding: 62px var(--sg-desktop-gutter) 15px !important;
    }

    /* Compact right-aligned details card mirrors the desktop reference. */
    body.sg-reference-live .sg-reference-live-details {
        width: min(440px, 42vw) !important;
        margin: 14px 0 11px auto !important;
    }
    body.sg-reference-live .sg-reference-section-label,
    body.sg-reference-live .sh-section-title {
        font-size: clamp(14px, 1.05vw, 16px) !important;
    }
    body.sg-reference-live .sg-reference-server-card {
        min-height: 64px !important;
    }

    /* Two equal columns across the complete desktop viewport. */
    body.sg-reference-live .schedule-list,
    body.sg-reference-live .sh-carousel,
    body.sg-reference-live #channelsCarouselWrap .schedule-list,
    body.sg-reference-live #channelsCarouselWrap:not(.is-vertical) .schedule-list,
    body.sg-reference-live #channelsCarouselWrap.is-vertical .schedule-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: var(--sg-ref-card-h) !important;
        gap: 10px 12px !important;
        max-height: calc((var(--sg-ref-card-h) * 3) + 20px) !important;
    }

    body.sg-reference-live .channel-card,
    body.sg-reference-live #channelsCarouselWrap:not(.is-vertical) .channel-card,
    body.sg-reference-live #channelsCarouselWrap.is-vertical .channel-card {
        height: var(--sg-ref-card-h) !important;
        min-height: var(--sg-ref-card-h) !important;
        max-height: var(--sg-ref-card-h) !important;
        grid-template-columns: var(--sg-ref-card-logo) minmax(0, 1fr) !important;
        padding: 8px !important;
        gap: 13px !important;
    }

    body.sg-reference-live .channel-logo,
    body.sg-reference-live .sh-card-thumb {
        width: var(--sg-ref-card-logo) !important;
        height: var(--sg-ref-card-logo) !important;
        min-width: var(--sg-ref-card-logo) !important;
        min-height: var(--sg-ref-card-logo) !important;
    }

    body.sg-reference-live .channel-copy {
        padding-top: 4px !important;
        padding-bottom: 10px !important;
    }

    body.sg-reference-live .channel-title {
        font-size: clamp(13px, 1vw, 16px) !important;
    }
    body.sg-reference-live .channel-time,
    body.sg-reference-live .recommended-line {
        font-size: clamp(9px, .72vw, 11px) !important;
    }

    body.sg-reference-live .sg-reference-show-more {
        margin-bottom: 0 !important;
    }
}

/* SG LIVE V4 — real playback stability/smoothness meter. */
body.sg-reference-live .progress.sg-stability-meter {
    --sg-stability: 0%;
    pointer-events: none !important;
    cursor: default !important;
    opacity: 1 !important;
    filter: none !important;
    accent-color: #8d20ff !important;
}
body.sg-reference-live .progress.sg-stability-meter:disabled {
    opacity: 1 !important;
}
body.sg-reference-live .progress.sg-stability-meter::-webkit-slider-runnable-track {
    height: 4px !important;
    border-radius: 999px !important;
    background:
        linear-gradient(90deg,#d400ff 0%,#8d20ff 48%,#00a9ff 100%) 0 0 / var(--sg-stability) 100% no-repeat,
        rgba(255,255,255,.12) !important;
}
body.sg-reference-live .progress.sg-stability-meter::-webkit-slider-thumb {
    width: 13px !important;
    height: 13px !important;
    margin-top: -4.5px !important;
    border: 2px solid rgba(255,255,255,.34) !important;
    background: #8d20ff !important;
    box-shadow: 0 0 0 3px rgba(141,32,255,.18), 0 0 14px rgba(0,169,255,.42) !important;
}
body.sg-reference-live .progress.sg-stability-meter::-moz-range-track {
    height: 4px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.12) !important;
}
body.sg-reference-live .progress.sg-stability-meter::-moz-range-progress {
    height: 4px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg,#d400ff 0%,#8d20ff 58%,#00a9ff 100%) !important;
}
body.sg-reference-live .progress.sg-stability-meter::-moz-range-thumb {
    width: 13px !important;
    height: 13px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255,255,255,.34) !important;
    background: #8d20ff !important;
    box-shadow: 0 0 0 3px rgba(141,32,255,.18), 0 0 14px rgba(0,169,255,.42) !important;
}

/* Each channel card shows the latest measured stability; unplayed cards use server-monitor baseline. */
body.sg-reference-live .quality-row {
    overflow: visible !important;
}
body.sg-reference-live .quality-row::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255,255,255,.09);
    pointer-events: none;
    z-index: 0;
}
body.sg-reference-live .qbtn {
    --sg-stability: 0%;
    position: relative !important;
    z-index: 1 !important;
    width: var(--sg-stability) !important;
    min-width: 2px !important;
    max-width: 100% !important;
    transition: width .5s cubic-bezier(.22,.8,.22,1), opacity .25s ease !important;
    background: linear-gradient(90deg,#d400ff 0%,#8d20ff 42%,#00a9ff 100%) !important;
}
body.sg-reference-live .qbtn[data-measured="1"] {
    box-shadow: 0 0 10px rgba(0,169,255,.22) !important;
}
body.sg-reference-live .qbtn.down {
    opacity: .34 !important;
}
body.sg-reference-live .channel-stability-label {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ========================================================================== 
   SG LIVE V5 — Windows full-screen composition correction
   Keeps the existing Android layout (<= 900px) unchanged.
   The desktop app frame fills the available screen while preserving the
   supplied reference proportions: visible title bar, compact live hero,
   right-aligned details panel, and exactly two channel columns.
   ========================================================================== */
@media (min-width: 901px) {
    :root {
        --sg-v5-shell-gap: clamp(10px, 1.2vw, 18px);
        --sg-v5-content-x: clamp(18px, 2.1vw, 34px);
        --sg-v5-header-h: clamp(58px, 6.6vh, 68px);
        --sg-v5-player-h: clamp(300px, 41vh, 420px);
        --sg-v5-card-h: clamp(96px, 10.6vh, 116px);
        --sg-v5-card-logo: calc(var(--sg-v5-card-h) - 16px);
    }

    html,
    body.sg-nova-live.sg-reference-live.sg-desktop-fidelity-v5 {
        width: 100% !important;
        min-width: 901px !important;
        min-height: 100% !important;
        background: #000 !important;
    }

    body.sg-nova-live.sg-reference-live.sg-desktop-fidelity-v5 {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding: var(--sg-v5-shell-gap) 0 20px !important;
        overflow-x: hidden !important;
        background:
            radial-gradient(circle at 50% 4%, rgba(63,0,122,.09), transparent 34%),
            #000 !important;
    }

    /* Restore the Windows application title bar shown in the supplied image. */
    body.sg-desktop-fidelity-v5 .bein-header,
    body.sg-desktop-fidelity-v5 .sh-navbar {
        display: block !important;
        position: relative !important;
        inset: auto !important;
        width: calc(100% - (var(--sg-v5-shell-gap) * 2)) !important;
        max-width: none !important;
        height: var(--sg-v5-header-h) !important;
        min-height: var(--sg-v5-header-h) !important;
        margin: 0 auto !important;
        border: 1px solid rgba(255,255,255,.20) !important;
        border-bottom-color: rgba(255,255,255,.095) !important;
        border-radius: 22px 22px 0 0 !important;
        background: #030304 !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.sg-desktop-fidelity-v5 .bein-header-inner {
        height: 100% !important;
        padding: 0 var(--sg-v5-content-x) !important;
    }

    body.sg-desktop-fidelity-v5 .sg-reference-window-controls {
        display: inline-flex !important;
    }

    body.sg-desktop-fidelity-v5 .bein-page {
        width: calc(100% - (var(--sg-v5-shell-gap) * 2)) !important;
        max-width: none !important;
        min-height: calc(100dvh - var(--sg-v5-header-h) - (var(--sg-v5-shell-gap) * 2)) !important;
        margin: 0 auto !important;
        padding: 0 var(--sg-v5-content-x) 20px !important;
        border: 1px solid rgba(255,255,255,.20) !important;
        border-top: 0 !important;
        border-radius: 0 0 22px 22px !important;
        background: #000 !important;
        overflow: hidden !important;
    }

    body.sg-desktop-fidelity-v5 .bein-layout,
    body.sg-desktop-fidelity-v5 .player-column,
    body.sg-desktop-fidelity-v5 .player-hero-shell,
    body.sg-desktop-fidelity-v5 .sh-live-hero {
        width: 100% !important;
        max-width: none !important;
    }

    body.sg-desktop-fidelity-v5 .player-hero-shell,
    body.sg-desktop-fidelity-v5 .sh-live-hero {
        position: relative !important;
        overflow: visible !important;
    }

    /* Actions occupy their own compact row instead of floating over a huge feed. */
    body.sg-desktop-fidelity-v5 .sg-reference-player-actions {
        position: relative !important;
        inset: auto !important;
        z-index: 80 !important;
        width: 100% !important;
        height: 52px !important;
        min-height: 52px !important;
        padding: 0 !important;
        display: flex !important;
        pointer-events: auto !important;
    }

    body.sg-desktop-fidelity-v5 .sg-reference-icon-btn {
        width: 38px !important;
        height: 38px !important;
    }
    body.sg-desktop-fidelity-v5 .sg-reference-icon-btn .material-icons {
        font-size: 27px !important;
    }

    /* The live feed replaces the original artwork, but keeps the same visual band. */
    body.sg-desktop-fidelity-v5 .player-container {
        position: relative !important;
        width: 100% !important;
        height: var(--sg-v5-player-h) !important;
        min-height: var(--sg-v5-player-h) !important;
        max-height: var(--sg-v5-player-h) !important;
        margin: 0 !important;
        aspect-ratio: auto !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #000 !important;
        overflow: hidden !important;
    }

    body.sg-desktop-fidelity-v5 .player-shell,
    body.sg-desktop-fidelity-v5 .player-shell video,
    body.sg-desktop-fidelity-v5 .player-shell .sg-plyr-video {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    body.sg-desktop-fidelity-v5 .player-shell video,
    body.sg-desktop-fidelity-v5 .player-shell .sg-plyr-video {
        object-fit: cover !important;
        object-position: center center !important;
    }

    body.sg-desktop-fidelity-v5 .player-controls {
        padding: 54px 18px 13px !important;
    }

    /* Keep details clearly visible and aligned like the reference. */
    body.sg-desktop-fidelity-v5 .sg-reference-live-details {
        width: min(430px, 42vw) !important;
        margin: 13px 0 12px auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        filter: none !important;
    }
    body.sg-desktop-fidelity-v5 .sg-reference-section-label,
    body.sg-desktop-fidelity-v5 .sh-section-title {
        color: #fff !important;
        opacity: 1 !important;
        font-size: 15px !important;
    }
    body.sg-desktop-fidelity-v5 .sg-reference-server-card {
        min-height: 62px !important;
        border-color: rgba(139,21,255,.50) !important;
        background:
            radial-gradient(circle at 90% 20%, rgba(139,21,255,.18), transparent 45%),
            #08080c !important;
        opacity: 1 !important;
    }

    body.sg-desktop-fidelity-v5 .guide-panel,
    body.sg-desktop-fidelity-v5 .sh-section {
        width: 100% !important;
        max-width: none !important;
        padding: 0 0 2px !important;
    }

    /* Hard lock to two columns on every Windows/desktop width. */
    body.sg-desktop-fidelity-v5 #channelsCarouselWrap,
    body.sg-desktop-fidelity-v5 .sg-carousel-wrap {
        width: 100% !important;
        max-width: none !important;
    }

    body.sg-desktop-fidelity-v5 #channelsList.schedule-list,
    body.sg-desktop-fidelity-v5 #channelsCarouselWrap .schedule-list,
    body.sg-desktop-fidelity-v5 #channelsCarouselWrap:not(.is-vertical) .schedule-list,
    body.sg-desktop-fidelity-v5 #channelsCarouselWrap.is-vertical .schedule-list,
    body.sg-desktop-fidelity-v5 .schedule-list.sh-carousel {
        width: 100% !important;
        max-width: none !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        grid-auto-columns: initial !important;
        grid-auto-rows: var(--sg-v5-card-h) !important;
        gap: 10px 12px !important;
        max-height: calc((var(--sg-v5-card-h) * 3) + 20px) !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        direction: ltr !important;
    }

    body.sg-desktop-fidelity-v5 #channelsCarouselWrap.is-expanded #channelsList.schedule-list,
    body.sg-desktop-fidelity-v5 #channelsCarouselWrap.is-expanded .schedule-list {
        max-height: 4000px !important;
    }

    body.sg-desktop-fidelity-v5 #channelsList > .channel-card,
    body.sg-desktop-fidelity-v5 .channel-card,
    body.sg-desktop-fidelity-v5 #channelsCarouselWrap:not(.is-vertical) .channel-card,
    body.sg-desktop-fidelity-v5 #channelsCarouselWrap.is-vertical .channel-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: var(--sg-v5-card-h) !important;
        min-height: var(--sg-v5-card-h) !important;
        max-height: var(--sg-v5-card-h) !important;
        flex: none !important;
        grid-column: auto !important;
        grid-template-columns: var(--sg-v5-card-logo) minmax(0,1fr) !important;
        padding: 8px !important;
        gap: 13px !important;
    }

    body.sg-desktop-fidelity-v5 .channel-logo,
    body.sg-desktop-fidelity-v5 .sh-card-thumb {
        width: var(--sg-v5-card-logo) !important;
        height: var(--sg-v5-card-logo) !important;
        min-width: var(--sg-v5-card-logo) !important;
        min-height: var(--sg-v5-card-logo) !important;
    }

    body.sg-desktop-fidelity-v5 .channel-copy {
        padding: 3px 66px 10px 0 !important;
    }

    body.sg-desktop-fidelity-v5 .channel-title {
        font-size: clamp(13px, .95vw, 16px) !important;
    }
    body.sg-desktop-fidelity-v5 .channel-time,
    body.sg-desktop-fidelity-v5 .recommended-line {
        font-size: clamp(9px, .68vw, 11px) !important;
    }

    body.sg-desktop-fidelity-v5 .sg-reference-show-more {
        margin: 12px auto 0 !important;
    }
}

/* Keep the already-approved Android layout isolated from desktop corrections. */
@media (max-width: 900px) {
    body.sg-desktop-fidelity-v5 .bein-header,
    body.sg-desktop-fidelity-v5 .sh-navbar,
    body.sg-desktop-fidelity-v5 .bein-page,
    body.sg-desktop-fidelity-v5 .player-container,
    body.sg-desktop-fidelity-v5 #channelsList.schedule-list,
    body.sg-desktop-fidelity-v5 .channel-card {
        /* Values intentionally come from the existing mobile rules. */
    }
}

/* V5 fallback badge: use a beIN-style identity when the database has no logo. */
body.sg-reference-live .bein-badge {
    position: relative !important;
    width: 88% !important;
    height: 88% !important;
    padding: 5% 5% 7% !important;
    display: grid !important;
    grid-template-rows: 42% 25% 33% !important;
    align-items: center !important;
    justify-items: center !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.38) !important;
    border-radius: 6px !important;
    background:
        linear-gradient(180deg,#fff 0 41%,#39205e 41%,#1a0637 100%) !important;
    color: #fff !important;
    box-shadow: 0 7px 18px rgba(0,0,0,.40), inset 0 0 14px rgba(151,55,255,.18) !important;
    direction: ltr !important;
}
body.sg-reference-live .bein-badge .bein-word {
    width: 100% !important;
    display: block !important;
    color: #28104f !important;
    font: 500 clamp(15px, 1.45vw, 26px)/1 'Inter','Segoe UI',sans-serif !important;
    letter-spacing: -1.5px !important;
    text-align: center !important;
}
body.sg-reference-live .bein-badge .sports-word {
    width: 100% !important;
    display: block !important;
    color: #fff !important;
    font: 500 clamp(7px, .58vw, 11px)/1 'Inter','Segoe UI',sans-serif !important;
    letter-spacing: .5px !important;
    text-align: center !important;
}
body.sg-reference-live .bein-badge .bein-number {
    position: static !important;
    width: 100% !important;
    display: block !important;
    color: #fff !important;
    opacity: 1 !important;
    font: 800 clamp(10px, .94vw, 17px)/1 'Inter','Segoe UI',sans-serif !important;
    letter-spacing: -.3px !important;
    text-align: center !important;
    white-space: nowrap !important;
}
@media (max-width: 900px) {
    body.sg-reference-live .bein-badge .bein-word { font-size: 15px !important; }
    body.sg-reference-live .bein-badge .sports-word { font-size: 7px !important; }
    body.sg-reference-live .bein-badge .bein-number { font-size: 10px !important; }
}