.PcHeader_languageContent__XFTE1 {
								  display: none;
								}
								.PcHeader_languageContent__XFTE1.active {
								  display: block;
								  margin-top: 10px;
								}
								.PcHeader_languageItem__DDFfF {
								  margin: 5px 0;
								  cursor: pointer;
								}
								.PcHeader_rightBoxActive__VoRC_ img {
								  transform: rotate(180deg);
								}

						.MLanguage_languageBox__c7bpF {
      position: relative;
    }

    .MLanguage_languageContent__fSXSD {
      display: none;
      position: absolute;
      top: 50px;
      right: 0;
      background: white;
      border: 1px solid #ccc;
      padding: 10px;
      border-radius: 5px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      z-index: 100;
    }

    .MLanguage_languageItem__uC5mk {
      cursor: pointer;
    }

    .MLanguage_languageItem__uC5mk:hover {
      background-color: #f0f0f0;
    }

    .MLanguage_rightBox__V7A6C {
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
    }		
	
	
	
.EpisodeDialog_dialogContainer__JCOtQ {
    position: fixed;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    overflow: hidden;
    top: 0;
    left: 0;
    z-index: 100
}

.EpisodeDialog_dialogContainer__JCOtQ .EpisodeDialog_dialogMark__SOMVn {
    background-color: rgba(0,0,0,.7);
    width: 100%;
    height: 100%
}

.EpisodeDialog_dialogBox__LTeoZ {
    height: 7.99rem;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    z-index: 999;
    overflow-y: auto;
    border-radius: .24rem .24rem 0 0
}

.EpisodeDialog_dialogBox__LTeoZ .EpisodeDialog_headerTop__OthbP {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
    padding: .24rem .32rem 0
}

.EpisodeDialog_dialogBox__LTeoZ .EpisodeDialog_headerTop__OthbP .EpisodeDialog_topInfo__s6_g1 {
    display: flex;
    justify-content: space-between
}

.EpisodeDialog_dialogBox__LTeoZ .EpisodeDialog_headerTop__OthbP .EpisodeDialog_topInfo__s6_g1 .EpisodeDialog_closeIcon__7oU_s {
    width: .48rem;
    height: .48rem
}

.EpisodeDialog_dialogBox__LTeoZ .EpisodeDialog_headerTop__OthbP .EpisodeDialog_topInfo__s6_g1 .EpisodeDialog_title__lUtzm {
    font-size: .32rem;
    line-height: .42rem;
    font-weight: 500;
    color: rgba(0,0,0,.8);
    margin-bottom: .24rem
}

.EpisodeDialog_dialogBox__LTeoZ .EpisodeDialog_headerTop__OthbP .EpisodeDialog_titleTab__bWaCr {
    display: flex;
    margin-bottom: .24rem;
    white-space: nowrap;
    flex-wrap: wrap
}

.EpisodeDialog_dialogBox__LTeoZ .EpisodeDialog_headerTop__OthbP .EpisodeDialog_titleTab__bWaCr .EpisodeDialog_tabs__uFL6F {
    color: rgba(0,0,0,.6);
    font-size: .28rem
}

.EpisodeDialog_dialogBox__LTeoZ .EpisodeDialog_headerTop__OthbP .EpisodeDialog_titleTab__bWaCr .EpisodeDialog_tabs__uFL6F:after {
    content: "|";
    display: inline-block;
    width: 1px;
    height: .28rem;
    font-size: .28rem;
    color: rgba(0,0,0,.4);
    margin: 0 .16rem
}

.EpisodeDialog_dialogBox__LTeoZ .EpisodeDialog_headerTop__OthbP .EpisodeDialog_titleTab__bWaCr .EpisodeDialog_tabs__uFL6F:last-child:after {
    content: none
}

.EpisodeDialog_dialogBox__LTeoZ .EpisodeDialog_headerTop__OthbP .EpisodeDialog_titleTab__bWaCr .EpisodeDialog_tabTopActive__0NHcM {
    color: #ff375f
}

.EpisodeDialog_dialogBox__LTeoZ .EpisodeDialog_episodeList__WrvmV {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-column-gap: .1rem;
    grid-row-gap: .1rem;
    padding: 0 .32rem .8rem
}

.EpisodeDialog_dialogBox__LTeoZ .EpisodeDialog_episodeList__WrvmV .EpisodeDialog_episodeItem__Zvsgh {
    position: relative;
    display: inline-block;
    width: 1.3rem;
    height: 1rem;
    background-color: #f2f2f3;
    border: 1px solid rgba(50,50,57,.07);
    border-radius: .08rem;
    color: rgba(0,0,0,.8);
    font-weight: 500;
    line-height: 1rem;
    text-align: center;
    font-size: .28rem
}

.EpisodeDialog_dialogBox__LTeoZ .EpisodeDialog_episodeList__WrvmV .EpisodeDialog_episodeItem__Zvsgh .EpisodeDialog_episodeItemIcon__FnzOK {
    position: absolute!important;
    right: .08rem;
    top: .08rem;
    z-index: 1;
    width: .24rem;
    height: .24rem
}

.EpisodeDialog_dialogBox__LTeoZ .EpisodeDialog_episodeList__WrvmV .EpisodeDialog_episodeItemLock__y4bx2 {
    color: rgba(0,0,0,.4)
}

.EpisodeDialog_dialogBox__LTeoZ .EpisodeDialog_episodeList__WrvmV .EpisodeDialog_episodeItemActive__4Qf9i {
    color: #ff375f
}

.Agreement_agreementWrap__6CdQX {
    padding: 2.4rem .32rem 1.76rem
}

.Agreement_agreementWrap__6CdQX .Agreement_agreementBox__7g4wx .Agreement_agreementIntro__hCmDr {
    font-size: 14px;
    color: #000;
    white-space: pre-wrap;
    word-break: break-word
}

@media(min-width: 768px) {
    .Agreement_agreementWrap__6CdQX {
        padding:.4rem 0;
        width: 14.4rem;
        margin: 0 auto
    }

    .Agreement_agreementWrap__6CdQX .Agreement_agreementBox__7g4wx {
        background-color: rgba(50,50,57,.07);
        border-radius: .04rem;
        padding: .64rem
    }

    .Agreement_agreementWrap__6CdQX .Agreement_agreementBox__7g4wx .Agreement_agreementIntro__hCmDr {
        font-size: 14px;
        color: #000
    }
}
.RightList_linkText__86R_r {
            color: blue;
        }
        .RightList_linkTextActive__i__9F {
            color: red;
            font-weight: bold;
        }

/* =======================================================================
   THEME SYSTEM (dark default / light opt-in)
   ======================================================================= */
:root {
	--bg: #0b0b10;
	--bg-elevated: #16161d;
	--bg-card: #1c1c25;
	--bg-header: rgba(11,11,16,.96);
	--bg-input: rgba(255,255,255,.08);
	--text: rgba(255,255,255,.92);
	--text-secondary: rgba(255,255,255,.65);
	--text-tertiary: rgba(255,255,255,.42);
	--border: rgba(255,255,255,.09);
	--accent: #ff375f;
}

:root[data-theme="light"] {
	--bg: #ffffff;
	--bg-elevated: #ffffff;
	--bg-card: #f2f2f3;
	--bg-header: #ffffff;
	--bg-input: #ffffff;
	--text: rgba(0,0,0,.9);
	--text-secondary: rgba(0,0,0,.6);
	--text-tertiary: rgba(0,0,0,.4);
	--border: #eaeaeb;
	--accent: #ff375f;
}

html, body, #__next,
.home_homeWrap__OOn8U,
.search_searchWrap__4tSPy,
.Video_videoWrap__HUe7w,
.browse_browseBox__hZiZ_,
.film_detailWrap__N7Nge {
	background-color: var(--bg) !important;
	color: var(--text) !important;
}
.film_detailBox__pdSWY,
.film_catalogBox__0DHTA,
.pcEpisode_videoBox__658Je,
.EpisodeNav_navBox__4hDYg,
.mNav_popNavContent__ZiHqo,
.wapShare_shareBox__wiw2s,
.Video_videoHeader__rB_Ky {
	background-color: var(--bg-elevated) !important;
}

/* headers */
.MHeader_headerWrap__I8s6L .MHeader_homeHeaderBox__sT00I,
.PcHeader_navWrap__kKVZ8,
.film_detailHeader__oxs7K {
	background-color: var(--bg-header) !important;
	border-color: var(--border) !important;
}
.MHeader_navItem__zc4sl,
.PcHeader_navItem__BRAhp,
.PcHeader_navItemLabel__KpTG7,
.RightList_tabTitle__zvZRp,
.pcSeries_allCounts__Dp5zX,
.breadcrumb_crumbItem__gzO8K a {
	color: var(--text-secondary) !important;
}
.MHeader_active__EE2Mx,
.PcHeader_navItemActive__KexnK {
	color: var(--accent) !important;
}
.PcHeader_navItemLabel__KpTG7 {
	background-color: var(--bg-card) !important;
}

/* language dropdowns */
.MLanguage_languageContent__fSXSD,
.PcHeader_languageContent__XFTE1 {
	background-color: var(--bg-elevated) !important;
	box-shadow: 0 4px 16px rgba(0,0,0,.35) !important;
}
.MLanguage_languageContent__fSXSD:before,
.PcHeader_languageContent__XFTE1:before {
	border-color: transparent transparent var(--bg-elevated) !important;
}
.MLanguage_languageItem__uC5mk,
.PcHeader_languageItem__DDFfF,
.PcHeader_navItemTxt__k3llp {
	color: var(--text) !important;
}
.MLanguage_languageItem__uC5mk:hover {
	background-color: var(--bg-card) !important;
}

/* search box */
.search_navRight__RCdfn {
	background: var(--bg-input) !important;
}
.search_navRightInput__Z_cka {
	background: transparent !important;
	color: var(--text) !important;
}

/* section titles + poster cards (home, browse) */
.HomeTitle_titleText___rwoq,
.HomeTitle_moreBox__fZcQq,
.FirstList_bookName__cULmf,
.SwiperArea_bookName__PRLED,
.SwiperArea_chapterCount__Cx0P3,
.LikeList_bookName__Iz7zW,
.RankingsBookItem_bookName__kmTaH,
.pcSeries_episodeTitle__9I5WJ,
.film_bookName__ys_T3,
.film_introTitle__75SR3,
.breadcrumb_lastTxt__cdw0_,
.EpisodeDialog_title__lUtzm,
.search_searchHeader__bL0IU,
.MFooter_footerLabel__BYDje,
.PcFooter_footerLabel__nSgvh {
	color: var(--text) !important;
}
.SwiperArea_intro___hP_c,
.RankingsBookItem_intro__oRUOH,
.film_pcIntro__BB1Ox,
.LikeList_likeTitle__vblmQ,
.film_tagItem__qLwLn,
.typeTwoTag_leftTag__49wGv,
.MFooter_fText__8J0zi,
.PcFooter_company__s_7Bl {
	color: var(--text-secondary) !important;
}
.film_tagItem__qLwLn,
.typeTwoTag_leftTag__49wGv,
.PcHeader_navItemLabel__KpTG7,
.paginationCom_prevNoMore__k9A75,
.paginationCom_normalLi__YFrvZ,
.paginationCom_pageContent__wspPw .paginationCom_prevNoMore__k9A75,
.paginationCom_pageContent__wspPw .paginationCom_nextNoMore__24x_P,
.paginationCom_pageContent__wspPw .paginationCom_prevBtn__tSFZr,
.paginationCom_pageContent__wspPw .paginationCom_nextBtn__E0BGd,
.paginationCom_pageContent__wspPw .paginationCom_normalLi__YFrvZ,
.paginationCom_pageContent__wspPw .paginationCom_omission__2F81x,
.MorePagination_pageItem__847mF,
.MorePagination_linkItem__AQVsa {
	background-color: var(--bg-card) !important;
}
.paginationCom_pageContent__wspPw .paginationCom_prevNoMore__k9A75,
.paginationCom_pageContent__wspPw .paginationCom_nextNoMore__24x_P,
.paginationCom_pageContent__wspPw .paginationCom_prevBtn__tSFZr,
.paginationCom_pageContent__wspPw .paginationCom_nextBtn__E0BGd,
.paginationCom_pageContent__wspPw .paginationCom_normalLi__YFrvZ {
	color: var(--text) !important;
}
.pcSeries_pageNum__xkXBk,
.pcSeries_allCounts__Dp5zX {
	color: var(--text-tertiary) !important;
}
.pcSeries_listItem__sd0Xp {
	background-color: var(--bg-card) !important;
	border-color: var(--border) !important;
}
.pcSeries_title__R9vip {
	color: var(--text) !important;
}

/* episode dialog / lock list */
.EpisodeDialog_dialogBox__LTeoZ,
.EpisodeDialog_headerTop__OthbP {
	background-color: var(--bg-elevated) !important;
}
.EpisodeDialog_episodeItem__Zvsgh {
	background-color: var(--bg-card) !important;
	color: var(--text) !important;
	border-color: var(--border) !important;
}
.EpisodeDialog_episodeItemLock__y4bx2 {
	color: var(--text-tertiary) !important;
}
.RightList_rightBox__9OVp0 {
	background-color: var(--bg-card) !important;
}
.RightList_linkText__86R_r {
	background-color: var(--bg-elevated) !important;
	color: var(--text) !important;
}

/* footers */
.MFooter_footerBox__kd3X9,
.PcFooter_footerWrap__M1H43 {
	background-color: var(--bg-elevated) !important;
}

/* pagination */
.paginationCom_pageContent__wspPw,
.MorePagination_paginationWrap__2K3zJ {
	color: var(--text) !important;
}

/* privacy / terms pages */
.Agreement_agreementWrap__6CdQX,
.Agreement_agreementBox__7g4wx .Agreement_agreementIntro__hCmDr {
	color: var(--text-secondary) !important;
}
.Agreement_agreementWrap__6CdQX .Agreement_agreementBox__7g4wx {
	background-color: var(--bg-card) !important;
}

/* theme toggle button */
.ThemeToggle_btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: .48rem;
	height: .48rem;
	margin-right: .2rem;
	cursor: pointer;
	background: transparent;
	border: none;
	padding: 0;
}
.ThemeToggle_btn svg {
	width: .4rem;
	height: .4rem;
	stroke: var(--text);
}
.PcHeader_themeToggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: .36rem;
	height: .36rem;
	margin-right: .24rem;
	cursor: pointer;
}
.PcHeader_themeToggle svg {
	width: .28rem;
	height: .28rem;
	stroke: var(--text);
}
.ThemeToggle_iconSun { display: none; }
.ThemeToggle_iconMoon { display: block; }
[data-theme="light"] .ThemeToggle_iconSun { display: block; }
[data-theme="light"] .ThemeToggle_iconMoon { display: none; }

/* remaining text/pill classes found across the scraped stylesheets that
   still hardcoded a dark text color for the original light-only design */
.SwiperArea_leftBookName__RivVY,
.RankingsBookItem_bookLine2__ac9BK,
.pcEpisode_videoTitle__3jWfu,
.videoIntro_videoTit__bwDWf,
.popup_popupTitle__zr55S,
.relatedEpisode_relatedTitle__5tQl5,
.relatedEpisode_title__eygbR,
.episodeList_titleLeft__Fkqc7,
.episodeList_titleRight__JzF7F,
.pcSeries_viewMore__Saxsu,
.MFooter_footerLink__CSnLC,
.MFooter_footerLinkEmail__vD6L5,
.MFooter_communityItem__XZpak,
.MFooter_fmail__O_DA9,
.PcFooter_fmail__BjwO4,
.PcFooter_otherBtn__m9M9D,
.__404_mIntro__khyCH {
	color: var(--text) !important;
}
.ellipsisIntro_expand__SOTFq,
.ellipsisIntro_retractIntroBox__T4pgA,
.empty_emptyIntro__7HQ8_,
.episodeList_epiItemMask__3Pw9Z,
.episode_navBox__TMu74,
.film_innerPl__Ar2O5,
.film_innerPt__dVDtN,
.footerAd_intro__qTRK4,
.mNav_navItem__52zUr,
.mNav_popMark__1CxYD,
.MorePagination_pageItem__847mF,
.MorePagination_linkItem__AQVsa,
.pcEpisode_downloadMark__LJnDu,
.pcEpisode_tagBox__GdklB,
.pcEpisode_videoDesc__w9PEx,
.pcEpisode_videoScore__hUrWc,
.pcSeries_tabItem__1A_Pl,
.popup_notNow__ojXDW,
.popup_popupText__aROPz,
.RankingsBookItem_bookLine3__QuJkO,
.relatedEpisode_pageNum__W_ulP,
.RightList_rightTop__Blgm4,
.RightList_tabContent__E2D_a,
.share_shareLabel___KuFi,
.wapShare_shareLabel__5ftlF,
.SwiperNormal_bookName__gfFdz,
.SwiperNormal_chapterCount___nXvZ,
.SwiperNormal_intro___vMey,
.SwiperNormal_rightCardBottom__JuB0J,
.videoIntro_epoScore__GX_cP {
	color: var(--text-secondary) !important;
}
.pcEpisode_tagItem__AqYwI,
.videoIntro_tagItem__Yh9CL,
.LikeList_tagItem__1xulB,
.RankingsBookItem_bookLine3__QuJkO {
	background-color: var(--bg-card) !important;
}

/* =======================================================================
   HERO SLIDER (3D coverflow carousel)
   ======================================================================= */
.HeroSlider_wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 5rem;
	margin: 0 auto .08rem;
	max-width: 14.4rem;
	overflow: hidden;
}
.HeroSlider_track {
	position: relative;
	width: 100%;
	height: 100%;
}
.HeroSlider_card {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 3.2rem;
	height: 4.4rem;
	border-radius: .12rem;
	overflow: hidden;
	box-shadow: 0 .1rem .4rem rgba(0,0,0,.55);
	transition: transform .5s ease, opacity .5s ease, filter .5s ease;
	transform: translate(-50%,-50%) scale(.6);
	opacity: 0;
	z-index: 1;
	pointer-events: none;
}
.HeroSlider_card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.HeroSlider_card[data-pos="0"] {
	transform: translate(-50%,-50%) scale(1);
	opacity: 1;
	z-index: 5;
	pointer-events: auto;
}
.HeroSlider_card[data-pos="-1"] {
	transform: translate(calc(-50% - 2.6rem),-50%) scale(.82);
	opacity: .85;
	z-index: 4;
	filter: brightness(.55);
	pointer-events: auto;
}
.HeroSlider_card[data-pos="1"] {
	transform: translate(calc(-50% + 2.6rem),-50%) scale(.82);
	opacity: .85;
	z-index: 4;
	filter: brightness(.55);
	pointer-events: auto;
}
.HeroSlider_card[data-pos="-2"] {
	transform: translate(calc(-50% - 4.7rem),-50%) scale(.64);
	opacity: .5;
	z-index: 3;
	filter: brightness(.35);
	pointer-events: auto;
}
.HeroSlider_card[data-pos="2"] {
	transform: translate(calc(-50% + 4.7rem),-50%) scale(.64);
	opacity: .5;
	z-index: 3;
	filter: brightness(.35);
	pointer-events: auto;
}
.HeroSlider_arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: .64rem;
	height: .64rem;
	border-radius: 50%;
	background: rgba(0,0,0,.45);
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	color: #fff;
}
.HeroSlider_arrow:hover {
	background: rgba(0,0,0,.65);
}
.HeroSlider_arrowPrev {
	left: .16rem;
}
.HeroSlider_arrowNext {
	right: .16rem;
}
.HeroSlider_arrow svg {
	width: .32rem;
	height: .32rem;
}
.HeroSlider_caption {
	text-align: center;
	color: var(--text);
	font-size: .32rem;
	font-weight: 600;
	margin-bottom: .32rem;
	padding: 0 .32rem;
}

/* =======================================================================
   HOME CATEGORY ROWS AS SWIPEABLE/DRAGGABLE CAROUSELS (mobile + desktop)
   scoped to home_homeWrap so browse.php's paginated grid is unaffected
   ======================================================================= */
.home_homeWrap__OOn8U .FirstList_firstListBox__eN_W1 {
	display: flex !important;
	grid-template-columns: none !important;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	gap: .16rem;
	cursor: grab;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.home_homeWrap__OOn8U .FirstList_firstListBox__eN_W1::-webkit-scrollbar {
	display: none;
}
.home_homeWrap__OOn8U .FirstList_firstListBox__eN_W1.CarouselRow_dragging {
	cursor: grabbing;
	scroll-snap-type: none;
}
.home_homeWrap__OOn8U .FirstList_firstListBox__eN_W1 .FirstList_itemBox__AfNNm {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

/* =======================================================================
   PROVIDER TOGGLE (Browse: ReelShort / NetShort)
   ======================================================================= */
.ProviderToggle_wrap {
	display: flex;
	gap: .16rem;
	margin: .24rem 0;
	position: relative;
	z-index: 20;
}
.search_searchWrap__4tSPy .ProviderToggle_wrap {
	margin-top: .8rem;
}
.ProviderToggle_btn {
	padding: .12rem .32rem;
	border-radius: .32rem;
	font-size: .24rem;
	font-weight: 500;
	background-color: var(--bg-card);
	color: var(--text-secondary);
	border: 1px solid var(--border);
}
.ProviderToggle_btn.ProviderToggle_active {
	background-color: #ff375f;
	color: #fff;
	border-color: #ff375f;
}

/* =======================================================================
   TELEGRAM MINI APP SHELL  (px-based, mobile-first — independent of the
   scraped flexible-rem system so shared header/nav render consistently)
   ======================================================================= */
:root { --app-nav-h: 58px; }

/* The scraped content wraps had big top padding to clear the OLD fixed header.
   The new sticky app-header sits in flow, so remove that gap. */
.home_homeWrap__OOn8U,
.browse_browseBox__hZiZ_,
.search_searchWrap__4tSPy,
.film_detailWrap__N7Nge,
.Video_videoWrap__HUe7w {
	padding-top: 6px !important;
}

/* Match the scraped pages' font stack on the new mini-app pages */
html, body,
.AppPage, .AppHeader_bar, .AppNav_bar, .Feed_wrap,
.LoginModal_box {
	font-family: PingFangSC, "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

/* ---- App header ---- */
.AppHeader_bar {
	position: sticky; top: 0; z-index: 200;
	display: flex; align-items: center; gap: 8px;
	padding: 8px 10px; padding-top: calc(8px + env(safe-area-inset-top));
	background: var(--bg-header);
	backdrop-filter: saturate(140%) blur(8px);
	-webkit-backdrop-filter: saturate(140%) blur(8px);
	border-bottom: 1px solid var(--border);
}
.AppHeader_logo { flex: 0 0 auto; display: flex; align-items: center; }
.AppHeader_logo img { height: 30px; width: auto; display: block; border-radius: 6px; }
.AppHeader_search {
	flex: 1 1 auto; display: flex; align-items: center; gap: 6px;
	background: var(--bg-input); border-radius: 999px; padding: 7px 12px; min-width: 0;
}
.AppHeader_search svg { width: 16px; height: 16px; color: var(--text-tertiary); flex: 0 0 auto; }
.AppHeader_search input {
	flex: 1 1 auto; min-width: 0; border: none; outline: none; background: transparent;
	color: var(--text); font-size: 13px;
}
.AppHeader_search input::placeholder { color: var(--text-tertiary); }
.AppHeader_iconBtn {
	flex: 0 0 auto; width: 36px; height: 36px; border: none; background: transparent;
	color: var(--text); display: flex; align-items: center; justify-content: center;
	cursor: pointer; border-radius: 50%; font-size: 20px; line-height: 1;
}
.AppHeader_iconBtn:active { background: var(--bg-card); }
.AppHeader_iconBtn svg { width: 20px; height: 20px; }
.AppHeader_flagBtn { font-size: 20px; }
.AppHeader_lang { position: relative; flex: 0 0 auto; }
.AppHeader_langMenu {
	position: absolute; right: 0; top: 44px; z-index: 300; display: none;
	min-width: 172px; max-height: 60vh; overflow-y: auto;
	background: var(--bg-elevated); border: 1px solid var(--border);
	border-radius: 12px; padding: 6px; box-shadow: 0 12px 32px rgba(0,0,0,.4);
}
.AppHeader_langMenu.is-open { display: block; }
.AppHeader_langItem {
	display: flex; align-items: center; gap: 10px; padding: 9px 10px;
	border-radius: 8px; font-size: 13px; color: var(--text); cursor: pointer; white-space: nowrap;
}
.AppHeader_langItem:active { background: var(--bg-card); }
.AppHeader_langItem.is-active { color: var(--accent); font-weight: 600; }
.AppHeader_flag { font-size: 18px; }

/* ---- Bottom nav ---- */
.AppNav_bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 250;
	display: flex; align-items: stretch;
	height: calc(var(--app-nav-h) + env(safe-area-inset-bottom));
	padding-bottom: env(safe-area-inset-bottom);
	background: var(--bg-header);
	backdrop-filter: saturate(140%) blur(8px);
	-webkit-backdrop-filter: saturate(140%) blur(8px);
	border-top: 1px solid var(--border);
}
.AppNav_item {
	flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 3px; color: var(--text-tertiary); text-decoration: none; font-size: 10px;
}
.AppNav_item.is-active { color: var(--accent); }
.AppNav_ico svg { width: 23px; height: 23px; display: block; }
.AppNav_label { line-height: 1; }
.AppNav_spacer { height: calc(var(--app-nav-h) + env(safe-area-inset-bottom)); }

/* ---- Back button in header ---- */
.AppHeader_back { margin-right: 2px; flex: 0 0 auto; }

/* ---- Continue-watching bar (replaces nav on drama page) ---- */
.ContinueBar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 250;
	padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
	background: var(--bg-header);
	backdrop-filter: saturate(140%) blur(8px);
	-webkit-backdrop-filter: saturate(140%) blur(8px);
	border-top: 1px solid var(--border);
}
.ContinueBar_btn {
	width: 100%; border: none; cursor: pointer;
	display: flex; align-items: center; justify-content: center; gap: 8px;
	height: 46px; border-radius: 24px;
	background: var(--accent); color: #fff;
	font-size: 15px; font-weight: 700;
}
.ContinueBar_btn:active { opacity: .9; }
.ContinueBar_btn svg { width: 20px; height: 20px; }
.ContinueBar_spacer { height: calc(62px + env(safe-area-inset-bottom)); }

/* ---- Banner slots ---- */
.AdSlot_wrap { margin: 10px 12px; text-align: center; }
.AdSlot_wrap img { max-width: 100%; height: auto; }
.AdSlot_ph {
	background: linear-gradient(135deg,#5b5b66,#3a3a44); color: #fff;
	font-weight: 800; letter-spacing: 1px; font-size: 20px;
	height: 68px; display: flex; align-items: center; justify-content: center;
	border-radius: 10px; opacity: .85;
}

/* ---- 3D coin ---- */
.CoinIcon { width: 1em; height: 1em; vertical-align: -0.15em; display: inline-block; }

/* ---- Home: "Anda Mungkin Suka" 2-grid infinite scroll ---- */
.YML_sec { padding: 4px 12px 0; }
.YML_head { font-size: 18px; font-weight: 800; color: var(--text); margin: 14px 0 12px; }
.YML_grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.YML_card { display: block; text-decoration: none; }
.YML_thumb { position: relative; width: 100%; aspect-ratio: 3/4; border-radius: 10px; overflow: hidden; background: var(--bg-card); }
.YML_thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.YML_ep {
	position: absolute; left: 6px; bottom: 6px; z-index: 2;
	background: rgba(0,0,0,.6); color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 999px;
}
.YML_title { margin: 7px 2px 0; font-size: 13px; line-height: 1.25; color: var(--text);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.YML_loader { text-align: center; color: var(--text-tertiary); font-size: 13px; padding: 18px 0 6px; }
.YML_spin { width: 22px; height: 22px; border: 2px solid var(--border); border-top-color: var(--accent);
	border-radius: 50%; animation: ymlspin .8s linear infinite; margin: 0 auto; }
@keyframes ymlspin { to { transform: rotate(360deg); } }

/* ---- For You (TikTok) feed ---- */
.Feed_wrap {
	position: fixed; left: 0; right: 0; top: 0; bottom: 0;
	overflow-y: scroll; scroll-snap-type: y mandatory; background: #000;
	-webkit-overflow-scrolling: touch;
}
.Feed_slide {
	position: relative; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always;
	display: flex; align-items: center; justify-content: center; overflow: hidden; background: #000;
}
.Feed_video, .Feed_poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.Feed_poster { z-index: 1; }
.Feed_video { z-index: 2; }
.Feed_shade { position: absolute; inset: 0; z-index: 3; pointer-events: none;
	background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 42%); }
.Feed_playpause { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; }
.Feed_playpause svg { width: 74px; height: 74px; color: rgba(255,255,255,.85); opacity: 0; transition: opacity .2s; }
.Feed_slide.is-paused .Feed_playpause svg { opacity: 1; }
.Feed_meta { position: absolute; left: 14px; right: 78px; bottom: calc(var(--app-nav-h) + 20px); z-index: 6; color: #fff; }
.Feed_title { font-size: 17px; font-weight: 800; margin-bottom: 6px; }
.Feed_genre { font-size: 13px; color: rgba(255,255,255,.8); margin-bottom: 12px; }
.Feed_desc { font-size: 13px; color: rgba(255,255,255,.85); margin-bottom: 12px; line-height: 1.45; display: none; }
.Feed_desc.show { display: block; }
.Feed_descText { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.Feed_desc.open .Feed_descText { -webkit-line-clamp: unset; }
.Feed_descMore { background: none; border: none; color: #fff; font-weight: 700; font-size: 13px; padding: 2px 0 0; cursor: pointer; }
.Feed_topbar { justify-content: space-between; }
.Feed_langBtn { background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; padding: 0; }
.Feed_langMenu { position: absolute; right: 10px; top: 48px; z-index: 9; display: none; min-width: 170px; max-height: 62vh; overflow-y: auto;
	background: rgba(20,20,26,.97); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 6px; }
.Feed_langMenu.is-open { display: block; }
.Feed_langMenu .AppHeader_langItem { color: #fff; }
.Feed_watchBtn {
	display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
	background: linear-gradient(90deg,#f40065,#ff871f); color: #fff; font-weight: 700; font-size: 14px;
	padding: 10px 18px; border-radius: 999px;
}
.Feed_watchBtn svg { width: 16px; height: 16px; }
.Feed_rail { position: absolute; right: 12px; bottom: calc(var(--app-nav-h) + 20px); z-index: 6;
	display: flex; flex-direction: column; gap: 20px; align-items: center; }
.Feed_railBtn { display: flex; flex-direction: column; align-items: center; gap: 4px;
	background: none; border: none; color: #fff; cursor: pointer; }
.Feed_railBtn svg { width: 30px; height: 30px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.Feed_railBtn.is-on { color: var(--accent); }
.Feed_railBtn span { font-size: 11px; }
.Feed_muteHint { position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
	z-index: 6; background: rgba(0,0,0,.5); color: #fff; font-size: 12px; padding: 6px 12px; border-radius: 999px; }
.Feed_topbar { position: absolute; top: env(safe-area-inset-top); left: 0; right: 0; z-index: 7;
	display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.Feed_back { background: none; border: none; color: #fff; padding: 0; cursor: pointer; }
.Feed_back svg { width: 26px; height: 26px; }
.Feed_brand { color: #fff; font-weight: 800; font-size: 16px; }

/* ---- Generic app page frame (new pages) ---- */
.AppPage { min-height: 100vh; background: var(--bg); color: var(--text); }
.AppPage_body { padding: 0 0 6px; }
.AppSec_title { font-size: 17px; font-weight: 800; margin: 16px 12px 10px; color: var(--text); }
.AppSec_more { float: right; font-size: 13px; color: var(--text-tertiary); font-weight: 500; }

/* ---- Profil ---- */
.Prof_top { display: flex; align-items: center; gap: 14px; padding: 18px 16px 14px; }
.Prof_avatar { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; background: var(--bg-card);
	border: 2px solid var(--border); }
.Prof_name { font-size: 19px; font-weight: 800; color: var(--text); }
.Prof_uid { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.Prof_login { margin-left: auto; background: var(--accent); color: #fff; border: none; font-weight: 700;
	padding: 9px 18px; border-radius: 999px; font-size: 14px; cursor: pointer; text-decoration: none; }
.Prof_card { margin: 6px 14px 14px; border-radius: 14px; padding: 14px 16px;
	background: linear-gradient(120deg,#f6e2b3,#e8c579); color: #4a3410; }
.Prof_cardHead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.Prof_cardTitle { font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 7px; }
.Prof_tIco { width: 18px; height: 18px; color: #ffcf6b; flex: none; }
.Prof_join { background: #7a5a1e; color: #ffedc2; border-radius: 999px; padding: 5px 14px; font-size: 12px; font-weight: 700; text-decoration:none; }
.Prof_perks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; font-size: 12px; }
.Prof_perk { display: flex; align-items: center; gap: 7px; }
.Prof_perk svg, .Prof_pIco { width: 16px; height: 16px; flex: none; color: var(--accent); vertical-align: middle; }
.Prof_mIco { width: 20px; height: 20px; flex: none; color: var(--text-secondary); }
.Prof_wallet { margin: 0 14px 14px; background: var(--bg-card); border-radius: 14px; padding: 16px; }
.Prof_walletHead { display: flex; justify-content: space-between; align-items: center; color: var(--text-secondary); font-size: 13px; margin-bottom: 12px; }
.Prof_walletRow { display: flex; align-items: center; gap: 22px; }
.Prof_wBig { font-size: 22px; font-weight: 800; color: var(--text); }
.Prof_wLbl { font-size: 12px; color: var(--text-tertiary); }
.Prof_topup { margin-left: auto; background: #2fd27a; color: #06331d; border: none; font-weight: 800;
	padding: 9px 18px; border-radius: 999px; font-size: 13px; cursor: pointer; }
.Prof_menu { margin: 0 14px; }
.Prof_menuItem { display: flex; align-items: center; gap: 12px; padding: 15px 4px; border-bottom: 1px solid var(--border);
	color: var(--text); font-size: 15px; text-decoration: none; }
.Prof_menuItem .Prof_chev { margin-left: auto; color: var(--text-tertiary); }

/* ---- Hadiah (rewards) ---- */
.Rw_hero { text-align: left; padding: 18px 16px 6px; }
.Rw_heroTitle { font-size: 22px; font-weight: 900; color: var(--text); line-height: 1.2; }
.Rw_heroTitle b { color: #f5a623; }
.Rw_balance { margin: 12px 14px; background: var(--bg-card); border-radius: 14px; padding: 16px;
	display: flex; align-items: center; justify-content: space-between; }
.Rw_balLbl { font-size: 15px; color: var(--text-secondary); }
.Rw_balVal { display: flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 800; color: var(--text); }
.Rw_panel { margin: 12px 14px; background: var(--bg-card); border-radius: 14px; padding: 16px; }
.Rw_panelHead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.Rw_panelTitle { font-weight: 800; font-size: 16px; color: var(--text); }
.Rw_panelSub { font-size: 12px; color: var(--text-tertiary); margin-bottom: 12px; }
.Rw_tiers { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.Rw_tiers::-webkit-scrollbar { display: none; }
.Rw_tier { flex: 0 0 auto; width: 62px; text-align: center; }
.Rw_tierCoin { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; padding: 10px 0 6px; }
.Rw_tier.is-active .Rw_tierCoin { border-color: var(--accent); }
.Rw_tierAmt { font-size: 15px; font-weight: 800; color: #f5a623; margin-top: 4px; }
.Rw_tierTime { font-size: 11px; color: var(--text-tertiary); margin-top: 6px; }
.Rw_claimAll { width: 100%; margin-top: 14px; border: none; border-radius: 12px; padding: 14px;
	font-size: 15px; font-weight: 800; color: #4a3410; background: linear-gradient(90deg,#ffcf5b,#f5a623); cursor: pointer; }
.Rw_task { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--border); }
.Rw_task:first-of-type { border-top: none; }
.Rw_taskInfo { flex: 1 1 auto; }
.Rw_taskCoins { font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 5px; }
.Rw_taskName { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.Rw_taskBtn { flex: 0 0 auto; border: none; border-radius: 999px; padding: 9px 20px; font-weight: 800; font-size: 13px;
	color: #fff; background: linear-gradient(90deg,#ff7a18,#ff375f); cursor: pointer; }
.Rw_taskBtn.is-done { background: var(--bg-elevated); color: var(--text-tertiary); }

/* ---- Daftar Putar (history/saved) ---- */
.Dp_grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 0 12px; }
.Dp_card { text-decoration: none; }
.Dp_thumb { position: relative; width: 100%; aspect-ratio: 3/4; border-radius: 10px; overflow: hidden; background: var(--bg-card); }
.Dp_thumb img { width: 100%; height: 100%; object-fit: cover; }
.Dp_ep { position: absolute; right: 6px; bottom: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 6px; }
.Dp_name { margin: 6px 2px 0; font-size: 12px; color: var(--text); line-height: 1.25;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.Dp_empty { text-align: center; color: var(--text-tertiary); padding: 60px 24px; }
.Dp_empty svg { width: 54px; height: 54px; opacity: .5; margin-bottom: 14px; }

/* ---- Login modal ---- */
.LoginModal_mask { position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,.6);
	display: none; align-items: center; justify-content: center; padding: 24px; }
.LoginModal_mask.is-open { display: flex; }
.LoginModal_box { width: 100%; max-width: 340px; background: var(--bg-elevated); border-radius: 16px;
	padding: 24px 20px; text-align: center; }
.LoginModal_ico { width: 54px; height: 54px; border-radius: 50%; background: var(--bg-card);
	display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.LoginModal_ico svg { width: 26px; height: 26px; color: var(--accent); }
.LoginModal_title { font-size: 17px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.LoginModal_text { font-size: 13px; color: var(--text-secondary); margin-bottom: 18px; line-height: 1.5; }
.LoginModal_btn { width: 100%; border: none; border-radius: 12px; padding: 13px; font-weight: 800; font-size: 15px;
	color: #fff; background: var(--accent); cursor: pointer; margin-bottom: 8px; }
.LoginModal_cancel { width: 100%; border: none; background: transparent; color: var(--text-tertiary);
	font-size: 14px; padding: 8px; cursor: pointer; }

/* =======================================================================
   TIKTOK-STYLE VIDEO PAGE (single drama, episode drop-up)
   ======================================================================= */
.Vid_wrap { position: fixed; inset: 0; background: #000; overflow: hidden; }
/* .Vid_slide groups video + action rail + meta + time bar so they all slide as
   one unit (TikTok-style pull). Topbar + episode handle stay fixed outside it. */
.Vid_slide { position: absolute; inset: 0; will-change: transform; }
.Vid_stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
@keyframes vidSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes vidSlideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.Vid_slide.slide-up-enter { animation: vidSlideUp .4s cubic-bezier(.16,.84,.44,1); }
.Vid_slide.slide-down-enter { animation: vidSlideDown .4s cubic-bezier(.16,.84,.44,1); }
.Vid_poster, .Vid_video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.Vid_poster { z-index: 1; }
.Vid_video { z-index: 2; background: #000; }
.Vid_shade { position: absolute; inset: 0; z-index: 3; pointer-events: none;
	background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,0) 45%); }
.Vid_playpause { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.Vid_playpause svg { width: 74px; height: 74px; color: rgba(255,255,255,.85); opacity: 0; transition: opacity .2s; }
.Vid_wrap.is-paused .Vid_playpause svg { opacity: 1; }
.Vid_topbar { position: absolute; top: env(safe-area-inset-top); left: 0; right: 0; z-index: 8;
	display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.Vid_back { background: none; border: none; color: #fff; padding: 0; cursor: pointer; }
.Vid_back svg { width: 26px; height: 26px; }
.Vid_epTag { color: #fff; font-size: 14px; font-weight: 700; }
.Vid_rail { position: absolute; right: 12px; bottom: 150px; z-index: 7;
	display: flex; flex-direction: column; gap: 20px; align-items: center; }
.Vid_railBtn { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; color: #fff; cursor: pointer; }
.Vid_railBtn svg { width: 30px; height: 30px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.Vid_railBtn.is-on { color: var(--accent); }
.Vid_railBtn span { font-size: 11px; }
.Vid_meta { position: absolute; left: 14px; right: 78px; bottom: 92px; z-index: 7; color: #fff; }
.Vid_title { font-size: 17px; font-weight: 800; margin-bottom: 6px; cursor: pointer; }
.Vid_desc { font-size: 13px; color: rgba(255,255,255,.85); line-height: 1.45; cursor: pointer; }
.Vid_descText { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.Vid_desc.open .Vid_descText { -webkit-line-clamp: unset; }
/* drop-up handle */
.Vid_epsHandle { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7;
	display: flex; align-items: center; justify-content: center; gap: 8px;
	height: 52px; padding-bottom: env(safe-area-inset-bottom);
	background: rgba(0,0,0,.5); color: #fff; border: none; font-size: 14px; font-weight: 700; cursor: pointer; }
.Vid_epsHandle svg { width: 16px; height: 16px; }
/* unlock overlay */
.Vid_lock { position: absolute; inset: 0; z-index: 9; display: none; flex-direction: column;
	align-items: center; justify-content: center; gap: 14px; background: rgba(0,0,0,.72); color: #fff; text-align: center; padding: 24px; }
.Vid_lock.show { display: flex; }
.Vid_err { position: absolute; inset: 0; z-index: 9; display: none; flex-direction: column;
	align-items: center; justify-content: center; gap: 14px; background: rgba(0,0,0,.8); color: #fff; text-align: center; padding: 24px; }
.Vid_err.show { display: flex; }
/* full-page load error (server-side) */
.VidErr_page { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 16px; padding: 28px; text-align: center; }
.VidErr_page svg { width: 54px; height: 54px; color: var(--accent, #ff375f); opacity: .9; }
.VidErr_msg { font-size: 15px; line-height: 1.55; max-width: 300px; color: rgba(255,255,255,.88); margin: 0; }
.VidErr_actions { display: flex; gap: 12px; margin-top: 4px; }
.VidErr_btn { border: 1px solid rgba(255,255,255,.28); background: transparent; color: #fff; font-size: 14px; font-weight: 700;
	padding: 11px 22px; border-radius: 999px; cursor: pointer; }
.VidErr_btn--primary { background: var(--accent, #ff375f); border-color: transparent; }
.VidErr_btn:active { opacity: .85; }
.Vid_err svg { width: 46px; height: 46px; opacity: .9; }
.Vid_errMsg { font-size: 14px; max-width: 280px; line-height: 1.5; color: rgba(255,255,255,.9); }
.Vid_lock svg { width: 46px; height: 46px; opacity: .9; }
.Vid_lock p { font-size: 14px; max-width: 280px; line-height: 1.5; color: rgba(255,255,255,.85); }
.Vid_lockBtn { background: linear-gradient(90deg,#f40065,#ff871f); color: #fff; font-weight: 800; border: none;
	padding: 12px 26px; border-radius: 999px; font-size: 15px; cursor: pointer; }
/* episode sheet (drop-up) */
.Vid_sheetMask { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.5); display: none; }
.Vid_sheetMask.open { display: block; }
.Vid_sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-height: 72vh; overflow-y: auto;
	background: var(--bg-elevated); border-radius: 16px 16px 0 0; transform: translateY(100%); transition: transform .28s ease;
	padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.Vid_sheet.open { transform: translateY(0); }
.Vid_sheetHead { position: sticky; top: 0; background: var(--bg-elevated); display: flex; align-items: center; justify-content: space-between;
	padding: 16px; border-bottom: 1px solid var(--border); }
.Vid_sheetTitle { font-size: 15px; font-weight: 800; color: var(--text); }
.Vid_sheetClose { background: none; border: none; color: var(--text-secondary); font-size: 22px; cursor: pointer; line-height: 1; }
.Vid_epGrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 16px; }
.Vid_epCell { position: relative; aspect-ratio: 1/.82; border-radius: 8px; background: var(--bg-card); border: 1px solid var(--border);
	color: var(--text); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; cursor: pointer; }
.Vid_epCell.is-active { border-color: var(--accent); color: var(--accent); }
.Vid_epCell.is-lock { color: var(--text-tertiary); }
.Vid_epCell .Vid_epLock { position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; }
/* time / seek bar */
.Vid_timebar { position: absolute; left: 14px; right: 14px; bottom: 60px; z-index: 7;
	display: flex; align-items: center; gap: 8px; }
.Vid_timeLabel { font-size: 11px; color: rgba(255,255,255,.85); min-width: 30px; text-align: center;
	text-shadow: 0 1px 2px rgba(0,0,0,.6); font-variant-numeric: tabular-nums; }
.Vid_timeTrack { position: relative; flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.3); cursor: pointer; }
.Vid_timeTrack::before { content: ''; position: absolute; left: 0; right: 0; top: -9px; bottom: -9px; }
.Vid_timeFill { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 4px; background: var(--accent); }
.Vid_timeFill::after { content: ''; position: absolute; right: -5px; top: 50%; transform: translateY(-50%);
	width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
/* auto-hide controls */
.Vid_topbar, .Vid_rail, .Vid_meta, .Vid_timebar, .Vid_epsHandle { transition: opacity .28s ease; }
.Vid_wrap.controls-hidden .Vid_topbar,
.Vid_wrap.controls-hidden .Vid_rail,
.Vid_wrap.controls-hidden .Vid_meta,
.Vid_wrap.controls-hidden .Vid_timebar,
.Vid_wrap.controls-hidden .Vid_epsHandle { opacity: 0; pointer-events: none; }