/* Template-owned interaction surfaces. No account/plugin layout overrides. */
:root { color-scheme: dark; --tpl-accent: #d5c9b9; --tpl-panel: #242527; --tpl-text: #f1f2f5; --tpl-border: #ffffff24; --tpl-selected: #ffffff2b; --tpl-button: #ffffff1a; }
html[data-theme="light"] { color-scheme: light; --tpl-accent: #736452; --tpl-panel: #f6f5f3; --tpl-text: #292723; --tpl-border: #29272324; --tpl-selected: #2927231c; --tpl-button: #2927230c; }
html[data-theme] { --c-primary-hover: var(--tpl-accent); }
[hidden] { display: none !important; }
body { color: var(--tpl-text); padding-bottom: 0; }
button, input, select { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
:where(a, button, input, select):focus-visible { outline: 2px solid var(--tpl-accent); outline-offset: 4px; }
#siteHeader .nav__link:focus-visible { outline-color: var(--tpl-accent); }
.template-sr-only, .template-skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.template-skip:focus { position: fixed; top: 8px; left: 8px; padding: 12px; background: var(--tpl-panel); z-index: 100; }
.header { contain: layout style; }
.header__inner { gap: 20px; }
.header__logo img { width: 132px; height: 32px; object-fit: contain; }
.header__search { display: block !important; min-width: 180px; max-width: 340px; flex: 1; }
.search-form { display: flex !important; width: 100%; gap: 8px; align-items: center; }
.search-form__input { width: 100%; min-width: 0; }
.search-form__btn { width: 38px; height: 38px; flex-shrink: 0; }
.search-form__btn svg, .template-tools svg, .template-island svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.search-form__btn svg { width: 22px; height: 22px; }
.template-account { font-size: 14px; white-space: nowrap; }
.template-mobile-mark, .template-mobile-brand, .template-mobile-search, .template-mobile-menu, .template-mobile-categories { display: none; }
.featured-track { overflow-x: auto !important; scrollbar-width: thin; scroll-snap-type: x proximity; transform: none !important; }
.featured-track > .media-card { scroll-snap-align: start; flex-shrink: 0; }
.home-media-viewport { overflow-x: auto !important; scrollbar-width: thin; scroll-snap-type: x proximity; }
.banner__item[aria-hidden="true"] { pointer-events: none; }
.banner__dots button { border: 0; padding: 0; }
.banner__dot[aria-pressed="true"] { background: var(--tpl-accent); }
.catalog-results, [data-result-grid], #quickFindResults { height: auto !important; max-height: none !important; overflow: visible !important; }
[data-results] .vod-grid { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px 18px; }
[data-card-id] { min-width: 0; content-visibility: auto; contain-intrinsic-size: auto 320px; }
[data-card-id] .vod-card__cover { display: block; aspect-ratio: 2 / 3; position: relative; border-radius: 14px; overflow: hidden; }
[data-card-id] .vod-card__img { width: 100%; height: 100%; object-fit: cover; }
[data-card-id] .vod-card__info { padding: 10px 0; }
[data-card-id] .vod-card__title { font-size: 15px; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-card-id] .vod-card__meta { font-size: 12px; opacity: .7; }
.template-result-footer { padding: 24px 0; text-align: center; }
.template-result-footer p { padding: 8px 0; }
.catalog-page .template-load-more, .search-page .template-load-more,
.catalog-page [data-results-end], .search-page [data-results-end],
#quickFindResults .pagination { display: none; }
.template-load-more { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 160px; padding: 10px 24px; border-radius: 24px; font-weight: 650; }
.ui-primary-button { background: var(--tpl-selected) !important; color: var(--tpl-text) !important; border: 1px solid var(--tpl-border); box-shadow: none !important; }
.ui-primary-button:hover { background: var(--tpl-button) !important; }
.template-result-footer .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.template-result-footer .pagination__btn { background: var(--tpl-button); color: var(--tpl-text); border-color: var(--tpl-border); }
.template-result-footer .pagination__btn.is-active { background: var(--tpl-selected); }
.template-rank { padding: 32px; border: 1px solid var(--tpl-border); border-radius: 24px; background: var(--tpl-panel); }
.template-rank__head { padding-bottom: 24px; border-bottom: 1px solid var(--tpl-border); }
.template-rank__head h1 { font-size: 30px; margin: 12px 0; }
.template-rank__head p { font-size: 13px; opacity: .7; }
.template-rank__head p:first-child { font-size: 10px; letter-spacing: .2em; }
.template-rank__tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 20px 0; }
.template-rank__tabs a { padding: 10px 20px; border: 1px solid transparent; border-radius: 24px; }
.template-rank__tabs a:hover { color: var(--tpl-text); background: var(--tpl-button); }
.template-rank__tabs [aria-current="page"] { background: var(--tpl-selected); border-color: var(--tpl-border); }
.template-rank__period a { padding: 8px 12px; }
.template-rank__period span { margin-left: auto; font-size: 12px; opacity: .65; }
.template-rank__note { margin: 20px 0; font-size: 13px; opacity: .65; }
.template-rank__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px 14px; }
.template-rank__item { min-width: 0; position: relative; }
.template-rank__number { display: inline-block; padding: 6px 10px; margin-bottom: 10px; border-radius: 20px; background: var(--tpl-button); font-size: 11px; }
.template-rank__item:nth-child(-n+3) { padding: 16px; min-height: 280px; border: 1px solid var(--tpl-border); border-radius: 22px; background: linear-gradient(150deg,var(--tpl-selected),transparent 60%); }
.template-rank__item:nth-child(-n+3)::before { content: attr(data-rank-number); position: absolute; top: 65px; left: 12px; font-size: 96px; font-weight: 750; opacity: .12; pointer-events: none; }
.template-rank__item:nth-child(-n+3) .vod-card__cover { width: 84px; margin: 0 auto 20px; }
.template-rank__item:nth-child(-n+3) .vod-card__badge { display: none; }
.template-rank__item:nth-child(n+4) { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; padding: 12px 0; border-top: 1px solid var(--tpl-border); }
.template-rank__item:nth-child(n+4) .template-rank__number { margin: 0; background: none; white-space: nowrap; opacity: .65; }
.template-rank__item:nth-child(n+4) .vod-card { display: flex; align-items: center; gap: 16px; flex: 1; }
.template-rank__item:nth-child(n+4) .vod-card__cover { width: 48px; flex-shrink: 0; }
.template-rank__item:nth-child(n+4) .vod-card__badge { display: none; }
.template-rank-dialog { width: min(960px,calc(100% - 24px)); max-height: calc(100dvh - 36px); margin: auto; padding: 0; border: 1px solid var(--tpl-border); border-radius: 24px; background: var(--tpl-panel); color: var(--tpl-text); overscroll-behavior: contain; }
.template-rank-dialog::backdrop { background: #0009; }
.template-rank-dialog .template-rank { border: 0; border-radius: 0; }
.template-rank-dialog [data-rank-content] > p { padding: 64px 32px; }
.template-rank-close { position: absolute; top: 20px; right: 20px; z-index: 1; width: 40px; height: 40px; border: 1px solid var(--tpl-border); border-radius: 50%; background: var(--tpl-button); color: var(--tpl-text); font-size: 24px; cursor: pointer; }
html:has(.template-rank-dialog[open]) { overflow: hidden; }
[aria-busy="true"] { cursor: progress; }
[data-load-more][aria-disabled="true"] { opacity: .65; pointer-events: none; }
.template-result-error { color: #ffb4a9; }
.template-result-error button, .template-result-error a { margin: 0 5px; text-decoration: underline; }
#quickFindResults { padding-top: 24px; padding-bottom: 24px; }
.template-tools { position: fixed; right: 22px; bottom: 28px; z-index: 40; display: grid; gap: 10px; }
.template-tools button { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--tpl-border); border-radius: 50%; color: var(--tpl-text); background: var(--tpl-panel); }
.template-tools button:first-child { color: var(--tpl-text); background: var(--tpl-selected); }
.template-tools svg { width: 22px; height: 22px; }
.template-island { display: none; }
.template-native-player { width: 100%; min-height: 300px; aspect-ratio: 16 / 9; background: #000; border-radius: 18px; overflow: hidden; }
.template-native-player :where(iframe, video) { width: 100%; height: 100%; }
.template-native-player > div { height: 100%; }
.template-native-episodes { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0; }
.template-native-episodes a { padding: 10px 14px; border: 1px solid var(--tpl-border); border-radius: 10px; }
.template-native-episodes a[aria-current="page"] { border-color: var(--tpl-accent); color: var(--tpl-accent); }
.template-native-account { max-width: 900px; margin: 0 auto; padding: 24px; }
.template-native-account a { color: var(--tpl-accent); }
.template-native-account :where(input, button, select) { min-height: 40px; border: 1px solid var(--tpl-border); border-radius: 8px; padding: 8px 12px; }
/* Expensive full-screen blur is unnecessary for a reusable template. */
.header, .template-island { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
@media (max-width: 1100px) {
    .header__inner { gap: 12px; }
    .header__search { min-width: 140px; }
    [data-results] .vod-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
    body { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
    .header__nav { display: none !important; }
    #siteHeader .header__logo { display: flex; align-items: center; gap: 10px; min-width: 0; margin-right: auto; }
    #siteHeader .template-desktop-logo { display: none; }
    #siteHeader .template-mobile-mark { display: block; width: 28px; height: 28px; filter: none; }
    #siteHeader .template-mobile-brand { display: block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; }
    #siteHeader.header { top: calc(12px + env(safe-area-inset-top)); width: calc(100% - 24px); margin: 0 !important; border-radius: 18px; }
    .header__inner { padding: 10px 14px !important; }
    #siteHeader .header__search { display: none !important; position: absolute; inset: calc(100% + 8px) 0 auto; max-width: none; padding: 10px; border: 1px solid var(--tpl-border); border-radius: 16px; background: var(--tpl-panel); }
    #siteHeader.template-search-open .header__search { display: block !important; }
    .template-mobile-search, .template-mobile-menu { display: block; flex-shrink: 0; }
    .template-mobile-search, .template-mobile-menu summary { display: grid; place-items: center; width: 40px; height: 40px; cursor: pointer; list-style: none; }
    .template-mobile-menu summary::-webkit-details-marker { display: none; }
    .template-mobile-search svg, .template-mobile-menu svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
    .template-mobile-menu nav { position: absolute; top: calc(100% + 8px); right: 0; display: grid; width: min(280px,calc(100vw - 32px)); max-height: calc(100dvh - 120px); overflow-y: auto; padding: 10px; border: 1px solid var(--tpl-border); border-radius: 18px; background: var(--tpl-panel); }
    .template-mobile-menu nav a { padding: 12px 16px; border-radius: 10px; }
    .template-mobile-menu nav a:hover { background: var(--tpl-button); }
    #siteHeader.header { transition: transform .25s cubic-bezier(.22,1,.36,1); }
    #siteHeader.template-nav-hidden { transform: translate(-50%,calc(-100% - 32px)); }
    .header__search .search-form__input { min-height: 38px; padding: 8px; font-size: 14px; }
    .template-account { display: none; }
    .template-island { position: fixed; display: flex; align-items: center; justify-content: space-around; gap: 4px; width: min(calc(100% - 24px), 520px); height: 70px; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 45; border: 1px solid var(--tpl-border); border-radius: 26px; background: var(--tpl-panel); box-shadow: 0 8px 25px #0003; }
    .page-home-body .template-island { display: none; }
    .page-home-body.template-island-ready .template-island { display: flex; }
    .template-mobile-categories { display: flex; gap: 10px; margin: 12px 0 18px; overflow-x: auto; scrollbar-width: none; }
    .template-mobile-categories a { flex-shrink: 0; padding: 11px 20px; border: 1px solid var(--tpl-border); border-radius: 28px; font-size: 13px; background: var(--tpl-button); }
    .template-mobile-categories [aria-current] { background: #fff; color: #191c22; }
    .page-home #smartFilter { display: none; }
    .page-home .featured-track .media-card--featured { min-width: 0; max-width: none; flex: 0 0 calc((100% - 24px)/3); }
    .page-home .featured-track { gap: 12px; }
    .template-island a { display: grid; place-items: center; align-content: center; gap: 4px; min-width: 48px; min-height: 54px; padding: 5px 8px; border-radius: 18px; color: var(--tpl-text); font-size: 11px; white-space: nowrap; }
    .template-island svg { width: 22px; height: 22px; }
    .template-island [aria-current="page"] { color: var(--tpl-text); background: var(--tpl-selected); }
    .template-tools { right: 14px; bottom: calc(100px + env(safe-area-inset-bottom)); }
    .template-tools button { width: 38px; height: 38px; }
    .home-discovery-layout { display: grid; grid-template-columns: 1fr !important; gap: 20px; }
}
@media (max-width: 600px) {
    .template-rank { padding: 18px; }
    .template-rank__tabs a { padding: 9px 12px; }
    .template-rank__grid { gap: 12px 8px; }
    .template-rank__item:nth-child(-n+3) { padding: 10px; min-height: 230px; }
    .template-rank__item:nth-child(-n+3) .vod-card__cover { width: min(70px,100%); }
    .template-rank__item:nth-child(-n+3)::before { font-size: 64px; }
    [data-results] .vod-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; }
    [data-card-id] .vod-card__title { font-size: 13px; }
    [data-card-id] .vod-card__meta { font-size: 10px; }
    [data-card-id] { contain-intrinsic-size: auto 220px; }
    .header__logo img { width: 80px; }
    .header__inner { gap: 8px; }
    .template-native-player { min-height: 200px; border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}