/* Focused navigation and exploration, sharing the HLSPLAY tokens. */
:root { --ui-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 5 7 7-7 7' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.header-search { z-index: 60; width: clamp(210px, 22vw, 340px); }
.header-search:has(.universal-scope) > #header-search,
body.sagas-visible .header-search:has(.universal-scope) > #header-search { padding-right: 88px; }
.header-search > .universal-scope { position: absolute; top: 50%; right: 7px; z-index: 2; transform: translateY(-50%); width: 76px; min-width: 0; height: 30px; min-height: 30px; padding: 4px 19px 4px 8px; border: 0; border-left: 1px solid var(--line-soft, #ffffff0d); border-radius: 0 8px 8px 0; background-color: transparent; background-position: right 5px center; color: var(--text-muted); box-shadow: none; font-size: 10px; transition: color 160ms ease, background-color 160ms ease; }
.header-search > .universal-scope:is(:hover:where(body[data-input-modality="mouse"] *), :focus-visible) { color: var(--text); background-color: var(--hover); }
.header-search > .universal-scope:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
.header-search > .universal-results { clip-path: none; width: min(440px, calc(100vw - 32px)); height: auto; }
.universal-results { position: absolute; top: calc(100% + 12px); right: 0; width: min(440px, calc(100vw - 32px)); max-height: min(660px, calc(100dvh - var(--header-height) - 30px)); overflow: auto; padding: 8px; border: 1px solid var(--line); border-radius: 18px; background: var(--sidebar-surface); box-shadow: 0 24px 70px #0005; backdrop-filter: blur(28px); }
.universal-option { display: flex; align-items: center; width: 100%; min-height: 82px; gap: 14px; padding: 8px; text-align: left; border: 1px solid transparent; border-radius: 11px; background: transparent; box-shadow: none; }
.universal-option:hover:where(body[data-input-modality="mouse"] *), .universal-option[aria-selected='true'] { border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: var(--accent-soft); }
.universal-poster { position: relative; flex: 0 0 43px; width: 43px; height: 61px; overflow: hidden; border-radius: 5px; background: var(--surface-elevated); }
.universal-poster[data-kind='live'] { height: 43px; background: transparent; border-radius: 0; }
.universal-poster img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.universal-poster[data-kind='live'] img { object-fit: contain; padding: 3px; }
.universal-copy { display: grid; gap: 5px; min-width: 0; flex: 1; }
.universal-copy > strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; font-weight: 600; }
.universal-copy > small { color: var(--text-muted); font-size: 10px; }
.universal-copy > .universal-program { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.universal-play { width: 15px; height: 18px; background: var(--text-muted); mask: var(--ui-play) center / contain no-repeat; }
.universal-message { padding: 18px 12px; margin: 0; color: var(--text-muted); font-size: 12px; }
.universal-guide { min-height: 40px; width: 100%; margin-top: 5px; border: 0; background: transparent; box-shadow: none; color: var(--text-muted); font-size: 11px; }
.universal-all { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 44px; margin-top: 6px; padding: 12px; border: 1px solid transparent; border-top-color: var(--line-soft, #ffffff0d); border-radius: 10px; background: transparent; box-shadow: none; color: var(--text-muted); text-align: left; font-size: 11px; transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease; }
.universal-all:is(:hover:where(body[data-input-modality="mouse"] *), :focus-visible), .universal-all[aria-selected='true'] { color: var(--text); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.universal-all-arrow { flex: 0 0 13px; height: 16px; background: currentColor; mask: var(--ui-chevron) center / contain no-repeat; }
.universal-poster[data-kind='saga'], .universal-poster[data-kind='actor'] { height: 43px; }
#change-account { position: relative; flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; min-height: 44px; max-width: 44px; padding: 0; font-size: 0; border-radius: 50%; }
#change-account::before { content: ''; display: block; width: 20px; height: 20px; margin: auto; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='7' r='3' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M3 21v-3a6 6 0 0 1 10-4M14 10h8m-3-3 3 3-3 3' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.sidebar-action[data-nav='home'] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m3 10 9-7 9 7v11h-7v-7h-4v7H3Z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.sidebar-action[data-nav='guide'] { --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='4' width='20' height='14' rx='3' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M8 22h8m-4-4v4m-4-10 3 2 5-5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.sidebar-services { display: grid; grid-template-columns: 1fr; gap: 5px; margin-top: 16px; }
.service-nav-button { display: grid; place-items: center; min-height: 38px; padding: 6px; width: 52px; border: 1px solid transparent; border-radius: 10px; background: transparent; box-shadow: none; }
.service-nav-button:hover:where(body[data-input-modality="mouse"] *), .service-nav-button[aria-pressed='true'] { background: var(--hover); border-color: var(--line); }
.service-logo { display: block; width: 32px; height: 20px; font-size: 10px; font-weight: 500; text-align: center; line-height: 20px; color: var(--text-muted); }
.service-logo:is([data-service='netflix'],[data-service='prime'],[data-service='max'],[data-service='apple'],[data-service='paramount'],[data-service='globoplay']) { background: currentColor; font-size: 0; mask: var(--service-mask) center / contain no-repeat; }
.service-logo[data-service='netflix'] { --service-mask: url('/assets/services/netflix.svg'); color: #e50914; }
.service-logo[data-service='prime'] { --service-mask: url('/assets/services/primevideo.svg'); }
.service-logo[data-service='prime'] { mask-size: 32px 32px; }
.service-logo[data-service='max'] { --service-mask: url('/assets/services/hbo.svg'); }
.service-logo[data-service='max'] { mask-size: 32px 32px; }
.service-logo[data-service='apple'] { --service-mask: url('/assets/services/appletv.svg'); }
.service-logo[data-service='paramount'] { --service-mask: url('/assets/services/paramountplus.svg'); }
.service-logo[data-service='globoplay'] { background: transparent; mask: none; font-size: 9px; }
.service-logo[data-service='disney'] { font-family: inherit; font-size: 10px; font-style: normal; }
.sidebar-live { display: grid; gap: 2px; margin-top: 12px; }
.sidebar-family, .app-sidebar .sidebar-sport-item { display: flex; align-items: center; gap: 13px; min-height: 36px; padding: 8px 11px; border: 0; border-radius: 10px; background: transparent; box-shadow: none; color: var(--text-muted); font-size: 12px; text-align: left; }
.sidebar-family[aria-pressed='true'] { color: var(--text); background: var(--accent-soft); box-shadow: inset 2px 0 var(--accent); }
.sidebar-context-icon { display: grid; place-items: center; flex: 0 0 20px; width: 20px; height: 20px; position: relative; }
.sidebar-context-icon::before { content: ''; width: 19px; height: 19px; background: currentColor; mask: var(--context-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='4' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M3 10h18M10 10v11' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E")) center / contain no-repeat; }
.sidebar-context-icon img { position: absolute; width: 20px; height: 20px; object-fit: contain; background: transparent; }
.sidebar-sports .sidebar-context-icon img { background: transparent; filter: grayscale(1) brightness(0) invert(1); opacity: .85; }
html[data-theme='light'] .sidebar-sports .sidebar-context-icon img { filter: grayscale(1) brightness(0); }
.sidebar-context-icon[data-icon='trophy'] { --context-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h10v6a5 5 0 0 1-10 0V3Zm0 2H3v3a4 4 0 0 0 4 4m10-7h4v3a4 4 0 0 1-4 4m-5 2v6m-5 1h10' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.sidebar-context-icon[data-icon='calendar'] { --context-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='16' rx='3' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M7 2v6m10-6v6M3 11h18m-13 5h8' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E"); }
.sidebar-context-icon[data-icon='favorite'] { --context-icon: var(--ui-favorite-outline); color: var(--accent); }
.sidebar-context-icon[data-icon='bell'] { --context-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 17h14l-2-4V9a5 5 0 0 0-10 0v4Zm5 3a2 2 0 0 0 4 0' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.sidebar-context-icon:is([data-icon='sports'],[data-icon='football']) { --context-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='m12 7 5 4-2 6H9l-2-6Zm0 0V3M7 11l-4-1m6 7-3 3m9-3 3 3m-1-9 4-1' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E"); }
.sidebar-context-icon[data-icon='basketball'] { --context-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M3 12h18M12 3v18M5 6c9 0 9 12 14 12M6 19C6 10 18 10 18 5' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E"); }
.sidebar-context-icon[data-icon='flag'] { --context-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 21V3h15l-3 5 3 5H5m5-10v10m5-10v10M5 8h13' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.sidebar-context-icon[data-icon='american-football'] { --context-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 20C0 9 9 0 20 3c3 11-6 20-17 17Zm5-4 8-8m-7 3 4 4m-1-7 4 4M4 11l9 9M11 4l9 9' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.sidebar-context-icon[data-icon='tv'] { --context-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='6' width='18' height='14' rx='3' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='m8 2 4 4 4-4m-8 21h8' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.sidebar-context-icon[data-icon='music'] { --context-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 18V5l11-2v13M9 8l11-2' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cellipse cx='6' cy='18' rx='3' ry='2.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cellipse cx='17' cy='16' rx='3' ry='2.5' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E"); }
.sidebar-context-icon[data-icon='kids'] { --context-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 3 3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1Z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.sidebar-context-icon[data-icon='documentary'] { --context-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='m16 8-2.5 5.5L8 16l2.5-5.5Z' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.sidebar-context-icon[data-icon='news'] { --context-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='3' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M7 7h10M7 11h5m-5 4h10m-5-4h5' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E"); }
.sidebar-context-icon[data-icon='film'] { --context-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='3' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M7 3v18M17 3v18M3 8h4m-4 8h4m10-8h4m-4 8h4' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E"); }
.app-sidebar .sidebar-sport-item::before { display: none; }
.app-sidebar .sidebar-sports { margin: 12px 0 0; }
.app-sidebar .sidebar-categories, .app-sidebar .sidebar-footnote { display: none !important; }
.catalog-filters > .field:first-child { display: none; }
body[data-view='catalog'][data-mode='movie'] #channel-catalog, body[data-view='catalog'][data-mode='series'] #channel-catalog,
body[data-section='discover'] #channel-catalog, body[data-section='guide'] #channel-catalog,
body[data-section='discover'] #watch-history, body[data-section='guide'] #watch-history { display: none; }
body[data-mode='live'] .catalog-filters { justify-content: flex-end; margin-top: -58px; margin-bottom: 22px; }
body[data-mode='live'] .catalog-filters #quality-default-control { flex-basis: 200px; }
body[data-mode='live'] .catalog-filters select { min-height: 38px; padding-block: 8px; font-size: 11px; }
.channel-item:hover:where(body[data-input-modality="mouse"] *) { transform: none; }
.channel-item[data-kind='live'] { min-height: 254px; }
.channel-item[data-kind='live'] .channel-artwork { aspect-ratio: 16/9; background: var(--surface); border: 1px solid var(--line-soft); box-shadow: inset 0 1px #ffffff05; }
.channel-item[data-kind='live'] .channel-artwork img { width: 72px; height: 36px; max-width: 60%; max-height: 45%; object-fit: contain; border: 0; border-radius: 0; background: transparent; filter: none; box-shadow: none; }
.channel-item[data-kind='live'] .channel-initials { display: none; }
.channel-item[data-kind='live'] .live-badge { background: transparent; color: var(--text-faint); font-size: 8px; bottom: 5px; }
.channel-item[data-kind='live'] .channel-artwork::after, .channel-item[data-kind='live'] .channel-artwork::before { display: none; }
.channel-item[data-kind='live'] .channel-now { position: static; inset: auto; height: 72px; padding: 10px 2px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; gap: 4px; align-content: start; }
.channel-now small { font-size: 8px; letter-spacing: .1em; }
.channel-now strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 11px; line-height: 1.35; }
.channel-now span { font-size: 10px; }
.channel-artwork:has(img) .channel-initials { visibility: hidden; }
.sh-hero-football .sh-football-atmosphere { inset: 0; width: 100%; height: 100%; filter: brightness(.48); object-position: center 16%; opacity: .7; }
.sh-hero-football .sh-hero-art { width: calc(var(--sh-football-height) * 1.35); object-position: center 70%; }
.dx-heading { margin: 24px 0 36px; }
.dx-heading .eyebrow { margin-bottom: 12px; font-size: 10px; letter-spacing: .22em; }
.dx-heading h1 { margin: 0 0 12px; font-size: clamp(32px, 4vw, 52px); letter-spacing: -.045em; }
.dx-heading > p:last-child { color: var(--text-muted); font-size: 13px; line-height: 1.7; }
.dx-refinements { position: sticky; top: calc(var(--header-height, 80px) + 10px); z-index: 18; min-width: 0; margin-bottom: 22px; padding: 10px 14px; border: 1px solid var(--line-soft, #ffffff0d); border-radius: 16px; background: color-mix(in srgb, var(--canvas, #090a0c) 91%, transparent); box-shadow: 0 8px 24px #00000012; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.dx-refinement-header { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dx-filter-toggle { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 8px; min-height: var(--ui-control-size, 44px); padding: 8px 12px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text-muted); box-shadow: none; font-size: 12px; transition: color var(--motion-base, 220ms) ease, background-color var(--motion-base, 220ms) ease; }
.dx-filter-toggle:is(:hover:where(body[data-input-modality="mouse"] *), :focus-visible), .dx-filter-toggle[aria-expanded='true'] { color: var(--text); background: var(--hover); box-shadow: none; }
.dx-filter-toggle:focus-visible, .dx-filter-chip:focus-visible, .dx-refinement-header > .dx-reset:focus-visible { outline: 2px solid var(--accent-bright, #ed2639); outline-offset: 3px; }
.dx-filter-toggle-icon { flex: 0 0 17px; width: 17px; height: 17px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h7m5 0h6M3 12h12m5 0h1M3 18h2m5 0h11M10 3v6m5 0v6M5 15v6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.dx-filter-count { min-width: 20px; padding: 3px 5px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-bright, #ed2639); font-size: 10px; line-height: 1.2; }
.dx-active-filters { display: flex; align-items: center; gap: 7px; min-width: 0; overflow-x: auto; padding: 7px 1px 2px; scrollbar-width: thin; overscroll-behavior-x: contain; }
.dx-filter-chip { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 9px; max-width: min(320px, 70vw); min-height: 36px; padding: 7px 10px; border: 1px solid var(--line-soft, #ffffff0d); border-radius: 8px; background: var(--hover); color: var(--text-muted); box-shadow: none; text-align: left; font-size: 11px; line-height: 1.4; transition: color var(--motion-base, 220ms) ease, border-color var(--motion-base, 220ms) ease, background-color var(--motion-base, 220ms) ease; }
.dx-filter-chip > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-filter-chip:is(:hover:where(body[data-input-modality="mouse"] *), :focus-visible) { border-color: color-mix(in srgb, var(--accent) 30%, transparent); background: var(--accent-soft); color: var(--text); box-shadow: none; }
.dx-filter-chip-remove { position: relative; display: block; flex: 0 0 10px; width: 10px; height: 10px; opacity: .65; }
.dx-filter-chip-remove::before, .dx-filter-chip-remove::after { content: ''; position: absolute; inset: 4.5px 0 auto; height: 1px; border-radius: 1px; background: currentColor; transform: rotate(45deg); }
.dx-filter-chip-remove::after { transform: rotate(-45deg); }
.dx-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: end; max-height: min(340px, calc(100dvh - var(--header-height, 80px) - 160px)); overflow: auto; overscroll-behavior: contain; padding: 15px 2px 5px; margin-top: 8px; border-top: 1px solid var(--line-soft, #ffffff0d); scroll-margin-top: calc(var(--header-height, 80px) + 20px); }
.dx-filters[hidden], .dx-filter-count[hidden], .dx-active-filters[hidden], .dx-refinement-header > .dx-reset[hidden] { display: none; }
.dx-field { display: grid; gap: 8px; min-width: 0; }
.dx-field > span { font-size: 11px; color: var(--text-muted); }
.dx-field select { height: 44px; min-height: 44px; padding-block: 10px; font-size: 12px; }
.dx-reset { height: 44px; font-size: 12px; }
.dx-refinement-header > .dx-reset { flex: 0 0 auto; min-height: var(--ui-control-size, 44px); height: auto; padding: 8px 9px; border: 0; border-radius: 9px; background: transparent; color: var(--text-muted); box-shadow: none; font-size: 11px; font-weight: 400; white-space: nowrap; }
.dx-refinement-header > .dx-reset:is(:hover:where(body[data-input-modality="mouse"] *), :focus-visible) { color: var(--text); background: var(--hover); box-shadow: none; }
.dx-guide-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin: 22px 0 8px; }
.dx-guide-tools > span, .dx-rating-notice { font-size: 11px; line-height: 1.7; color: var(--text-muted); }
.dx-guide-refresh { min-height: 40px; font-size: 11px; }
.dx-guide-tools:has(.dx-ratings-refresh) { min-height: 44px; }
.dx-ratings-refresh { min-width: 170px; }
.dx-ratings-progress { display: inline-flex; align-items: center; gap: 9px; min-height: 24px; max-width: 64ch; }
.dx-ratings-progress[data-loading='true']::before { content: ''; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-bright, #ed2639); box-shadow: 0 0 13px #e8233b70; animation: dx-rating-pulse 1.1s ease-in-out infinite alternate; }
.dx-ratings-refresh:disabled { opacity: .58; cursor: default; }
@keyframes dx-rating-pulse { from { opacity: .3; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
.dx-status { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--text-muted); font-size: 11px; line-height: 1.6; }
.dx-results { overflow-anchor: none; }
.dx-poster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 30px 20px; }
/* Measured catalogue windows reserve identical text slots. Poster aspect ratio
   already reserves artwork space, including while an image is still loading. */
.dx-poster-grid[data-windowed='true'] > [data-window-key] { height: var(--catalog-window-item-height, auto); }
.dx-poster-grid[data-windowed='true'] .dx-card-copy > strong { min-height: 3em; max-height: 3em; }
.dx-poster-grid[data-windowed='true'] .dx-card-copy > small { min-height: 1.5em; line-height: 1.5; }
.dx-poster-grid[data-windowed='true'] .dx-ratings { min-height: 40px; max-height: 40px; }
.catalog-window-spacer { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 0; border: 0; pointer-events: none; overflow-anchor: none; }
.dx-title-card { min-width: 0; border: 0; background: transparent; box-shadow: none; padding: 0; text-align: left; border-radius: 10px; }
.dx-title-card:hover:where(body[data-input-modality="mouse"] *), .dx-title-card:active { background: transparent; }
.dx-channel-card .dx-poster { background: radial-gradient(ellipse at 50% 65%, var(--accent-soft), transparent 80%), var(--surface-elevated); }
.dx-channel-card .dx-poster img { width: min(72px, 60%); height: 36px; inset: 50% auto auto 50%; translate: -50% -50%; object-fit: contain; background: transparent; border: 0; border-radius: 0; filter: none; box-shadow: none; }
.dx-channel-card .dx-poster-fallback, :is(.dx-live-brand-row, .dx-live-member) .dx-poster-fallback { display: none; }
.dx-collection-card .dx-poster img { object-fit: cover; }
.dx-title-cell { position: relative; min-width: 0; }
.dx-title-cell > .dx-title-card { width: 100%; height: auto; }
.dx-title-cell > .dx-favorite-toggle { position: absolute; z-index: 4; top: 4px; right: 4px; display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 8px; background: linear-gradient(145deg, #090a0c55, #090a0c00); color: #f2efe8; box-shadow: none; opacity: .86; transform: none; transition: color 160ms ease, opacity 160ms ease; }
.dx-favorite-toggle .catalog-favorite-icon { display: block; width: 22px; height: 25px; background: currentColor; filter: drop-shadow(0 1px 3px #000b); -webkit-mask: var(--ui-favorite-outline, url('/assets/ui/favorito-play-contorno.svg')) center / contain no-repeat; mask: var(--ui-favorite-outline, url('/assets/ui/favorito-play-contorno.svg')) center / contain no-repeat; }
.dx-title-cell > .dx-favorite-toggle[aria-pressed='true'] { color: var(--accent-bright, #f02a3b); }
.dx-favorite-toggle[aria-pressed='true'] .catalog-favorite-icon { -webkit-mask-image: var(--ui-favorite-filled, url('/assets/ui/favorito-play-preenchido.svg')); mask-image: var(--ui-favorite-filled, url('/assets/ui/favorito-play-preenchido.svg')); }
.dx-title-cell > .dx-favorite-toggle:is(:hover:where(body[data-input-modality="mouse"] *), :focus-visible, :active) { opacity: 1; transform: none; box-shadow: none; }
.dx-title-cell > .dx-favorite-toggle:focus-visible { outline: 2px solid var(--text, #f2efe8); outline-offset: 3px; }
.dx-title-cell > .dx-favorite-toggle[aria-busy='true'] { opacity: .6; cursor: progress; }
.dx-poster { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 2/3; border-radius: 10px; background: var(--surface-elevated); overflow: hidden; }
.dx-poster img { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.dx-poster-fallback { color: var(--text-faint); font-size: 9px; letter-spacing: .12em; }
.dx-card-copy { display: grid; min-width: 0; gap: 7px; padding: 12px 1px 0; }
.dx-card-copy > strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 12px; line-height: 1.5; font-weight: 550; }
.dx-card-copy > small { font-size: 10px; color: var(--text-muted); }
.dx-ratings { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 12px; }
.dx-rating { font-size: 11px; }
.dx-title-card .dx-ratings { min-height: 40px; align-content: flex-start; }
.dx-rating-missing { color: var(--text-faint); background: transparent; padding-inline: 0; }
.dx-rating-attribution { color: inherit; text-decoration: underline; text-decoration-color: var(--line-soft); text-underline-offset: 3px; transition: color 160ms ease; }
.dx-rating-attribution:is(:hover:where(body[data-input-modality="mouse"] *), :focus-visible) { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .dx-ratings-progress[data-loading='true']::before { animation: none; } }
.dx-program-list { display: grid; gap: 0; }
.dx-program-row { display: flex; align-items: center; width: 100%; min-height: 94px; gap: 22px; border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; background: transparent; box-shadow: none; padding: 14px 10px; text-align: left; }
.dx-program-row:hover:where(body[data-input-modality="mouse"] *) { background: var(--hover); }
.dx-program-row .dx-poster { width: 90px; height: 54px; aspect-ratio: auto; flex: 0 0 90px; background: transparent; }
.dx-program-row .dx-poster img { object-fit: contain; max-width: 84%; max-height: 84%; }
.dx-program-row .dx-card-copy { flex: 1; gap: 6px; padding: 0; }
.dx-program-row .dx-card-copy > strong { color: var(--text-muted); font-size: 11px; }
.dx-program-name { font-size: 13px; }
.dx-program-row .dx-channel-options, .universal-copy > .universal-quality { color: var(--text-faint); font-size: 10px; line-height: 1.4; }
.dx-row-play { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 11px; }
.dx-row-play::before { content: ''; width: 11px; height: 13px; background: currentColor; mask: var(--ui-play) center / contain no-repeat; }
.dx-empty { padding: 42px 0; color: var(--text-muted); font-size: 13px; }
.dx-continuation { margin: 28px 0 12px; }
@property --hover-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes hls-hover-orbit { to { --hover-angle: 360deg; } }
:is(.cp-action,.dx-title-card,.service-nav-button,.cp-cover,#catalog-connect,.sh-channel-button) { position: relative; isolation: isolate; }
:is(.cp-action,.dx-title-card,.service-nav-button,.cp-cover,#catalog-connect,.sh-channel-button)::after { content: ''; position: absolute; inset: -1px; z-index: 2; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--hover-angle), transparent 0 66%, #e3133200 74%, #e3133260 85%, #f2efe8b0 92%, #e3133260 96%, transparent); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; pointer-events: none; transition: opacity .2s; }
:is(.cp-action,.dx-title-card,.service-nav-button,.cp-cover,#catalog-connect,.sh-channel-button):is(:hover:where(body[data-input-modality="mouse"] *),:focus-visible)::after { opacity: 1; animation: hls-hover-orbit 3s linear infinite; }
.channel-item .channel-artwork { transition: border-color .2s, box-shadow .2s; }
.channel-item:is(:hover:where(body[data-input-modality="mouse"] *),:focus-within) .channel-artwork { border-color: #e3133250; box-shadow: 0 0 22px #e3133214; }
.favorite-toggle:hover:where(body[data-input-modality="mouse"] *), .cp-save:hover:where(body[data-input-modality="mouse"] *) .cp-save-icon { box-shadow: 0 0 18px #e3133228, inset 0 0 10px #e3133212; }
@media (min-width: 721px) {
  body.connected:not(.mobile-shell-active) .app-main, body.hub-visible:not(.mobile-shell-active) .app-main, body.sidebar-collapsed.connected:not(.mobile-shell-active) .app-main, body.sidebar-collapsed.hub-visible:not(.mobile-shell-active) .app-main { margin-left: 96px; padding-left: 0; }
  .app-sidebar, body.sidebar-collapsed .app-sidebar { width: 60px; top: calc(var(--header-height) + 12px); bottom: 12px; overflow: hidden; padding: 0; transition: width .24s, background .24s; }
  #sidebar-toggle { margin-bottom: 14px; }
  .sidebar-navigation { gap: 3px; margin-bottom: 10px; }
  .sidebar-action, body.sidebar-collapsed .sidebar-action { width: 52px; padding: 10px 15px; justify-content: flex-start; white-space: nowrap; }
  .sidebar-action > .sidebar-label, body.sidebar-collapsed .sidebar-action > .sidebar-label, .sidebar-context-label { display: none; }
  .app-sidebar .sidebar-sports, body.sidebar-collapsed .sidebar-sports, body.sidebar-collapsed .sidebar-services, body.sidebar-collapsed .sidebar-live { display: grid; }
  .sidebar-family, .app-sidebar .sidebar-sport-item { width: 52px; padding: 8px 15px; }
  body.sidebar-peeking .app-sidebar { width: 224px; padding-right: 12px; background: linear-gradient(90deg, var(--sidebar-surface) 92%, transparent); }
  body.sidebar-peeking .sidebar-action, body.sidebar-peeking.sidebar-collapsed .sidebar-action, body.sidebar-peeking .sidebar-family, body.sidebar-peeking .sidebar-sport-item { width: 204px; }
  body.sidebar-peeking .sidebar-label, body.sidebar-peeking.sidebar-collapsed .sidebar-label, body.sidebar-peeking .sidebar-context-label { display: inline; }
  body.sidebar-peeking .sidebar-services { grid-template-columns: repeat(3, 56px); gap: 10px 8px; padding: 12px 8px; }
  .app-sidebar .sync-controls, body[data-view='catalog'][data-mode='live'] .app-sidebar .sync-controls { display: none; }
  body.sync-visible .app-sidebar .sync-controls { display: grid; position: fixed; z-index: 55; top: calc(var(--header-height) + 18px); left: 108px; width: 300px; max-height: calc(100dvh - var(--header-height) - 40px); overflow: auto; border: 1px solid var(--line); border-radius: 18px; padding: 22px; background: var(--sidebar-surface); box-shadow: var(--dialog-shadow); }
  body.connection-open .app-main, body.connection-open.sidebar-collapsed.connected .app-main, body.login-visible .app-main { margin-left: 0; padding: 0; }
}
@media (min-width: 981px) {
  html:has(body.login-visible) { overflow: hidden; height: 100dvh; }
  body.login-visible { position: fixed; inset: 0; overflow: hidden; height: 100dvh; }
  body.login-visible .app-main > :not(#login-screen):not(#library-notice) { display: none !important; }
  body.login-visible .shell { height: 100dvh; padding-top: var(--header-height); padding-bottom: 16px; }
  body.login-visible .app-main { height: 100%; }
  body.login-visible .login-screen { height: 100%; min-height: 0; padding: 12px 3vw; align-items: center; }
  body.login-visible .advanced-settings, body.login-visible .log-card, body.login-visible .note, body.login-visible #watch-history { display: none; }
  body.login-visible #library-notice { position: fixed; z-index: 50; bottom: 8px; left: 32px; right: 32px; margin: 0; }
  body.login-visible #channel-login { padding: 24px; gap: 15px; }
  body.login-visible .login-copy h1 { font-size: clamp(40px, 4.3vw, 68px); }
  body.login-visible .login-signature { margin-top: 32px; }
}
@media (min-width: 981px) and (max-height: 690px) {
  body.login-visible #channel-login { padding: 18px; gap: 10px; }
  body.login-visible .login-heading h2 { font-size: 26px; }
  body.login-visible .login-heading p { margin-top: 6px; }
  body.login-visible #channel-login input, body.login-visible #channel-login select { height: 39px; min-height: 39px; padding-block: 8px; }
  body.login-visible .login-copy h1 { font-size: 42px; }
  body.login-visible .login-signature { margin-top: 20px; }
  body.login-visible .login-copy .intro { margin-top: 20px; }
}
@media (max-width: 1180px) { .header-search { width: 230px; } .topbar { gap: 12px; } .brand { flex-basis: 155px; } .catalog-tabs button { padding-inline: 10px; } .dx-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-height: 720px) and (min-width: 721px) { .sidebar-action, body.sidebar-collapsed .sidebar-action { min-height: 36px; padding-block: 6px; } .service-nav-button { min-height: 30px; padding-block: 3px; } .sidebar-services { gap: 1px; } #sidebar-toggle { height: 36px; min-height: 36px; margin-bottom: 8px; } .sidebar-family, .app-sidebar .sidebar-sport-item { min-height: 31px; padding-block: 5px; } }
@media (max-width: 720px) {
  .header-search { width: 100%; }
  .header-search > .universal-results { left: 0; right: 0; width: 100%; max-height: calc(100dvh - var(--header-height) - 20px); }
  .dx-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .dx-refinements { top: calc(var(--header-height, 80px) + 6px); padding: 7px 9px; border-radius: 13px; }
  .dx-refinement-header { flex-wrap: wrap; gap: 0 8px; }
  .dx-filter-toggle { padding-inline: 8px; }
  .dx-refinement-header > .dx-status { flex-basis: 100%; order: 3; padding: 0 8px 3px; font-size: 10px; }
  .dx-refinement-header > .dx-reset { margin-left: auto; }
  .dx-filter-chip { min-height: var(--ui-control-size, 44px); }
  .dx-filters { max-height: min(280px, calc(100dvh - var(--header-height, 80px) - 180px)); }
  .dx-heading { margin-top: 8px; margin-bottom: 28px; }
  .dx-poster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .dx-program-row { padding-inline: 0; gap: 12px; }
  .dx-program-row .dx-poster { width: 54px; flex-basis: 54px; }
  .dx-row-play { font-size: 0; }
  .dx-row-play::before { width: 14px; height: 16px; }
  body.sidebar-open .sidebar-services { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  body.sidebar-open .service-nav-button { width: 100%; }
  body.sidebar-open .sidebar-context-label { display: inline; }
  body[data-mode='live'] .catalog-filters { margin: 0 0 20px; }
  body[data-mode='live'] .catalog-filters #quality-default-control { flex-basis: 100%; }
  .channel-item[data-kind='live'] { min-height: 238px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* Live discovery groups a broadcaster's original channels into one compact
   row. These classes belong only to that list and its channel picker. */
.dx-live-brand-cell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border-bottom: 1px solid var(--line-soft);
}
.dx-live-brand-cell:last-child { border-bottom-color: transparent; }
.dx-live-brand-row, .dx-live-member {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-width: 0;
  min-height: 76px;
  padding: 12px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  box-shadow: none;
  text-align: left;
  transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms cubic-bezier(.2, .75, .2, 1);
}
.dx-live-brand-row:is(:hover:where(body[data-input-modality="mouse"] *), :active), .dx-live-member:is(:hover:where(body[data-input-modality="mouse"] *), :active) { background: var(--hover); color: var(--text); box-shadow: none; }
.dx-live-brand-row:focus-visible, .dx-live-member:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
:is(.dx-live-brand-row, .dx-live-member) > .dx-poster {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 52px;
  width: 52px;
  height: 36px;
  aspect-ratio: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
:is(.dx-live-brand-row, .dx-live-member) > .dx-poster img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  padding: 0;
  object-fit: contain;
  object-position: center;
  filter: none;
}
:is(.dx-live-brand-row, .dx-live-member) > .dx-poster::after { border-radius: 3px; }
:is(.dx-live-brand-row, .dx-live-member) .dx-poster-fallback { color: var(--text-faint); font-size: 9px; letter-spacing: .1em; }
:is(.dx-live-brand-row, .dx-live-member) > .dx-card-copy { flex: 1 1 auto; min-width: 0; gap: 4px; padding: 0; }
:is(.dx-live-brand-row, .dx-live-member) .dx-card-copy > strong {
  display: block;
  overflow: hidden;
  min-width: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 550;
  line-height: 1.4;
  letter-spacing: -.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dx-live-brand-meta, .dx-live-member-summary {
  display: block;
  overflow: hidden;
  min-width: 0;
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 450;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dx-live-brand-now, .dx-live-member-now { display: block; overflow: hidden; color: var(--text-muted); font-size: 12px; font-weight: 400; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.dx-brand-open { display: flex; align-items: center; justify-content: center; flex: 0 0 24px; width: 24px; height: 24px; color: var(--text-faint); font-size: 0; }
.dx-brand-open svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dx-brand-open:empty::before { content: ''; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--ui-chevron) center / contain no-repeat; mask: var(--ui-chevron) center / contain no-repeat; }
.dx-live-brand-row:is(:hover:where(body[data-input-modality="mouse"] *), :focus-visible) .dx-brand-open { color: var(--text); }
.dx-brand-favorite {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 10px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-faint);
  box-shadow: none;
  cursor: pointer;
  transition: color 160ms ease, filter 180ms ease, background-color 180ms ease;
}
.dx-brand-favorite::before {
  content: '';
  display: block;
  width: 17px;
  height: 21px;
  background: currentColor;
  -webkit-mask: var(--ui-favorite-outline, url('/assets/ui/favorito-play-contorno.svg')) center / contain no-repeat;
  mask: var(--ui-favorite-outline, url('/assets/ui/favorito-play-contorno.svg')) center / contain no-repeat;
}
.dx-brand-favorite:has(svg, .catalog-favorite-icon)::before { display: none; }
.dx-brand-favorite > svg { display: block; width: 19px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.dx-brand-favorite .catalog-favorite-icon { display: block; width: 17px; height: 21px; background: currentColor; -webkit-mask: var(--ui-favorite-outline) center / contain no-repeat; mask: var(--ui-favorite-outline) center / contain no-repeat; }
.dx-brand-favorite[aria-pressed='true'] { color: var(--accent-bright); }
.dx-brand-favorite[aria-pressed='true']::before, .dx-brand-favorite[aria-pressed='true'] .catalog-favorite-icon { -webkit-mask-image: var(--ui-favorite-filled); mask-image: var(--ui-favorite-filled); }
.dx-brand-favorite[aria-pressed='true'] > svg { fill: currentColor; }
.dx-brand-favorite:is(:hover:where(body[data-input-modality="mouse"] *), :focus-visible):not(:disabled) { color: var(--accent-bright); background: color-mix(in srgb, var(--accent) 6%, transparent); box-shadow: none; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 28%, transparent)); }
.dx-brand-favorite:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
.dx-brand-favorite:is([aria-busy='true'], [aria-disabled='true']) { opacity: .55; cursor: progress; }
.dx-live-ranking-note { max-width: 960px; margin: 12px 0 20px; color: var(--text-faint); font-size: 11px; line-height: 1.65; }
.dx-live-ranking-note a { color: var(--text-muted); text-decoration-color: color-mix(in srgb, var(--text-muted) 40%, transparent); text-underline-offset: 3px; }
.dx-live-ranking-note a:hover:where(body[data-input-modality="mouse"] *) { color: var(--text); }
.dx-live-export, .dx-live-export-json { min-height: 38px; padding: 9px 14px; border-color: var(--line-soft); border-radius: 999px; background: var(--glass-background); color: var(--text-muted); box-shadow: var(--glass-shadow); font-size: 11px; font-weight: 500; line-height: 1.5; white-space: nowrap; }
.dx-live-export:is(:hover:where(body[data-input-modality="mouse"] *), :focus-visible), .dx-live-export-json:is(:hover:where(body[data-input-modality="mouse"] *), :focus-visible) { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background-color: var(--hover); color: var(--text); box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 10%, transparent); }
.dx-live-export svg, .dx-live-export-json svg { width: 14px; height: 14px; margin-right: 7px; fill: none; stroke: currentColor; stroke-width: 1.5; vertical-align: -2px; }
body[data-mode='live'][data-section='discover'] #catalog-discovery .dx-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.dx-guide-tools :is(.dx-live-export, .dx-live-export-json) { min-height: 40px; }

/* The member picker retains every original numbered, regional and quality
   option; only the list's visual row is grouped. */
dialog.dx-live-members {
  position: fixed;
  inset: 0;
  width: min(660px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 26px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--dialog-shadow), 0 0 40px color-mix(in srgb, var(--accent) 5%, transparent);
}
dialog.dx-live-members[open] { display: flex; flex-direction: column; animation: dx-live-members-enter 260ms cubic-bezier(.16, 1, .3, 1) both; }
dialog.dx-live-members::backdrop { background: rgb(5 6 9 / .64); backdrop-filter: blur(7px); }
dialog.dx-live-members[open]::backdrop { animation: dx-live-backdrop-enter 200ms ease both; }
.dx-live-members-heading { position: relative; display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; gap: 18px; margin: 0 0 18px; }
.dx-live-members-heading > div { min-width: 0; padding-top: 3px; }
.dx-live-members-heading h2 { overflow: hidden; margin: 0 0 7px; color: var(--text); font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -.035em; text-overflow: ellipsis; }
.dx-live-members-heading p { max-width: 480px; margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.6; }
.dx-live-members-close { position: relative; display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; min-height: 44px; padding: 11px; border: 0; border-radius: 50%; background: var(--hover); color: var(--text-muted); box-shadow: inset 0 1px color-mix(in srgb, var(--text) 5%, transparent); font-size: 0; }
.dx-live-members-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.dx-live-members-close:empty::before, .dx-live-members-close:empty::after { content: ''; position: absolute; width: 15px; height: 1.5px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
.dx-live-members-close:empty::after { transform: rotate(-45deg); }
.dx-live-members-close:hover:where(body[data-input-modality="mouse"] *) { background: var(--accent-soft); color: var(--text); }
.dx-live-member-search { display: block; flex: 0 0 auto; width: 100%; min-width: 0; min-height: 44px; height: 44px; padding: 11px 14px; margin: 0 0 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--field-surface); color: var(--text); font-size: 12px; line-height: 1.5; }
.dx-live-member-search::placeholder { color: var(--text-faint); }
.dx-live-member-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dx-live-members-list { display: grid; flex: 1 1 auto; gap: 1px; min-width: 0; min-height: 0; max-height: min(560px, calc(100dvh - 265px)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 6px; margin: 0 -4px; }
.dx-live-member-rows { display: contents; }
.dx-live-member-continuation { grid-column: 1 / -1; margin: 12px 0 4px; }
.dx-live-member-cell { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 6px; min-width: 0; border-bottom: 1px solid var(--line-soft); }
.dx-live-member-cell:last-child { border-bottom-color: transparent; }
.dx-live-member { min-height: 79px; gap: 14px; padding: 12px 8px; }
.dx-live-member > .dx-poster { flex-basis: 48px; width: 48px; height: 32px; }
.dx-live-member .dx-card-copy > strong { font-size: 13px; }
.dx-live-member-summary { font-size: 10px; }
.dx-live-member-now { font-size: 11px; }
.dx-live-members-state { padding: 22px 4px; color: var(--text-muted); font-size: 12px; line-height: 1.7; }
.dx-live-members-state[data-loading='true']::before, .dx-live-members-state[aria-busy='true']::before { content: ''; display: inline-block; width: 10px; height: 12px; margin-right: 10px; vertical-align: -1px; clip-path: polygon(0 0, 100% 50%, 0 100%); background: var(--accent); animation: dx-live-loading 1.4s ease-in-out infinite; }
.dx-live-members-state[data-state='error'] { color: var(--text-muted); }
.dx-live-brand-row::after, .dx-live-member::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--hover-angle), transparent 0 68%, color-mix(in srgb, var(--accent) 65%, transparent) 85%, color-mix(in srgb, var(--text) 65%, var(--accent)) 93%, var(--accent) 97%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.dx-live-brand-row:is(:hover:where(body[data-input-modality="mouse"] *), :focus-visible)::after, .dx-live-member:is(:hover:where(body[data-input-modality="mouse"] *), :focus-visible)::after { opacity: .65; animation: hls-hover-orbit 3s linear infinite; }
@media (hover: hover) and (pointer: fine) {
  .dx-live-brand-row:hover:where(body[data-input-modality="mouse"] *), .dx-live-member:hover:where(body[data-input-modality="mouse"] *) { transform: translateY(-1px); box-shadow: 0 4px 18px color-mix(in srgb, var(--accent) 7%, transparent); }
}
@keyframes dx-live-members-enter { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes dx-live-backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes dx-live-loading { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (max-width: 720px) {
  .dx-live-brand-row { gap: 12px; min-height: 82px; padding-inline: 3px; }
  .dx-live-brand-row > .dx-poster { flex-basis: 44px; width: 44px; height: 32px; }
  .dx-live-brand-row .dx-card-copy > strong { font-size: 13px; }
  .dx-live-brand-meta { font-size: 9px; }
  .dx-live-brand-now { font-size: 11px; }
  .dx-brand-open { flex-basis: 16px; width: 16px; }
  .dx-live-brand-cell { gap: 2px; }
  .dx-live-export, .dx-live-export-json { min-height: 40px; padding-inline: 12px; font-size: 10px; }
  body[data-mode='live'][data-section='discover'] #catalog-discovery .dx-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-mode='live'][data-section='discover'] #catalog-discovery .dx-filters .dx-reset { grid-column: 1 / -1; justify-self: start; min-width: 140px; }
  .dx-live-ranking-note { margin-top: 10px; font-size: 10px; }
  dialog.dx-live-members { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: 20px 16px; border-radius: 18px; }
  .dx-live-members-heading { gap: 10px; margin-bottom: 14px; }
  .dx-live-members-heading h2 { font-size: 22px; }
  .dx-live-members-heading p { font-size: 11px; }
  .dx-live-members-list { max-height: calc(100dvh - 250px); }
  .dx-live-member { min-height: 84px; gap: 10px; padding-inline: 3px; }
  .dx-live-member > .dx-poster { flex-basis: 40px; width: 40px; height: 30px; }
  .dx-live-member-cell { gap: 2px; }
}
html[data-theme='light'] :is(.dx-live-brand-row, .dx-live-member) > .dx-poster img { filter: none; }
html[data-theme='light'] dialog.dx-live-members::backdrop { background: rgb(21 22 26 / .37); }
@media (prefers-reduced-motion: reduce) {
  .dx-live-brand-row, .dx-live-member, .dx-brand-favorite, .dx-live-export, .dx-live-export-json, dialog.dx-live-members, dialog.dx-live-members::backdrop,
  .dx-live-brand-row::after, .dx-live-member::after, .dx-live-members-state::before { animation: none !important; transition: none !important; }
  .dx-live-brand-row:hover:where(body[data-input-modality="mouse"] *), .dx-live-member:hover:where(body[data-input-modality="mouse"] *) { transform: none; }
}
@media (forced-colors: active) {
  .dx-live-brand-cell, .dx-live-member-cell { border-bottom-color: CanvasText; }
  .dx-brand-favorite[aria-pressed='true'] { outline: 1px solid Highlight; }
  .dx-live-brand-row::after, .dx-live-member::after { display: none; }
  dialog.dx-live-members { border-color: CanvasText; }
}