/* ==========================================================================
   Kai layout skin
   Dark streaming layout: floating header bar, full-width featured hero,
   two-column content + sidebar, poster grids, player + episode list watch view.
   Loaded after the legacy stylesheets; overrides them where they collide.
   ========================================================================== */

:root {
	--kai-bg: #0c1116;
	--kai-bg-2: #11161b;
	--kai-bg-3: #181d22;
	--kai-bg-4: #20262c;
	--kai-line: rgba(255, 255, 255, .07);
	--kai-text: #fff;
	--kai-muted: rgba(255, 255, 255, .5);
	--kai-dim: rgba(255, 255, 255, .38);
	--kai-primary: #e45f3a;
	--kai-primary-hover: #ea7756;
	--kai-primary-soft: rgba(228, 95, 58, .14);
	--kai-link: #ef9f89;
	--kai-green: #36cb68;
	--kai-radius: 16.8px;
	--kai-radius-sm: 8.4px;
	--kai-header-h: 63px;
	--kai-header-top: 21px;
	--kai-sidebar-w: min(25%, 400px);
	--kai-gap: 28px;
	--kai-font: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	/* Legacy stylesheets colour buttons/links with --accent (admin default is purple). */
	--accent: var(--kai-primary);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html { scroll-padding-top: calc(var(--kai-header-h) + var(--kai-header-top) + 10px); }
body {
	background: var(--kai-bg);
	color: var(--kai-text);
	font-family: var(--kai-font);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
a { color: #fff; transition: color .15s ease; }
a:hover, a:focus { color: var(--kai-primary); text-decoration: none; }
::selection { background: var(--kai-primary); color: #000; }

/* Inner pages: teal → purple wash behind the header that fades into the page colour. */
body:not(.home):not(.page-template-home-page) {
	background-color: var(--kai-bg);
	background-image:
		linear-gradient(180deg, rgba(12, 17, 22, 0) 0, rgba(12, 17, 22, 0) 150px, var(--kai-bg) 650px),
		linear-gradient(90deg, #194c61 0%, #1c0e37 100%);
	background-repeat: no-repeat;
	background-size: 100% 650px, 100% 650px;
}
img { max-width: 100%; }

#wrapper { padding-top: calc(var(--kai-header-h) + var(--kai-header-top) * 2); min-height: 100vh; }
body.home #wrapper,
body.page-template-home-page #wrapper,
body.single-drama #wrapper,
body.single-post #wrapper { padding-top: 0; }
body.home .kai-home:not(:has(#featured)),
body.page-template-home-page .kai-home:not(:has(#featured)) { padding-top: calc(var(--kai-header-h) + var(--kai-header-top) * 2); }

.container { max-width: 1868px; padding-left: 27px; padding-right: 27px; }

.btn { border-radius: var(--kai-radius-sm); font-family: var(--kai-font); }
.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active {
	background: var(--kai-primary);
	border-color: var(--kai-primary);
	color: #000;
	font-weight: 500;
}
.btn-primary:hover, .btn-primary:focus {
	background: var(--kai-primary-hover);
	border-color: var(--kai-primary-hover);
	color: #000;
	box-shadow: none;
}
.form-control {
	background: var(--kai-bg-3);
	border: 1px solid var(--kai-line);
	color: #fff;
	border-radius: var(--kai-radius-sm);
}
.form-control:focus {
	background: var(--kai-bg-4);
	border-color: rgba(228, 95, 58, .5);
	color: #fff;
	box-shadow: none;
}
.form-control::placeholder { color: var(--kai-dim); }

.alert { border-radius: var(--kai-radius-sm); border: 1px solid var(--kai-line); }
.alert-info, .alert-secondary, #text-home .alert {
	padding: 14px;
	border: 1px solid #afeac3;
	border-radius: var(--kai-radius-sm);
	background: #d7f5e1;
	color: #16512a;
	font-size: 14px;
}

/* --------------------------------------------------------------------------
   Two-column layout (home .dual-col and every legacy #main-content page)
   -------------------------------------------------------------------------- */
#main-wrapper { margin-bottom: 0; min-height: 0; padding-bottom: 40px; padding-top: 24px; }
.dual-col,
#main-wrapper > .container:has(> #main-sidebar) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--kai-sidebar-w);
	gap: var(--kai-gap);
	align-items: start;
}
#main-wrapper.kai-home > .container,
#main-wrapper.layout-page > .container { display: block; }
#main-wrapper > .container > .clearfix,
.dual-col > .clearfix { display: none; }
#main-content, #main-sidebar {
	float: none !important;
	width: auto !important;
	min-width: 0;
	margin-bottom: 0;
}
#main-wrapper.kai-home,
#main-wrapper.layout-page { padding-top: 0; }
.kai-home .dual-col { padding-top: 24px; }
.kai-home #featured + .container { position: relative; z-index: 6; }
.kai-home #featured + .container > .dual-col { margin-top: -70px; padding-top: 0; }
.layout-page .dual-col { padding-top: 34px; }
.scontent > * { margin-bottom: 0; }
.scontent > * + * { margin-top: 32px; }
.scontent > [style*="display:none"] + * { margin-top: 0; }

/* --------------------------------------------------------------------------
   Header — floating bar
   -------------------------------------------------------------------------- */
#header.kai-header {
	position: absolute;
	top: var(--kai-header-top);
	left: 0;
	right: 0;
	height: var(--kai-header-h);
	padding: 0;
	z-index: 100;
	background: transparent;
	transition: top .25s ease;
}
.kai-header > .container { max-width: none; height: 100%; padding: 0 27px; }
.kai-header .nav-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0;
	height: 100%;
	padding: 0 28px;
	border-radius: 16px;
	background: #0c1116;
}
.kai-header .nav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #fff;
	line-height: 1;
	flex: 0 0 auto;
}
.kai-header .nav-btn:hover, .kai-header .nav-btn:focus { color: var(--kai-primary); background: transparent; box-shadow: none; }
.kai-header #nav-menu-btn { font-size: 21px; }
/* Home: hamburger and logo sit closer to the bar's left edge */
body.home .kai-header #nav-menu-btn,
body.page-template-home-page .kai-header #nav-menu-btn { margin-left: -26.6px; padding-right: 26.6px; }
body.home #header .brand#logo,
body.page-template-home-page #header .brand#logo { margin-left: 1px; }
.kai-header .brand,
#header .brand#logo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	float: none;
	margin: 0 auto 0 30px;
	height: auto;
}
.kai-header .brand img,
#header #logo.brand img { height: 40px; width: auto; max-width: 190px; object-fit: contain; }

/* Search */
.kai-header #search {
	position: relative;
	float: none;
	width: 450px;
	max-width: 36vw;
	margin: 0;
	display: block;
}
.kai-header #search-btn { display: none; font-size: 19px; }
.kai-header #search .inner { position: relative; }
.kai-header #search form {
	display: flex;
	align-items: center;
	height: 35px;
	padding: 0 17px 0 15px;
	gap: 10px;
	border-radius: 13px;
	background: #181d22;
	border: 0;
}
.kai-header #search form > i { color: #fff; font-size: 17px; }
.kai-header #search .search-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 14px;
	outline: none;
	box-shadow: none;
}
.kai-header #search .search-input::placeholder { color: #6b7075; opacity: 1; }
/* Neutralise the legacy pill input (+ its mobile accent fill) and typeahead's wrapper / hint clone. */
.kai-header #search .twitter-typeahead { display: block !important; flex: 1 1 auto; min-width: 0; height: 100%; }
.kai-header #search .search-content input.search-input,
.kai-header #search .tt-hint,
.kai-header #search .tt-input {
	width: 100%;
	height: 100%;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none !important;
	color: #fff;
	font-size: 14px;
}
.kai-header #search .tt-hint { color: transparent; }
.kai-header #search .filter-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
	padding: 0;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}
.kai-header #search .filter-link i { font-size: 13px; }
.kai-header #search .filter-link:hover { color: var(--kai-primary); }
.kai-header #search-suggest {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	right: 0;
	z-index: 120;
	max-height: 70vh;
	overflow-y: auto;
	padding: 6px;
	background: var(--kai-bg-3);
	border: 1px solid var(--kai-line);
	border-radius: var(--kai-radius-sm);
	box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
}
#search-suggest .result a, #search-suggest .nav-item { color: var(--kai-text); border-radius: var(--kai-radius-sm); }
#search-suggest .nav-item:hover, #search-suggest .result a:hover { background: rgba(255, 255, 255, .05); }
#search-suggest .film-name, #search-suggest .film-name a { color: #fff; font-size: 13px; }
#search-suggest .film-infor, #search-suggest .alias-name { color: var(--kai-dim); font-size: 12px; }
#search-suggest .nav-bottom { background: var(--kai-primary); color: #000; border-radius: var(--kai-radius-sm); }

/* Main menu.
   Below 1636px: hamburger opens a panel under the bar; Genres / Types expand on click.
   From 1636px: links sit inline in the bar; Genres / Types open as hover panels. */
.kai-header .nav-menu > ul,
.kai-header .nav-menu > ul > li > ul { margin: 0; list-style: none; }
.kai-header .nav-menu > ul > li { position: relative; }
.kai-header .nav-menu > ul > li > a {
	position: relative;
	color: #fff;
	font-size: 16.1px;
	font-weight: 400;
	text-transform: uppercase;
}
.kai-header .nav-menu > ul > li > a::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	display: block;
	width: 0;
	height: 2px;
	background: var(--kai-primary);
	transition: width .2s;
}
.kai-header .nav-menu > ul > li > a:hover,
.kai-header .nav-menu > ul > li > a:focus { color: #fff; }
.kai-header .nav-menu > ul > li > a:hover::after,
.kai-header .nav-menu > ul > li.open > a::after { width: 50%; }
.kai-header .nav-menu > ul > li > ul > li > a { display: block; color: rgba(255, 255, 255, .6); font-size: 14px; }
.kai-header .nav-menu > ul > li > ul > li > a:hover { color: var(--kai-primary); }

@media (max-width: 1635.98px) {
	.kai-header .nav-menu {
		position: absolute;
		top: 100%;
		left: 1px;
		z-index: 110;
		margin-top: 7px;
		border-radius: var(--kai-radius);
		overflow: hidden;
	}
	.kai-header .nav-menu > ul {
		display: none;
		max-height: calc(100vh - var(--kai-header-h) - var(--kai-header-top) - 20px);
		overflow-y: auto;
		padding: 14px 21px 21px;
		background: var(--kai-bg-3);
	}
	.kai-header .nav-menu.active > ul { display: block; }
	.kai-header .nav-menu > ul > li > a { display: block; width: 100%; padding-top: 9.8px; }
	.kai-header .nav-menu > ul > li.d-md-none { display: none; }
	.kai-header .nav-menu > ul > li > ul { display: none; padding: 14px 0; }
	.kai-header .nav-menu > ul > li.open > ul { display: block; }
	.kai-header .nav-menu > ul > li > ul::after { content: ""; display: block; clear: both; }
	.kai-header .nav-menu > ul > li > ul > li { float: left; width: 100%; }
	.kai-header .nav-menu > ul > li > ul.c4 { width: 280px; }
	.kai-header .nav-menu > ul > li > ul.c4 > li { width: 50%; }
	.kai-header .nav-menu > ul > li > ul > li > a { padding: 4.2px 0; }
}

@media (min-width: 1636px) {
	.kai-header #nav-menu-btn { display: none; }
	.kai-header .brand,
	#header .brand#logo { margin-left: 0; }
	.kai-header .nav-menu { position: static; margin-left: 28px; }
	.kai-header .nav-menu > ul { display: flex; padding: 0; }
	.kai-header .nav-menu > ul > li.d-md-none { display: none !important; }
	.kai-header .nav-menu > ul > li > a { margin-right: 28px; }
	/* Hover bridge so the pointer can travel from the link to its panel */
	.kai-header .nav-menu > ul > li:hover::after { content: ""; position: absolute; top: 100%; left: 0; display: block; width: 100%; height: 7px; }
	.kai-header .nav-menu > ul > li > ul {
		position: absolute;
		top: 150%;
		left: 0;
		z-index: 99;
		display: block;
		padding: 21px 28px;
		border-radius: var(--kai-radius);
		background: #1c2228;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .075);
		opacity: .005;
		pointer-events: none;
		transition: top .1s, opacity .1s;
	}
	.kai-header .nav-menu > ul > li:hover > ul { top: calc(100% + 7px); opacity: 1; pointer-events: auto; }
	.kai-header .nav-menu > ul > li > ul::after { content: ""; display: block; clear: both; }
	.kai-header .nav-menu > ul > li > ul > li { float: left; }
	.kai-header .nav-menu > ul > li > ul.c4 { width: 602px; }
	.kai-header .nav-menu > ul > li > ul.c4 > li { width: 25%; }
	.kai-header .nav-menu > ul > li > ul.c1 { width: 140px; }
	.kai-header .nav-menu > ul > li > ul.c1 > li { width: 100%; }
	.kai-header .nav-menu > ul > li > ul > li > a { padding: 7px 0; }
	.kai-header .nav-wrapper .lang-sw { margin-left: 0; }
	body.home #header .brand#logo,
	body.page-template-home-page #header .brand#logo { margin-left: -26.6px; }
}

.kai-header .shuffle-btn { margin-left: 27px; font-size: 20px; }

/* EN / JP switch */
.kai-header .lang-sw {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	margin-left: 29px;
	padding: 0;
	border-radius: 16px;
	background: #181d22;
	cursor: pointer;
	user-select: none;
	width: auto;
	height: 31px;
	float: none;
}
.kai-header .lang-sw span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 41px;
	height: 31px;
	border-radius: 16px;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	transition: background .2s;
}
.kai-header .lang-sw.off span[data-lang="en"],
.kai-header .lang-sw:not(.off) span[data-lang="jp"] { background: #e45f3a; color: #fff; }
.kai-header .lang-sw::before, .kai-header .lang-sw::after { display: none; }

/* User */
.kai-header .nav-user,
#header .nav-user#header_right { flex: 0 0 auto; display: flex; align-items: center; float: none; height: auto; margin: 0 0 0 29px; padding: 0; }
.kai-header #user-slot .btn-login,
#header #user-slot .btn-user.btn-login {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	min-width: 0;
	height: 30px;
	padding: 0;
	margin: 0;
	line-height: 1;
	border-radius: 50%;
	background: #1c2228;
	border: 0;
	color: #fff;
	font-size: 13px;
	cursor: pointer;
}
.kai-header #user-slot .btn-login:hover { background: #262d34; color: #fff; }
/* Legacy header draws an extra user glyph on .btn-user at small widths. */
#header.kai-header .btn-login::after { content: none; display: none; }
.kai-header .header_right-user { float: none; margin: 0; }
.kai-header .ts-user-toggle { height: 36px; line-height: 36px; min-width: 0; padding: 0 14px; border-radius: 18px; font-size: 13px; }
.kai-header #m-search { display: none !important; }

/* --------------------------------------------------------------------------
   Featured hero
   -------------------------------------------------------------------------- */
#featured { position: relative; background: var(--kai-bg); overflow: hidden; }
#featured #featuredSwiper { position: relative; height: 700px; overflow: hidden; }
#featured .swiper-wrapper { position: relative; height: 100%; }
#featured .swiper-slide {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background-color: var(--kai-bg);
	background-repeat: no-repeat;
	background-position: 100% 0;
	background-size: 90% 100%;
	border-radius: 0;
}
#featured .swiper-slide::before,
#featured .swiper-slide::after { content: ""; position: absolute; left: 0; pointer-events: none; }
/* Left wash keeps the text readable; bottom wash melts into the page. */
#featured .swiper-slide::before {
	top: 0;
	bottom: 0;
	width: 70%;
	background: linear-gradient(90deg, #0c1116 20%, rgba(12, 17, 22, .8) 60%, rgba(12, 17, 22, .5) 70%, rgba(12, 17, 22, 0) 100%);
}
#featured .swiper-slide::after {
	bottom: 0;
	width: 100%;
	height: 350px;
	background: linear-gradient(180deg, rgba(12, 17, 22, 0) 0%, #0c1116 100%);
}
#featured .swiper-slide > .container { position: relative; z-index: 5; width: 100%; }
#featured .detail { max-width: 770px; margin-bottom: 126px; }
#featured .detail .title {
	max-height: 98px;
	margin: 0;
	color: #fff;
	font-size: 36.4px;
	font-weight: 600;
	line-height: 49px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
#featured .detail .info { gap: 0; margin-bottom: 18px; }
#featured .detail .info > span + span { margin-left: 14px; }
#featured .detail .desc {
	margin: 0;
	padding: 11px 0;
	color: #fff;
	font-size: 14px;
	line-height: 21px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
#featured .mics {
	display: flex;
	max-width: 400px;
	margin-bottom: 28px;
	padding: 14px 19.6px;
	border-radius: var(--kai-radius-sm);
	background: #000;
}
#featured .mics > div { flex-grow: 1; min-width: 0; padding: 0; }
#featured .mics > div > div { margin: 0; color: #fff; opacity: .7; font-size: 12.6px; }
#featured .mics > div > span { color: #fff; font-size: 18.2px; font-weight: 500; }
#featured .swiper-ctrl { display: flex; align-items: center; gap: 0; }
#featured .watch-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 270px;
	padding: 9.8px 16.8px;
	border: 0;
	border-radius: 8px;
	background: var(--kai-primary) !important;
	color: #fff !important;
	font-size: 19.6px;
	font-weight: 500;
	line-height: 1.5;
	text-transform: uppercase;
	transition: background-color .3s;
}
#featured .watch-btn:hover { background: #b83c19 !important; }
#featured .watch-btn i { display: none; }
#featured .info-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 18px;
	padding: 0;
	background: transparent;
	color: #fff;
	font-size: 22.4px;
}
#featured .info-btn:hover { color: var(--kai-green); }

#featured .featured-nav {
	position: absolute;
	right: 0;
	bottom: 126px;
	width: 100%;
	z-index: 6;
	pointer-events: none;
}
#featured .featured-nav-wrap { display: flex; align-items: center; justify-content: flex-end; }
#featured .featured-nav-wrap > div {
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, .6);
	text-shadow: 1px 1px 10px #000;
	cursor: pointer;
	pointer-events: auto;
	transition: color .3s;
}
#featured .featured-nav-wrap > div + div { margin-left: 14px; }
#featured .featured-nav-wrap > div:hover { color: #fff; }
#featured .featured-prev i,
#featured .featured-next i { font-size: 22.4px; }
#featured .featured-pagination { align-items: baseline !important; gap: 0; cursor: default !important; }
#featured .featured-pagination span { padding: 0 14px; font-size: 14px; }
#featured .featured-pagination .sep { padding: 0; }
#featured .featured-pagination .swiper-pagination-current { color: #fff; font-size: 22.4px; font-weight: 500; }

/* --------------------------------------------------------------------------
   Section heads + tabs
   -------------------------------------------------------------------------- */
.shead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
	min-height: 32px;
}
.shead .stitle {
	display: inline-flex;
	align-items: center;
	margin: 0;
	color: #fff;
	font-size: 21px;
	font-weight: 500;
	line-height: 1.5;
	white-space: nowrap;
}
.shead.lg .stitle { text-transform: uppercase; }
.shead .stitle i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	margin-right: 7px;
	border-radius: 50%;
	background: var(--kai-primary);
	color: #fff;
	font-size: 12.6px;
}
.shead-r { display: flex; align-items: center; gap: 0; }
.snav { display: flex; align-items: center; gap: 0; }
.snav .tab {
	padding: 2.8px 7px;
	color: #fff;
	font-size: 15.4px;
	font-weight: 300;
	cursor: pointer;
	user-select: none;
	transition: color .2s;
}
.snav .tab:hover { color: var(--kai-green); }
.snav .tab.active { color: var(--kai-green); }
.tab-nav { display: flex; align-items: center; gap: 7px; margin-left: 14px; }
.tab-nav .btn {
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 21px;
	line-height: 1;
}
.tab-nav .btn:hover { color: var(--kai-green); }
.tab-nav .btn.disabled { opacity: .35; pointer-events: none; }
.more-btn { color: #fff; font-size: 18px; }
.more-btn:hover { color: var(--kai-green); }
.r-update-foot { margin-top: 22px; text-align: center; }
.more-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 26px;
	border-radius: var(--kai-radius-sm);
	background: var(--kai-bg-3);
	color: var(--kai-muted);
	font-size: 13px;
}
.more-link:hover { background: var(--kai-primary); color: #000; }

/* Legacy block headers (filter / search / archives) */
.block_area { margin-bottom: 32px; background: transparent; }
.block_area .block_area-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 18px;
	padding: 0;
}
.block_area .block_area-header::after { display: none; }
.block_area .block_area-header > .float-left,
.block_area .block_area-header > .float-right { float: none !important; margin: 0 !important; }
.block_area .cat-heading { margin: 0; color: #fff; font-size: 24px; font-weight: 600; line-height: 1.3; }
.block_area .block_area-content { padding: 0; background: transparent; }
.btn-blank, .btn-focus, .btn-highlight {
	background: var(--kai-bg-3);
	border: 0;
	color: var(--kai-muted);
	border-radius: var(--kai-radius-sm);
	padding: 6px 14px;
	font-size: 12px;
}
.btn-blank:hover, .btn-focus:hover, .btn-highlight:hover { background: var(--kai-primary); color: #000; }

/* --------------------------------------------------------------------------
   Info badges (sub / dub / total / type)
   -------------------------------------------------------------------------- */
.info { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.info > span {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	color: #fff;
	font-size: 12.6px;
	line-height: 1;
	white-space: nowrap;
}
.info > span b { font-weight: 500; }
.info .sub, .info .dub, .info .rating {
	height: 16.8px;
	padding: 0 2.8px;
	border: 1px solid currentColor;
	border-radius: 5.6px;
	font-size: 11.2px;
	font-weight: 500;
}
.info .sub { color: var(--kai-primary); background: rgba(228, 95, 58, .2); }
.info .dub { color: var(--kai-green); background: rgba(54, 203, 104, .2); }
.info .rating { color: #fff; background: var(--kai-primary); border-color: var(--kai-primary); }
.info > span i { font-size: 10px; }

/* --------------------------------------------------------------------------
   Poster cards (regular grid)
   -------------------------------------------------------------------------- */
.film_list { padding: 0; background: transparent; }
.film_list-wrap,
.aitem-wrapper.regular {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px 0;
	margin: 0 -11.2px;
}
#main-wrapper:not(.kai-browse) > .container:not(:has(> #main-sidebar)) .film_list-wrap { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.film_list-wrap::after, .film_list-wrap > .clearfix { display: none; }
.film_list-wrap .aitem,
.aitem-wrapper.regular .aitem { width: auto; float: none; margin: 0; padding: 0; min-width: 0; }
.aitem .inner { position: relative; display: flex; flex-direction: column; height: 100%; padding: 11.2px; }
.aitem .poster { position: relative; display: block; transition: transform .2s; }
.aitem .poster > div { position: relative; padding-bottom: 143.5%; border-radius: var(--kai-radius); overflow: hidden; background: var(--kai-bg-3); }
.aitem .poster img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.aitem .poster .play,
.aitem .poster .ep-tag { display: none; }
.aitem .poster .preview-tag {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 5;
	padding: 2.8px 8.4px;
	border-radius: 5.6px;
	background: var(--kai-green);
	color: #fff;
	font-size: 12.6px;
	font-weight: 500;
}
.aitem .inner > .title {
	display: -webkit-box;
	height: 36.4px;
	margin: 8.4px 0;
	color: #fff;
	font-size: 14px;
	font-weight: 300;
	line-height: 18.2px;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: transform .2s, color .2s;
}
.aitem .inner > .title:hover { color: #ccc; }
.aitem:hover .poster,
.aitem:hover .inner > .title { transform: translateY(-5px); }
.aitem .inner > .info { margin-top: 7px; flex-wrap: nowrap; gap: 7px; }
.aitem .inner > .info > span:last-child { margin-left: auto; }

/* Legacy cards rendered by AJAX (continue watching, bookmarks) */
.film_list-wrap .flw-item:not(.aitem) { width: auto !important; float: none; margin: 0; }
.flw-item .film-poster { border-radius: var(--kai-radius-sm); overflow: hidden; background: var(--kai-bg-3); }
.flw-item .film-detail { padding: 8px 0 0; }
.flw-item .film-name, .flw-item .film-name a { color: #fff; font-size: 13px; font-weight: 500; }
.flw-item .tick-item { border-radius: 4px; font-size: 11px; }
.tick-sub { background: transparent !important; border: 1px solid var(--kai-primary); color: var(--kai-primary) !important; }
.tick-eps, .tick-quality { background: rgba(12, 17, 22, .8) !important; color: #fff !important; }

/* --------------------------------------------------------------------------
   Three-column compact lists (New Releases / Upcoming / Completed)
   -------------------------------------------------------------------------- */
/* New Releases / Upcoming / Completed carousel (#alistSwiper) is styled in kai-home.css */
/* Compact lists fade row by row into the page */
.aitem-wrapper.compact { border-radius: var(--kai-radius-sm); overflow: hidden; }
.aitem-wrapper.compact .aitem:nth-child(1) { background-color: #181d22; }
.aitem-wrapper.compact .aitem:nth-child(2) { background-color: rgba(24, 29, 34, .85); }
.aitem-wrapper.compact .aitem:nth-child(3) { background-color: rgba(24, 29, 34, .7); }
.aitem-wrapper.compact .aitem:nth-child(4) { background-color: rgba(24, 29, 34, .55); }
.aitem-wrapper.compact .aitem:nth-child(5) { background-color: rgba(24, 29, 34, .4); }
.aitem-wrapper.compact .aitem:nth-child(6) { background-color: rgba(24, 29, 34, .25); }
.aitem-wrapper.compact .aitem:nth-child(7) { background-color: rgba(24, 29, 34, .1); }
.aitem-wrapper.compact .aitem:nth-child(n+8) { background-color: transparent; }
.aitem-wrapper.compact .poster { border-radius: 50%; }
.aitem-wrapper.compact .info > span { color: rgba(255, 255, 255, .5); }
.aitem-wrapper.compact .info .sub,
.aitem-wrapper.compact .info .dub,
.aitem-wrapper.compact .info .preview { height: 16.8px; padding: 0 2.8px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 5.6px; background: rgba(255, 255, 255, .01); color: rgba(255, 255, 255, .5); font-size: 11.2px; }
.aitem-wrapper.mini { display: flex; flex-direction: column; gap: 0; }
.aitem-wrapper.mini .aitem {
	display: flex;
	align-items: center;
	padding: 14px 19.6px;
	border-radius: 0;
	transition: background .2s;
}
.aitem-wrapper.mini .aitem:hover { background: #1c2228 !important; }
.aitem-wrapper.mini .poster { flex: 0 0 60px; width: 60px; height: 60px; margin-right: 11.2px; border-radius: var(--kai-radius-sm); overflow: hidden; }
.aitem-wrapper.mini .poster > div { position: relative; width: 100%; height: 100%; padding: 0; }
.aitem-wrapper.mini .poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.aitem-wrapper.mini .detail { min-width: 0; flex: 1 1 auto; }
.aitem-wrapper.mini .title {
	margin: 0 0 2.8px;
	color: #fff;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.5;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.aitem-wrapper.mini .info { gap: 0; }
.aitem-wrapper.mini .info > span + span { margin-left: 14px; }

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */
.sidebar { display: flex; flex-direction: column; gap: var(--kai-gap); }
.sidebar-section { padding: 21px; border-radius: var(--kai-radius); background: var(--kai-bg-2); }
.sidebar-section .shead { flex-wrap: nowrap; margin-bottom: 18px; }
.sidebar-section .shead .stitle { font-size: 21px; }
.sidebar-section .snav .tab { padding: 2px 5px; font-size: 13px; }

.top-anime { display: flex; flex-direction: column; gap: 7px; }
.top-anime .aitem {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 0;
	padding: 21px;
	border-radius: var(--kai-radius-sm);
	overflow: hidden;
	background-color: #161a1f;
	background-size: 40% auto;
	background-position: 100% 50%;
	background-repeat: no-repeat;
	isolation: isolate;
	transition: background-color .2s;
}
.top-anime .aitem::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(110deg, #161a1f 0%, #161a1f 65%, rgba(22, 26, 31, 0) 90%);
}
.top-anime .aitem:hover::before { background: linear-gradient(110deg, #181d22 0%, #181d22 65%, rgba(24, 29, 34, 0) 90%); }
/* Top three: claw scratch in the corner, brightens and slides on hover */
.top-anime:not(.reco) .aitem:nth-child(-n+3)::after {
	content: "";
	position: absolute;
	top: -14px;
	left: -7px;
	z-index: 0;
	display: block;
	min-width: 112px;
	min-height: 100%;
	background: url(../images/claw.svg) no-repeat 0 0 / 112px auto;
	opacity: .1;
	pointer-events: none;
	transition: opacity .1s, left .1s, top .1s;
}
.top-anime:not(.reco) .aitem:nth-child(-n+3):hover::after { opacity: 1; top: 0; left: -21px; }
.top-anime .num {
	position: relative;
	z-index: 1;
	flex: 0 0 30.8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30.8px;
	height: 30.8px;
	margin-right: 16.8px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 50%;
	color: #fff;
	font-size: 15.4px;
	font-weight: 500;
	transition: border .2s, background-color .2s;
}
.top-anime .aitem:hover .num { border-color: var(--kai-primary); background: var(--kai-primary); }
.top-anime .detail { position: relative; z-index: 1; min-width: 0; flex: 1 1 auto; }
.top-anime .title {
	display: block;
	color: #fff;
	font-size: 16.1px;
	font-weight: 400;
	line-height: 1.5;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.top-anime .title:hover { color: #fff; }
.top-anime .info { margin-top: 7px; gap: 0; }
.top-anime .info > span + span { margin-left: 14px; }
.top-anime.reco .num { display: none; }

/* Legacy sidebar lists (A-Z page uses the same rows) */
.anime-block-ul ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 16px; }
.anime-block-ul li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px;
	margin: 0;
	border: 0;
	border-radius: var(--kai-radius-sm);
	background: var(--kai-bg-2);
}
.anime-block-ul li:hover { background: var(--kai-bg-3); }
.anime-block-ul li .film-poster { position: relative; flex: 0 0 48px; width: 48px; height: 66px; padding: 0; border-radius: 4px; overflow: hidden; float: none; }
.anime-block-ul li .film-poster img { position: static; width: 100%; height: 100%; object-fit: cover; }
.anime-block-ul li .film-detail { float: none; width: auto; padding: 0; min-width: 0; }
.anime-block-ul li .film-name { margin: 0 0 3px; font-size: 13px; font-weight: 500; }
.anime-block-ul li .film-name a { color: #fff; }
.anime-block-ul li .fd-infor { color: var(--kai-dim); font-size: 12px; }

/* Estimated schedule widget */
#schedule { padding: 21px 0 0; overflow: hidden; }
#schedule .block_area { display: flex; flex-direction: column; margin: 0; }
/* No title (as on the reference); the clock sits in a footer row under the list. */
#schedule .block_area-header { order: 2; display: flex; align-items: center; margin: 0; padding: 12px 21px 16px; }
#schedule .block_area-header .bah-heading { display: none; }
#schedule .block_area-header .clearfix { display: none; }
#schedule .bah-time { float: none; display: block; margin: 0; }
#schedule .bah-time, #schedule .current-time { color: rgba(255, 255, 255, .5); font-size: 12.6px; }
#schedule #timezone { display: none; }
#schedule .block_area-content { order: 1; }
#schedule .table_schedule-date { position: relative; margin: 0 0 6px; padding: 0 38px; }
#schedule .table_schedule-date .swiper-container { position: relative; overflow: hidden; border-radius: 0; }
#schedule .day-item { height: auto; }
#schedule .tsd-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 4px 0;
	border: 0;
	background: transparent;
	color: var(--kai-muted);
	text-align: center;
	cursor: pointer;
	font-size: 11px;
	text-transform: uppercase;
}
#schedule .tsd-item span { color: #fff; font-size: 12.6px; font-weight: 500; }
#schedule .tsd-item .date {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 22px;
	padding: 0 4px;
	border-radius: 5px;
	background: rgba(255, 255, 255, .25);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}
#schedule .tsd-item.active .date { background: var(--kai-primary); }
#schedule .tsd-item.active span { color: #fff; }
#schedule .ts-navigation .btn {
	position: absolute;
	top: 50%;
	z-index: 2;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	padding: 0;
	border-radius: 50%;
	background: var(--kai-bg-4);
	color: #fff;
	border: 0;
	font-size: 14px;
}
#schedule .ts-navigation .tsn-prev { left: 8px; }
#schedule .ts-navigation .tsn-next { right: 8px; }
#schedule .table_schedule-list { margin: 10px 0 0; padding: 0; list-style: none; background: var(--kai-bg-3); }
#schedule .table_schedule-list:empty { min-height: 0; }
#schedule .table_schedule-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	border: 0;
	border-bottom: 1px solid var(--kai-line);
	background: transparent;
	color: var(--kai-dim);
	font-size: 13px;
}
#schedule .table_schedule-list li a { color: var(--kai-text); font-size: 13px; }
#schedule .table_schedule-list li a:hover { color: var(--kai-primary); }
#schedule .btn-showmore { margin: 0; background: transparent; color: var(--kai-muted); border: 0; border-radius: 0; font-size: 12px; }
#schedule .btn-showmore:hover { color: var(--kai-primary); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
#footer.kai-footer { margin-top: 40px; padding: 0; background: var(--kai-bg-2); border-top: 0; }
.kai-footer .top-footer { padding: 30px 0; border-bottom: 1px solid var(--kai-line); }
.kai-footer .wrapper { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.kai-footer .azlist { display: flex; flex-direction: column; gap: 14px; }
.kai-footer .azlist > div { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.kai-footer .azlist > div > div { color: #fff; font-size: 20px; font-weight: 600; }
.kai-footer .azlist > div > span { color: var(--kai-dim); font-size: 13px; }
.kai-footer .az-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.kai-footer .az-list li { margin: 0; float: none; }
.kai-footer .az-list a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 30px;
	padding: 0 9px;
	border-radius: 4px;
	background: var(--kai-bg-4);
	color: #fff;
	font-size: 13px;
	font-weight: 500;
}
.kai-footer .az-list a:hover { background: var(--kai-primary); color: #fff; }
.kai-footer .menu-footer ul { display: flex; gap: 26px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.kai-footer .menu-footer a { color: #fff; font-size: 14px; font-weight: 600; text-transform: uppercase; }
.kai-footer .menu-footer a:hover { color: var(--kai-primary); }
.kai-footer .bot-footer { padding: 24px 0; background: var(--kai-bg); }
.kai-footer .bot-footer .wrapper > div > div { color: #fff; font-size: 14px; font-weight: 500; }
.kai-footer .bot-footer .wrapper > div > div a { color: #fff; }
.kai-footer .bot-footer .wrapper > div > span { display: block; margin-top: 4px; color: var(--kai-dim); font-size: 13px; }
.kai-footer .logo-footer img { height: 40px; width: auto; }
.kai-footer .socials-group { margin-top: 10px; float: none; }
.kai-footer .socials-group .scg-list { display: flex; gap: 8px; }

/* --------------------------------------------------------------------------
   Watch / series section
   -------------------------------------------------------------------------- */
.watch-section { position: relative; padding: 147px 0 0; }
/* Blurred poster wash behind the watch area */
.watch-section-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	filter: blur(10px);
	opacity: .2;
	pointer-events: none;
}
.watch-section-shade { display: none; }
.watch-section > .container { position: relative; z-index: 1; }
.watch-section-wrap {
	display: flex;
	gap: 28px;
	align-items: stretch;
	padding-bottom: 42px;
}
/* Wide screens: info | player | episodes. The info card (.entity-section) is the first child.
   The finer sizing and the narrower breakpoints live in kai-mwatch.css. */
.watch-section-wrap > section { z-index: 2; flex-grow: 1; min-width: 0; }
.watch-section-wrap > .player-section { z-index: 3; }

/* Player card: breadcrumb strip / black player / control bar / servers */
.player-section {
	position: relative;
	z-index: 3;
	min-width: 0;
	display: flex;
	flex-direction: column;
	background: transparent;
}
.player-section .prebreadcrumb {
	margin: 0;
	padding: 14px 25.2px;
	border-radius: var(--kai-radius) var(--kai-radius) 0 0;
	background: var(--kai-bg-2);
}
.breadcrumb { margin: 0; padding: 0; background: transparent; font-size: 13.3px; line-height: 1.5; flex-wrap: wrap; }
.breadcrumb-item, .breadcrumb-item a { color: #fff; }
.breadcrumb-item a:hover { color: #ccc; }
.breadcrumb-item.active, .breadcrumb-item.active a { color: #f2f2f2; opacity: .6; }
.breadcrumb-item + .breadcrumb-item { padding-left: 7px; }
.breadcrumb-item + .breadcrumb-item::before { padding-right: 7px; color: rgba(255, 255, 255, .2); content: "/"; font-family: inherit; font-weight: 300; }

#watch-block { position: relative; margin: 0 !important; }
.player-section > *, #servers-content > * { min-width: 0; max-width: 100%; }
.player-section .player-wrap { position: relative; background: #000; }
.player-section .player-main { position: relative; padding-bottom: 56%; height: 0; overflow: hidden; background: #000; }
.player-section .player-bg {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-size: cover;
	background-position: center;
	filter: blur(20px);
	opacity: .7;
}
.player-section #iframe-embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; background: #000; }
.player-section #embed-loading { position: absolute; inset: 0; z-index: 3; }
.player-section .play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 70px;
	height: 70px;
	margin: -35px 0 0 -35px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--kai-primary);
	color: #fff;
	font-size: 30px;
	backdrop-filter: blur(4px);
	transition: transform .3s, background-color .3s;
}
.player-section .play-btn i { margin-left: 4px; }
.player-section .play-btn:hover { color: #fff; background: #b83c19; transform: scale(1.1); }
.player-section .no-source {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	color: var(--kai-muted);
}
.player-section .no-source i { font-size: 32px; opacity: .5; }
.player-section .wb_-playerarea,
#watch-block .player-main.wb_-playerarea { padding-bottom: 56%; height: 0; }

#player-control {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0;
	margin: 0 !important;
	padding: 18.9px;
	background: rgba(24, 29, 34, .8);
	backdrop-filter: blur(5px);
}
#player-control::after { display: none; }
#player-control .ctrl { display: flex; align-items: center; float: none; height: auto; margin: 0; padding: 0; line-height: 1; }
#player-control .ctrl .btn,
#player-control .ctrl .toggle-basic {
	display: inline-flex;
	align-items: center;
	gap: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #fff;
	opacity: .5;
	font-size: 12.6px;
	font-weight: 400;
	line-height: 1.5;
	cursor: pointer;
	white-space: nowrap;
	box-shadow: none;
	transition: opacity .2s;
}
#player-control .ctrl .btn i,
#player-control .ctrl .toggle-basic i { margin-right: 2.8px; font-size: 16.8px; }
#player-control .ctrl .btn:hover,
#player-control .ctrl .toggle-basic:hover { opacity: 1; color: #fff; }
#player-control .ctrl .btn.disabled { opacity: .2; pointer-events: none; }
#player-control .quick-settings:not(.off) { opacity: 1; color: #fff !important; }
#player-control .quick-settings:not(.off) i { color: var(--kai-primary); }
#player-control #turn-off-light.off { opacity: 1; }
#player-control #turn-off-light.off i { color: var(--kai-primary); }
#player-control .toggle-basic .tb-on { display: inline-block; }
#player-control .toggle-basic .tb-off { display: none; }
#player-control .toggle-basic.off .tb-on { display: none; }
#player-control .toggle-basic.off .tb-off { display: inline-block; }
#player-control .pc-fav .btn, #player-control .pc-fav .dropdown-toggle { padding: 0; color: #fff; background: transparent; border: 0; font-size: 12.6px; }
#player-control.film-buttons { justify-content: flex-start; gap: 28px; }
#player-control.film-buttons .ctrl .btn { opacity: 1; }
#player-control.film-buttons .ctrl:first-child .btn { padding: 7px 18px; border-radius: var(--kai-radius-sm); background: var(--kai-primary); }
#player-control.film-buttons .ctrl:first-child .btn:hover { background: #b83c19; }

/* Expanded player (Expand button): see kai-mwatch.css "Expand" */

/* Servers */
.player-section .player-bottom,
.player-section .player-servers {
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0 0 var(--kai-radius) var(--kai-radius);
	background: var(--kai-bg-2) !important;
}
.player-section .ps_-status { margin: 0; border: 0; background: transparent !important; }
.player-section #servers-content,
#servers-content {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 0;
	padding: 0;
	background: transparent;
}
#servers-content .server-note {
	position: static;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1 1 auto;
	max-width: none;
	width: auto;
	height: auto;
	padding: 21px;
	border: 0;
	background: transparent;
}
#servers-content .server-note p { margin: 0; color: #fff; font-size: 14px; font-weight: 500; }
#servers-content .server-note p span { color: rgba(255, 255, 255, .5); font-size: 14px; font-weight: 500; }
#servers-content .server-note > span { max-width: 350px; color: rgba(255, 255, 255, .5); font-size: 12.6px; line-height: 1.5; }
#servers-content .server-wrap { flex: 0 0 auto; padding: 21px 21px 21px 0; text-align: right; }
#servers-content .server-type { display: flex; justify-content: flex-end; gap: 14px; }
#servers-content .server-type .tab { display: inline-flex; align-items: center; gap: 4px; color: #fff; opacity: .5; font-size: 12.6px; font-weight: 500; cursor: pointer; transition: opacity .1s; }
#servers-content .server-type .tab i { display: inline-flex; align-items: center; justify-content: center; width: 22.4px; height: 15.7px; border-radius: 3px; background: rgba(255, 255, 255, .1); font-size: 9px; }
#servers-content .server-type .tab.active,
#servers-content .server-type .tab:hover { opacity: 1; }
#servers-content .server-type .tab[data-id="sub"].active i,
#servers-content .server-type .tab[data-id="sub"]:hover i { color: var(--kai-primary); background: rgba(228, 95, 58, .1); }
#servers-content .server-type .tab[data-id="dub"].active i,
#servers-content .server-type .tab[data-id="dub"]:hover i { color: var(--kai-green); background: rgba(54, 203, 104, .1); }
#servers-content .ps_-block { display: block; margin-top: 14px; padding: 0; border: 0; background: transparent; overflow: visible; }
#servers-content .ps__-title { display: none; }
#servers-content .ps__-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; float: none; padding: 0; }
#servers-content .server-item,
.ps__-list .item.server-item { float: none; margin: 0; }
#servers-content .server-item .btn,
.ps__-list .item.server-item .btn {
	padding: 5.6px 9.8px;
	line-height: 1.5;
	border: 0 !important;
	border-radius: var(--kai-radius-sm);
	background: rgba(255, 255, 255, .3) !important;
	color: #0c1116 !important;
	font-size: 12.6px;
	font-weight: 500;
	transition: color .2s, background-color .2s;
}
#servers-content .server-item .btn::before,
#servers-content .server-item .btn::after { display: none !important; content: none !important; }
#servers-content .server-item .btn:hover,
#servers-content .server-item .btn.active { background: var(--kai-green) !important; color: #0c1116 !important; }
#servers-content .server-empty { color: var(--kai-dim); font-size: 13px; }
#servers-content .schedule-alert { margin: 0; color: var(--kai-muted); font-size: 13px; }
.schedule-alert { margin-top: 10px; }
.schedule-alert .alert { margin: 0; background: var(--kai-primary-soft); border-color: rgba(228, 95, 58, .3); color: var(--kai-text); }
.schedule-alert #schedule-date { color: var(--kai-primary); font-weight: 500; }

/* Episodes column */
.episode-section {
	display: flex;
	flex-direction: column;
	min-height: 0;
	max-height: 820px;
	margin: 0;
	padding: 21px;
	border-radius: var(--kai-radius);
	background: var(--kai-bg-2);
}
.episode-section .head-top { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 7px; margin: 0; }
.episode-section .head-top .title { color: #fff; font-size: 15.4px; font-weight: 500; }
.episode-section .head-tools { display: flex; align-items: center; gap: 7px; }
.episode-section .ep-find {
	width: 84px;
	height: 28px;
	padding: 0 10px;
	border: 0;
	border-radius: var(--kai-radius-sm);
	background: var(--kai-bg-3);
	font-size: 12.6px;
}
.episode-section .ep-find::placeholder { color: rgba(255, 255, 255, .5); }
.episode-section .list-sw {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	padding: 0 11.2px;
	border: 0;
	border-radius: var(--kai-radius-sm);
	background: #20272e;
	color: #fff;
	opacity: .5;
	font-size: 14px;
	transition: opacity .2s;
}
.episode-section .list-sw:hover { opacity: .7; color: #fff; }
.episode-section .list-sw.active { opacity: 1; color: #fff; }
.episode-section .head-bot {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: space-between;
	height: 28px;
	margin: 14px 0;
	padding: 0;
	border-radius: var(--kai-radius-sm);
	background: #20272e;
}
.episode-section .range-nav {
	height: 28px;
	padding: 0 14px;
	border: 0;
	background: transparent;
	color: #fff;
	opacity: .5;
	font-size: 14px;
	transition: opacity .2s;
}
.episode-section .range-nav:hover { opacity: 1; color: #fff; }
.episode-section .range-nav.disabled { opacity: .1; pointer-events: none; }
.episode-section .range-dd { flex: 1 1 auto; text-align: center; }
.episode-section .range-label { width: 100%; padding: 0 14px; border: 0; background: transparent; color: #fff; font-size: 14px; font-weight: 300; line-height: 28px; box-shadow: none; }
.episode-section .range-label i { margin-left: 6px; font-size: 12px; }
.episode-section .range-options { max-height: 260px; overflow-y: auto; min-width: 140px; }
.episode-section .range-options .dropdown-item { cursor: pointer; text-align: center; font-size: 13px; }
.episode-section .eplist { flex: 1 1 auto; overflow-y: auto; min-height: 0; margin: 0 -3.5px; scrollbar-width: thin; scrollbar-color: var(--kai-green) transparent; }
.episode-section .eplist::-webkit-scrollbar { width: 1px; }
.episode-section .eplist::-webkit-scrollbar-thumb { background: var(--kai-green); border-radius: var(--kai-radius); }
.episode-section .episodes-ul { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.episode-section .episodes-ul > li { margin: 0; min-width: 0; }
.episode-section .ep-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	margin: 3.5px;
	padding: 7px;
	float: none;
	border: 1px solid transparent;
	border-radius: var(--kai-radius-sm);
	background: rgba(0, 0, 0, .1);
	color: #fff;
	font-size: 12.6px;
	font-weight: 300;
	line-height: 1.5;
	white-space: nowrap;
}
.episode-section .ep-item .order { padding: 0; background: transparent; color: inherit; }
.episode-section .ep-item .ep-title { display: none; }
.episode-section .ep-item:hover,
.episode-section .ep-item.active { background: var(--kai-primary) !important; color: #fff !important; }
.episode-section .ep-item.found { border-color: var(--kai-primary); }
/* List view: "N  Episode N" rows */
.episode-section .eplist.titles .episodes-ul { grid-template-columns: 1fr; }
.episode-section .eplist.titles .ep-item { justify-content: flex-start; }
.episode-section .eplist.titles .ep-item .order { color: inherit; }
.episode-section .eplist.titles .ep-item .ep-title { display: block; margin-left: 7px; color: #e6e6e6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.episode-section .eplist.titles .ep-item:hover .ep-title,
.episode-section .eplist.titles .ep-item.active .ep-title { color: #fff; }
.episode-section .ep-empty { padding: 20px 0; color: var(--kai-dim); text-align: center; }

/* Series info card (full width, under the player): poster / details / rating box pinned top-right */
.entity-section {
	position: relative;
	display: grid;
	grid-template-columns: 210px minmax(0, 1fr);
	gap: 0;
	margin-top: 28px;
	border-radius: var(--kai-radius);
	background: var(--kai-bg-2);
	overflow: hidden;
}
.entity-section .poster-wrap {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: var(--kai-radius) 0 0 var(--kai-radius);
	background: transparent;
	overflow: hidden;
}
.entity-section .poster-wrap::after { content: ""; position: absolute; inset: 0; z-index: 0; background: rgba(0, 0, 0, .5); }
.entity-section .poster-wrap-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	filter: blur(10px);
	transform: none;
}
.entity-section .poster { position: relative; z-index: 1; width: 140px; border-radius: var(--kai-radius); overflow: hidden; box-shadow: 0 7px 14px rgba(0, 0, 0, .15); }
.entity-section .poster > div { position: relative; padding-bottom: 143%; }
.entity-section .poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.entity-section .main-entity { display: block; padding: 23.8px; min-width: 0; }
.entity-section .title { margin: 0; color: #fff; font-size: 21px; font-weight: 500; line-height: 25.2px; overflow-wrap: anywhere; }
.entity-section .al-title { display: -webkit-box; max-height: 50.4px; margin: 11.2px 0; color: rgba(255, 255, 255, .5); font-size: 14px; line-height: 16.8px; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.entity-section .main-entity > .info { margin-bottom: 14px; gap: 7px; }
.entity-section .main-entity > .info > span:not(.sub):not(.dub):not(.rating) { font-size: 12.6px; }
.entity-section .desc { margin: 0 294px 14px 0; color: #fff; font-size: 13.3px; line-height: 18.2px; }
.entity-section .desc .shorting, .entity-section .desc p { margin: 0; }
.entity-section .desc .more, .entity-section .desc .btn { color: var(--kai-primary); cursor: pointer; background: transparent; border: 0; padding: 0 4px; }
.entity-section .detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-right: 294px; padding: 0; font-size: 13.44px; line-height: 25.2px; }
.entity-section .detail > div { min-width: 0; padding: 0 14px 0 0; }
.entity-section .detail > div > div { color: rgba(255, 255, 255, .5); font-size: 13.44px; line-height: 25.2px; }
.entity-section .detail span { margin-left: 2.8px; color: #fff; }
.entity-section .detail span a { color: #fff; }
.entity-section .detail span a:hover { color: var(--kai-green); }
.entity-section .rate-box {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 280px;
	height: 126px;
	margin: 0;
	padding: 21px;
	border-radius: var(--kai-radius) 0 0 var(--kai-radius);
	background: var(--kai-bg-3);
	color: rgba(255, 255, 255, .5);
	font-size: 13.3px;
	text-align: center;
}
.entity-section .rate-box .rate-q { margin: 0; color: var(--kai-primary); font-size: 16.8px; font-weight: 500; }
.entity-section .rate-box .anime-rating { display: inline-flex; justify-content: center; align-items: baseline; gap: 4px; padding: 0; background: transparent; color: rgba(255, 255, 255, .5); font-size: 13.3px; }
.entity-section .rate-box .anime-rating .fa-star { display: none; }
.entity-section .rate-box .anime_score_value { color: #fff; font-weight: 400; }
.entity-section .rate-box .anime_score_max { color: rgba(255, 255, 255, .5); }
.entity-section .rate-box .stars { display: flex; justify-content: center; align-items: center; gap: 0; margin-top: 8.4px; color: #343a40; font-size: 25.2px; }
.entity-section .rate-box .stars i { display: flex; align-items: center; justify-content: center; width: 30.8px; height: 30.8px; }
.entity-section .rate-box .stars .active { color: var(--kai-primary); }
.film-seo-more { margin-top: 16px; padding: 12px 18px; border-radius: var(--kai-radius); background: var(--kai-bg-2); color: var(--kai-muted); font-size: 13px; }
.film-seo-more summary { color: #fff; cursor: pointer; }

/* Focus mode: the overlay covers the page, only the player + control bar stay above it.
   .container and .player-section each create a stacking context; while the overlay is on they must not,
   otherwise #watch-block is trapped underneath it and the whole window goes black. */
#mask-overlay { z-index: 102; background: rgba(5, 7, 9, .95); }
body:has(#mask-overlay.active) .watch-section > .container,
body:has(#mask-overlay.active) .watch-section-wrap > .player-section { z-index: auto; }
body:has(#mask-overlay.active) #watch-block { z-index: 103; }

/* Comments block */
.block_area-comment .block_area-content { padding: 18px; border-radius: var(--kai-radius); background: var(--kai-bg-2); }

/* "Love this site?" share bar */
.social-share-watch { background: var(--kai-bg-2); }
.social-share-watch #social-sharing { margin: 0; justify-content: flex-start; }
#social-sharing {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 42px;
	padding: 21px;
	border-radius: var(--kai-radius-sm);
	background: var(--kai-bg-2);
}
#social-sharing .sharing-info { display: flex; flex-shrink: 0; align-items: center; white-space: nowrap; }
#social-sharing .text-sharing h4,
#social-sharing .text-sharing .share-title { margin: 0; color: var(--kai-green); font-size: 21px; font-weight: 500; line-height: 1.2; }
#social-sharing .text-sharing span { color: rgba(255, 255, 255, .5); }
#social-sharing .share-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
#social-sharing .share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 120px;
	height: 32px;
	padding: 0 16px;
	border: 0;
	border-radius: 20px;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	transition: opacity .2s, transform .2s;
}
#social-sharing .share-btn.icon-only { min-width: 50px; padding: 0 14px; }
#social-sharing .share-btn:hover { color: #fff; opacity: .9; transform: translateY(-1px); }
#social-sharing .share-telegram { background: #0088cc; }
#social-sharing .share-x { background: #000; }
#social-sharing .share-facebook { background: #4267b2; }
#social-sharing .share-reddit { background: #ff4500; }
#social-sharing .share-more { background: #95d03a; }
#social-sharing .share-more.copied::after { content: "Copied"; margin-left: 6px; }

/* Comments */
.kai-comments { margin-top: 0; }
.kai-comments .onoff-toggle { display: inline-flex; align-items: center; padding: 0; border: 0; background: transparent; color: #fff; font-size: 21px; font-weight: 500; cursor: pointer; }
.kai-comments .onoff-toggle::after {
	content: "on";
	margin: -7px 0 0 3px;
	padding: 0 4px;
	border-radius: 4px;
	background: var(--kai-primary);
	color: rgba(0, 0, 0, .7);
	font-size: 11.2px;
	font-weight: 600;
	text-transform: lowercase;
	transition: background-color .2s;
}
.kai-comments .onoff-toggle:hover { opacity: .7; }
.kai-comments .onoff-toggle.off { opacity: .7; }
.kai-comments .onoff-toggle.off::after { content: "off"; background: #fff; opacity: .9; }
#cm-widget .cm-head { display: flex; justify-content: space-between; margin-bottom: 14px; }
#cm-widget .cm-head #cm-count { color: rgba(255, 255, 255, .5); }
#cm-widget .cm-head .sort-cm a { color: #fff; font-weight: 500; }
#cm-widget .cm-head .sort-cm a + a { margin-left: 14px; }
#cm-widget .cm-head .sort-cm a.active { border-bottom: 2px solid var(--kai-primary); }
#cm-widget .cm-item { margin-bottom: 21px; }
#cm-widget .cm-item .main { display: flex; align-items: flex-start; }
#cm-widget .cm-item .main .avatar { flex-shrink: 0; width: 35px; height: 35px; margin-right: 7px; border-radius: 50%; overflow: hidden; }
#cm-widget .cm-item .main .avatar img { width: 100%; background: rgba(228, 95, 58, .4); }
#cm-widget .cm-item .main .detail { display: flex; flex-direction: column; flex-grow: 1; justify-content: center; min-width: 0; }
#cm-widget .cm-item .header .username { font-weight: 500; }
#cm-widget .cm-item .header > span:not(.username) { color: rgba(255, 255, 255, .5); font-size: 11.2px; }
#cm-widget .cm-item .content { margin: 3px 0 7px; }
#cm-widget .content-rendered { color: #c4c4c4; overflow-wrap: anywhere; }
#cm-widget .content-rendered b { font-weight: 600; }
#cm-widget .content-rendered .spoil { cursor: pointer; filter: blur(3px); transition: filter .3s; }
#cm-widget .content-rendered .spoil:hover, #cm-widget .content-rendered .spoil.show { filter: none; }
#cm-widget .content-rendered blockquote { display: inline-block; margin: 7px 0 7px 21px; padding: 0 7px; color: rgba(255, 255, 255, .5); font-style: italic; border-left: 2px solid rgba(255, 255, 255, .15); }
#cm-widget .cm-editor { border-radius: var(--kai-radius); background: #20272e; overflow: hidden; }
#cm-widget .cm-editor > textarea { display: block; width: 100%; min-height: 70px; max-height: 280px; padding: 10px 14px; border: 0; background: transparent; color: #fff; resize: vertical; box-shadow: none; }
#cm-widget .cm-editor > textarea::placeholder { color: rgba(255, 255, 255, .5); }
#cm-widget .cm-editor .preview { padding: 10px 14px; background: rgba(0, 0, 0, .1); overflow: auto; }
#cm-widget .cm-editor .editor-ctrl { display: flex; align-items: center; justify-content: space-between; padding: 7px; background: rgba(0, 0, 0, .2); }
#cm-widget .cm-editor .editor-ctrl > div { display: flex; align-items: center; }
#cm-widget .cm-editor .toolbar { display: flex; align-items: center; }
#cm-widget .cm-editor .toolbar .tb-item { margin: 0 1.4px; padding: 2.8px 7px; border-radius: 4px; color: rgba(255, 255, 255, .5); cursor: pointer; }
#cm-widget .cm-editor .toolbar .tb-item:hover, #cm-widget .cm-editor .toolbar .tb-item.active { background: var(--kai-bg-2); }
#cm-widget .cm-editor .toolbar .separator { display: block; height: 21px; border-left: 1px solid rgba(255, 255, 255, .05); }
#cm-widget .cm-editor .btn-cancel { padding: 0 14px; border: 0; background: transparent; color: rgba(255, 255, 255, .5); }
#cm-widget .cm-editor .btn-cancel:hover { color: var(--kai-primary); }
#cm-widget .cm-editor .btn-send { padding: 4px 11px; color: #fff; }
#cm-widget .cm-msg { padding: 0 14px; color: var(--kai-green); font-size: 13px; }
#cm-widget .cm-msg:empty { display: none; }
#cm-widget .cm-msg.error { padding: 7px 14px; color: #ff6b6b; }
#cm-widget .cm-items { margin-top: 21px; }
#cm-widget .cm-empty { padding: 14px 0; color: rgba(255, 255, 255, .5); text-align: center; }
#cm-widget .cm-loading { display: flex; justify-content: center; padding: 21px 0; }
#cm-widget .cm-foot { display: flex; justify-content: center; }
#cm-widget .cm-foot button { width: 100%; padding: 8px; border: 0; border-radius: var(--kai-radius-sm); background: var(--kai-bg-2); color: #fff; }
#cm-widget .cm-foot button:hover { background: #1b232b; }
@media (max-width: 767.98px) {
	#social-sharing { flex-direction: column; gap: 10px; text-align: center; }
	#social-sharing .sharing-info { white-space: normal; }
	#social-sharing .share-buttons { justify-content: center; }
	#social-sharing .share-btn { min-width: 0; }
}

/* Episodes header: "# Find" box and sub/dub switch */
.episode-section .ep-find-wrap { position: relative; }
.episode-section .ep-find-wrap::before { content: "#"; position: absolute; top: 4px; left: 10px; z-index: 2; color: rgba(255, 255, 255, .5); font-size: 14px; pointer-events: none; }
.episode-section .ep-find-wrap .ep-find { padding-left: 28px; }
.subdub-sw { display: flex; height: 28px; border-radius: var(--kai-radius-sm); overflow: hidden; }
.subdub-sw span { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 100%; background: #20272e; color: #fff; opacity: .5; cursor: pointer; font-size: 13px; transition: all .2s; }
.subdub-sw span:hover { opacity: 1; }
.subdub-sw span.active { opacity: 1; }
.subdub-sw span.active[data-value="sub"] { color: var(--kai-primary); }
.subdub-sw span.active[data-value="dub"] { color: var(--kai-green); }

/* Rating box: interactive stars */
.entity-section .rate-box .value { color: #fff; }
.entity-section .rate-box #rating-count { margin-left: 3px; }
.entity-section .rate-box .stars i { cursor: pointer; transition: color .2s; }
.entity-section .rate-box .stars i.active { color: rgba(228, 95, 58, .6); }
.entity-section .rate-box .stars.rated i { cursor: default; }
.entity-section .rate-box .stars.rated i.active,
.entity-section .rate-box .stars:not(.hovering) i.active:hover { color: var(--kai-primary); }
.entity-section .rate-box .stars.hovering i { color: #343a40; }
.entity-section .rate-box .stars.hovering i.hover { color: var(--kai-primary); }

/* Report dialog */
.kai-modal .modal-content { position: relative; border: 0; border-radius: var(--kai-radius); background: var(--kai-bg-2); color: #fff; }
.kai-modal .modal-body { padding: 28px; }
.kai-modal .close { position: absolute; top: 12px; right: 16px; z-index: 2; color: #fff; opacity: .6; text-shadow: none; }
.kai-modal .modal-title { margin-bottom: 4px; font-size: 19px; font-weight: 500; }
.kai-modal .sub { margin-bottom: 14px; color: rgba(255, 255, 255, .5); font-size: 13px; }
.kai-modal .form-check { padding: 6px 0 6px 26px; }
.kai-modal .form-check-input { margin-top: 5px; margin-left: -26px; accent-color: var(--kai-primary); }
.kai-modal textarea.form-control { background: #20272e; border: 0; color: #fff; }
.kai-modal .report-msg { margin-top: 10px; color: var(--kai-green); font-size: 13px; }
.kai-modal .report-msg.error { color: #ff6b6b; }
.kai-modal .report-msg:empty { display: none; }

/* Expand only makes sense while the episode column sits beside the player (>= 1200px) */
@media (max-width: 1199.98px) {
	#player-control .ctrl.expand { display: none; }
}

/* --------------------------------------------------------------------------
   Listing pages: filter form, pagination, A-Z, empty states
   -------------------------------------------------------------------------- */
.block_area-filter .block_area-content,
.block_area-filter form,
.filter-wrap { padding: 16px; border-radius: var(--kai-radius); background: var(--kai-bg-2); }
.block_area-filter select,
.block_area-filter .select2-container--default .select2-selection--single,
.block_area-filter .select2-container--default .select2-selection--multiple,
.block_area-filter .custom-select {
	background-color: var(--kai-bg-3);
	border: 1px solid var(--kai-line);
	border-radius: var(--kai-radius-sm);
	color: #fff;
}
.select2-dropdown { background: var(--kai-bg-3); border-color: var(--kai-line); color: var(--kai-text); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--kai-primary); color: #fff; }
.select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--kai-bg-4); border: 0; color: #fff; }
.select2-search__field { color: #fff; }

/* .anime-pagination (theme pager) lives in assets/css/kai-series.css "Pagination". */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 28px; }
.pagination .page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border: 0;
	border-radius: var(--kai-radius-sm);
	background: var(--kai-bg-3);
	color: var(--kai-muted);
	font-size: 13px;
}
.pagination .page-link:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.pagination .page-item.active .page-link { background: var(--kai-primary); color: #fff; }

ul.az-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; padding: 0; list-style: none; }
ul.az-list li { float: none; margin: 0; }
ul.az-list li a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 30px;
	padding: 0 9px;
	border-radius: 4px;
	background: var(--kai-bg-4);
	color: #fff;
	font-size: 13px;
	font-weight: 500;
}
ul.az-list li a:hover, ul.az-list li.active a { background: var(--kai-primary); color: #fff; }
.anime-empty-state { padding: 40px 16px; border-radius: var(--kai-radius); background: var(--kai-bg-2); color: var(--kai-muted); text-align: center; }

/* Browse page (/browse, /tv, /genres/x, presets) */
#main-wrapper.kai-browse { padding-top: 0; }
.kai-browse > .container { display: block; max-width: 1400px; padding: 0 27px; }
.browse-title-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 22px;
	padding-top: 117px;
}
.browse-title-row h1 { margin: 0; color: #fff; font-size: 21px; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: .3px; }
.browse-title-row .count { color: var(--kai-dim); font-size: 13px; white-space: nowrap; }
#filters { margin-bottom: 20px; }
/* A-Z letter row (28 equal cells) */
#az-filters { display: grid; grid-template-columns: repeat(28, minmax(0, 1fr)); margin: 0 -3px 10px; padding: 0; list-style: none; }
#az-filters li { padding: 3px; }
#az-filters li a { display: block; padding: 5px 0; text-transform: uppercase; border-radius: var(--kai-radius-sm); background: var(--kai-bg); color: #fff; font-size: 14px; text-align: center; white-space: nowrap; transition: background-color .2s; }
#az-filters li a:hover { background: var(--kai-green); color: #fff; }
#az-filters li a.active { background: var(--kai-primary); color: #fff; }
#filters .main-filters,
#filters .more-filters {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr)) 40px 162px;
	gap: 11px;
	align-items: center;
}
#filters .more-filters { margin-top: 11px; }
#filters .more-filters[hidden] { display: none; }
#filters .more-filters .reset { grid-column: 4; }
#filters .search { position: relative; }
#filters .search .form-control {
	height: 35px;
	padding: 0 36px 0 13px;
	border: 0;
	border-radius: 6px;
	background: #181d22;
	color: #fff;
	font-size: 13px;
}
#filters .search .form-control::placeholder { color: #6b7075; }
#filters .search i { position: absolute; top: 50%; right: 13px; transform: translateY(-50%); color: #fff; font-size: 14px; pointer-events: none; }
#filters .kai-dd { position: relative; min-width: 0; }
#filters .kai-dd > .btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 35px;
	padding: 0 13px;
	border: 0;
	border-radius: 6px;
	background: #181d22;
	color: #9a9fa4;
	font-size: 14px;
	box-shadow: none;
}
#filters .kai-dd > .btn .value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#filters .kai-dd > .btn .value.has { color: #fff; }
#filters .kai-dd > .btn::after {
	content: "\f107";
	margin-left: 8px;
	border: 0;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 13px;
	color: #fff;
	vertical-align: 0;
}
#filters .kai-dd .dropdown-menu {
	top: calc(100% + 6px);
	left: 0;
	min-width: 100%;
	max-height: 340px;
	overflow-y: auto;
	margin: 0;
	padding: 8px;
	border-radius: 6px;
	background: #181d22;
}
#filters .kai-dd .dropdown-menu.lg { width: 560px; max-width: 90vw; }
#filters .kai-dd .dropdown-menu ul { display: grid; grid-template-columns: 1fr; gap: 2px; margin: 0; padding: 0; list-style: none; }
#filters .kai-dd .dropdown-menu.lg ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#filters .kai-dd li { position: relative; }
#filters .kai-dd li input { position: absolute; opacity: 0; pointer-events: none; }
#filters .kai-dd li label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 6px 8px;
	border-radius: 4px;
	color: #c9cdd1;
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#filters .kai-dd li label::before {
	content: "";
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 3px;
}
#filters .kai-dd li input[type="radio"] + label::before { border-radius: 50%; }
#filters .kai-dd li label:hover { background: rgba(255, 255, 255, .05); color: #fff; }
#filters .kai-dd li input:checked + label { color: #fff; }
#filters .kai-dd li input:checked + label::before { border-color: var(--kai-primary); background: var(--kai-primary); box-shadow: inset 0 0 0 3px #181d22; }
#filters .more-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 35px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: #181d22;
	color: #fff;
	font-size: 15px;
}
#filters .more-toggle.active, #filters .more-toggle:hover { color: var(--kai-primary); }
#filters .submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 35px;
	padding: 0 12px;
	border-radius: 6px;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
}
#filters .reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 35px;
	border-radius: 6px;
	background: #181d22;
	color: #9a9fa4;
	font-size: 13px;
}
#filters .reset:hover { color: #fff; }
#main-wrapper.kai-browse .film_list-wrap,
#main-wrapper.kai-browse .aitem-wrapper.regular { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 0; }

/* Generic page / 404 content */
.page-content, .entry-content, .article-content { color: rgba(255, 255, 255, .75); line-height: 1.75; }
.page-content h1, .page-content h2, .page-content h3, .entry-content h2, .entry-content h3 { color: #fff; }

/* --------------------------------------------------------------------------
   Overlays: modals, dropdowns, tooltips
   -------------------------------------------------------------------------- */
.modal-content { background: var(--kai-bg-2); border: 1px solid var(--kai-line); border-radius: 14px; color: var(--kai-text); }
.modal-header, .modal-footer { border-color: var(--kai-line); }
.modal-backdrop.show { opacity: .8; }
.premodal .modal-content { background: var(--kai-bg-2); }
.premodal .btn-primary, .premodal .btn-submit { background: var(--kai-primary); border-color: var(--kai-primary); color: #fff; }
.premodal .link-highlight, .premodal a.text-primary, .modal-content a { color: var(--kai-link); }
.close { color: #fff; text-shadow: none; opacity: .6; }
.close:hover { color: #fff; opacity: 1; }

.dropdown-menu {
	background: var(--kai-bg-3);
	border: 1px solid var(--kai-line);
	border-radius: var(--kai-radius-sm);
	box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}
.dropdown-item { color: var(--kai-text); }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(255, 255, 255, .06); color: var(--kai-primary); }
.dropdown-item.active, .dropdown-item:active { background: var(--kai-primary); color: #fff; }

.qtip.qtip-default, .qtip {
	background: rgba(24, 29, 34, .98) !important;
	border: 1px solid var(--kai-line) !important;
	border-radius: var(--kai-radius-sm) !important;
	color: var(--kai-text) !important;
	box-shadow: 0 16px 40px rgba(0, 0, 0, .55) !important;
}
.qtip .pre-qtip-title { color: #fff; }
.qtip .pre-qtip-description, .qtip .pre-qtip-line { color: var(--kai-muted); }
.qtip .btn-play, .qtip .btn-primary { background: var(--kai-primary); border-color: var(--kai-primary); color: #fff; border-radius: var(--kai-radius-sm); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
	#filters .main-filters, #filters .more-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	#filters .more-filters .reset { grid-column: auto; }
	#main-wrapper.kai-browse .film_list-wrap, #main-wrapper.kai-browse .aitem-wrapper.regular { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	:root { --kai-sidebar-w: 300px; }
	.kai-header #search { width: 340px; }
	.watch-section-wrap { grid-template-columns: minmax(0, 1fr) 300px; }
	.entity-section { grid-template-columns: 180px minmax(0, 1fr); }
	.entity-section .desc, .entity-section .detail { margin-right: 0; }
	.entity-section .rate-box { position: static; grid-column: 1 / -1; height: auto; margin: 0 21px 21px; border-radius: var(--kai-radius); }
}

@media (max-width: 991.98px) {
	#az-filters { grid-template-columns: repeat(14, minmax(0, 1fr)); }
	.dual-col,
	#main-wrapper > .container:has(> #main-sidebar) { grid-template-columns: minmax(0, 1fr); }
	.film_list-wrap, .aitem-wrapper.regular { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	#featured #featuredSwiper { height: 560px; }
	#featured .swiper-slide { background-size: 140% 100%; }
	#featured .detail { margin-bottom: 100px; }
	#featured .detail .title { font-size: 28.6px; line-height: 36.4px; }
	#featured .detail .desc { display: none; }
	#featured .featured-nav { bottom: 100px; }
	.kai-home #featured + .container > .dual-col { margin-top: -40px; }
	.watch-section-wrap { grid-template-columns: minmax(0, 1fr); }
	.episode-section { max-height: 440px; }
	#servers-content { flex-direction: column; }
	#servers-content .server-wrap { padding: 0 21px 21px; text-align: left; }
	#servers-content .server-type, #servers-content .ps__-list { justify-content: flex-start; }
	#player-control { justify-content: center; }
	#player-control .ctrl .btn, #player-control .ctrl .toggle-basic { padding: 0 13px; }
	#player-control.film-buttons { justify-content: flex-start; }
	#player-control.film-buttons .ctrl .btn { padding: 0; }
}

@media (max-width: 767.98px) {
	body.home .kai-header #nav-menu-btn, body.page-template-home-page .kai-header #nav-menu-btn { margin-left: 0; padding-right: 0; }
	body.home #header .brand#logo, body.page-template-home-page #header .brand#logo { margin-left: 16px; }
	body.home .kai-header .nav-wrapper, body.page-template-home-page .kai-header .nav-wrapper { background: rgba(0, 0, 0, .7); }
	.dual-col .sidebar-section.hide-bg-mobile { padding: 0; background: transparent; }
	.kai-browse > .container { padding: 0 12px; }
	.browse-title-row { padding-top: 40px; }
	#filters .main-filters, #filters .more-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#filters .search { grid-column: 1 / -1; }
	#filters .kai-dd .dropdown-menu.lg ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	#main-wrapper.kai-browse .film_list-wrap, #main-wrapper.kai-browse .aitem-wrapper.regular { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 0; }
	:root { --kai-header-h: 56px; --kai-header-top: 8px; }
	.container { padding-left: 12px; padding-right: 12px; }
	.kai-header > .container { padding: 0 10px; }
	.kai-header .nav-wrapper { padding: 0 16px; border-radius: 14px; }
	.kai-header .brand, #header .brand#logo { margin-left: 16px; }
	.kai-header .brand img, #header #logo.brand img { height: 30px; max-width: 130px; }
	.kai-header .lang-sw { margin-left: 14px; height: 28px; }
	.kai-header .lang-sw span { width: 34px; height: 28px; font-size: 13px; }
	.kai-header .nav-user, #header .nav-user#header_right { margin-left: 14px; }
	.kai-header #search { position: static; width: auto; max-width: none; }
	.kai-header #search-btn { display: inline-flex; font-size: 17px; }
	.kai-header #search .inner {
		position: absolute;
		top: calc(100% + 8px);
		left: 0;
		right: 0;
		display: none;
		padding: 10px;
		border-radius: var(--kai-radius);
		background: var(--kai-bg-2);
		box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
	}
	.kai-header #search.active .inner { display: block; }
	.kai-header #search-suggest { left: 0; right: 0; }
	.kai-header .shuffle-btn { display: none; }
	.kai-header .nav-menu > ul > li.d-md-none { display: block !important; }
	.kai-header .nav-menu { left: 0; }

	#featured #featuredSwiper { height: 490px; }
	#featured .swiper-slide { background-color: #000; background-size: 150% auto; background-position: 0 0; }
	#featured .swiper-slide::before { display: none; }
	#featured .swiper-slide::after { height: 280px; background: linear-gradient(180deg, rgba(12, 17, 22, 0) 0%, #0c1116 40%); }
	#featured .detail { display: flex; flex-direction: column; align-items: center; max-width: 450px; margin: 0 auto 154px; text-align: center; }
	#featured .detail .info { order: 1; justify-content: center; margin-bottom: 7px; }
	#featured .detail .title { order: 2; max-height: 56px; font-size: 19.6px; line-height: 28px; }
	#featured .swiper-ctrl { order: 3; margin-top: 10px; }
	#featured .mics { display: none; }
	#featured .watch-btn { width: 70px; height: 35px; padding: 0; font-size: 0; }
	#featured .watch-btn i { display: block; font-size: 16px; }
	#featured .info-btn { width: 70px; height: 35px; margin-left: 10px; border-radius: 8px; background: var(--kai-green); font-size: 16px; }
	#featured .featured-nav { left: 0; right: 0; bottom: 98px; width: 140px; margin: 0 auto; transform: scale(.7); }
	#featured .featured-nav-wrap { justify-content: center; }
	.kai-home #featured + .container > .dual-col { margin-top: -50px; }

	.film_list-wrap, .aitem-wrapper.regular,
	#main-wrapper:not(.kai-browse) > .container:not(:has(> #main-sidebar)) .film_list-wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 0; margin: 0 -6px; }
	.aitem .inner { padding: 6px; }
	.shead { flex-wrap: wrap; }
	.shead.lg .stitle { font-size: 18px; }
	.watch-section { padding-top: calc(var(--kai-header-h) + var(--kai-header-top) * 2 + 10px); }
	.player-section .prebreadcrumb { padding: 10px 14px; }

	.entity-section { grid-template-columns: minmax(0, 1fr); }
	.entity-section .poster-wrap { padding: 28px 0; border-radius: var(--kai-radius) var(--kai-radius) 0 0; }
	.entity-section .poster { width: 140px; }
	.entity-section .main-entity { padding: 18px 20px; }
	.entity-section .detail { grid-template-columns: minmax(0, 1fr); }
	.entity-section .rate-box { min-width: 0; margin: 0 20px 20px; }
	.kai-footer .wrapper { flex-direction: column; align-items: flex-start; }
	#player-control .ctrl .tb-name, #player-control .ctrl .btn span { display: none; }
	#player-control.film-buttons .ctrl .btn span { display: inline; }
}

@media (max-width: 479.98px) {
	#az-filters { grid-template-columns: repeat(7, minmax(0, 1fr)); }
	#main-wrapper.kai-browse .film_list-wrap, #main-wrapper.kai-browse .aitem-wrapper.regular { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.film_list-wrap, .aitem-wrapper.regular,
	#main-wrapper:not(.kai-browse) > .container:not(:has(> #main-sidebar)) .film_list-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Series page (/watch/{series}) styles live in assets/css/kai-series.css. */
