/*
Theme Name: KissKH Official Mobile Fixed
Theme URI: https://example.com/kisskhofficial
Author: KissKH Official Team
Author URI: https://example.com
Description: An exact kisskh.hk clone theme — grey #303030 background, #212121 header with inline icon nav, full-width 460px hero with top-left title badge, 16:9 landscape card rails, backdrop detail page with medium-grey panel, news and comments, MDL fetch.
Version: 25.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kisskhofficial
Tags: custom-menu, featured-images, threaded-comments, translation-ready, dark, entertainment
KissKH Official is a custom theme. All content belongs to the site owner.
*/
/* ============================================================
   KissKH dark design tokens and v25.0 KissKH Official branding
   body bg #303030 · header #212121 (border-bottom #252525) · card image bg #2a2a2a
   detail panel medium grey #7d7d7d · EP badge white 14px · accent #ff7a00
   ============================================================ */
:root {
	--bg: #303030;
	--bg-2: #2b2b2b;
	--card: #1c1c1c;
	--panel: #7d7d7d;
	--header: #212121;
	--header-dark: #1a1a1a;
	--accent: #ff7a00;
	--accent-dark: #e06b00;
	--text: #f5f5f5;
	--muted: #b8b8b8;
	--border: #3a3a3a;
	--placeholder: #2a2a2a;
	--radius: 4px;
}
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
}
body.ks-dark, body.ks-dark body { background: var(--bg); color: var(--text); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
.container {
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: 1rem;
}
/* ---------- Brand: KISS (white italic) + KH (orange box) ---------- */
.ks-brand {
	display: inline-flex;
	align-items: baseline;
	gap: 0.12rem;
	font-weight: 800;
	font-style: italic;
	font-size: 1.35rem;
	color: #fff;
	letter-spacing: -0.01em;
}
.ks-brand .ks-brand-kh {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--accent);
	color: #fff;
	font-style: normal;
	font-weight: 900;
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	padding: 0.12rem 0.3rem;
	border-radius: 2px;
	margin-left: 0.15rem;
}

/* ---------- Header + boxed icon nav ---------- */
.ks-header {
	background: #212121 !important;
	color: #fff;
	position: sticky;
	top: 0;
	z-index: 60;
	height: 64px;
	border-bottom: 1px solid #252525;
	box-shadow: none;
	padding: 0 30px;
	display: flex;
	align-items: center;
}
.ks-header .container {
	display: flex;
	align-items: center;
	gap: 15px;
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}
.ks-nav {
	display: flex;
	align-items: center;
	gap: 0.2rem;
	flex-wrap: wrap;
}
.ks-nav a, .ks-nav .ks-nav-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.85rem;
	color: #d8d8d8;
	padding: 0;
	border-radius: 0;
	background: transparent;
	transition: color 0.15s;
}
.ks-nav a svg, .ks-nav .ks-nav-item svg { width: 14px; height: 14px; flex-shrink: 0; }
.ks-nav a:hover { color: #fff; }
.ks-nav a.current-menu-item, .ks-nav a.ks-nav-active { color: #fff; }
.ks-menu-toggle {
	display: none;
	background: none;
	border: 1px solid #333;
	color: #fff;
	border-radius: 4px;
	padding: 0.45rem;
	margin-inline-start: auto;
}
.ks-header-actions {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin-inline-start: auto;
}
.ks-theme-toggle {
	background: #1c1c1c;
	border: 1px solid #333;
	color: #ddd;
	border-radius: 4px;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ks-theme-toggle svg { width: 17px; height: 17px; }
.ks-search-box { position: relative; }
.ks-search-toggle {
	background: #1c1c1c;
	border: 1px solid #333;
	color: #ddd;
	border-radius: 4px;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.ks-search-toggle svg { width: 16px; height: 16px; }
.ks-search-input {
	background: #111;
	border: 1px solid #3a3a3a;
	color: #fff;
	border-radius: 4px;
	padding: 0.45rem 0.7rem;
	font-size: 0.85rem;
	width: 240px;
}
.ks-search-results {
	position: absolute;
	top: 100%;
	right: 0;
	width: 320px;
	max-height: 60vh;
	overflow-y: auto;
	background: #1c1c1c;
	border: 1px solid #333;
	border-radius: 6px;
	margin-top: 0.4rem;
	display: none;
	z-index: 80;
}
.ks-search-open .ks-search-results { display: block; }
.ks-search-results a { display: flex; gap: 0.55rem; padding: 0.55rem; align-items: center; }
.ks-search-results a:hover { background: rgba(255, 122, 0, 0.12); }
.ks-search-results img { width: 38px; height: 52px; object-fit: cover; border-radius: 3px; }
.ks-search-results .ks-sr-title { font-size: 0.82rem; color: #eee; }
.ks-search-results .ks-sr-sub { font-size: 0.72rem; color: var(--muted); }
.ks-btn-outline, .ks-btn-solid {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.82rem;
	border-radius: 4px;
	padding: 0.45rem 0.85rem;
	transition: transform 0.14s cubic-bezier(0.23, 1, 0.32, 1), background 0.15s;
}
.ks-btn-outline { border: 1px solid #444; color: #ddd; }
.ks-btn-outline:hover { background: rgba(255, 255, 255, 0.07); }
.ks-btn-solid { background: #262626; border: 1px solid #3b3b3b; color: #fff; }
.ks-btn-solid:hover { background: #313131; }
.ks-btn-outline:active, .ks-btn-solid:active { transform: scale(0.97); }
.ks-auth-text { white-space: nowrap; }

/* ---------- Hero banner slider (16:9) ---------- */
.ks-hero {
	position: relative;
	width: 100%;
	height: clamp(200px, 34vw, 460px);
	overflow: hidden;
	background: #111;
	margin-top: 0;
	border-radius: 0;
}
.ks-hero-slides { position: relative; width: 100%; height: 100%; }
.ks-hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.5s ease;
}
.ks-hero-slide.ks-hero-active { opacity: 1; }
.ks-hero-media {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #111;
}
.ks-hero-media::before {
	content: "";
	position: absolute;
	inset: -28px;
	background-image: var(--ks-hero-poster);
	background-size: cover;
	background-position: center;
	filter: blur(22px) brightness(0.52);
	transform: scale(1.08);
}
.ks-hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.14);
}
.ks-hero-media .ks-hero-image {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
}
@media (max-width: 700px) {
	.ks-hero {
		height: clamp(250px, 92vw, 560px);
	}
	.ks-hero-media .ks-hero-image {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
}
.ks-hero-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.02) 45%, rgba(17, 17, 17, 0.55) 100%);
}
.ks-hero-title {
	position: absolute;
	left: 20px;
	top: 20px;
	z-index: 5;
	color: #fff;
	font-size: 0.95rem;
	font-weight: 700;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
	white-space: normal;
	display: inline-block;
	max-width: 80%;
	padding: 4px 12px;
	border-radius: 4px;
}
.ks-hero-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 6;
	background: transparent;
	border: none;
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	padding: 0.4rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-shadow: 0 1px 4px rgba(0,0,0,0.6);
	transition: opacity 0.15s;
}
.ks-hero-arrow svg { display: none; }
.ks-hero-arrow:hover { opacity: 0.6; }
.ks-hero-arrow.ks-hero-prev { left: 0.4rem; }
.ks-hero-arrow.ks-hero-next { right: 0.4rem; }
.ks-hero-dots {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 25px;
	z-index: 6;
	display: flex;
	gap: 16px;
}
.ks-hero-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14);
	border: none;
	padding: 0;
	transition: all 0.2s;
}
.ks-hero-dot.ks-hero-active { background: #fff; opacity: 1; transform: scale(1.15); }
.ks-hero-dot:not(.ks-hero-active) { opacity: 0.55; }

/* ---------- Section rails (kisskh: padding 5px 55px 10px) ---------- */
.ks-rail-section { margin: 0; padding: 5px 55px 10px; position: relative; }
.ks-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 0.7rem;
}
.ks-section-head h2 {
	font-size: 1.05rem;
	font-weight: 800;
	color: #fff;
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}
.ks-section-head h2 a, .ks-section-head h2 .ks-sec-arrow { color: var(--accent); font-size: 0.9em; }
.ks-cw-clear {
	background: #333;
	border: none;
	color: #ddd;
	font-size: 0.75rem;
	padding: 0.35rem 0.7rem;
	border-radius: 3px;
	cursor: pointer;
}
.ks-cw-clear:hover { background: #404040; }
.ks-poster-16x10 { aspect-ratio: 16 / 10; }
.ks-ep-per-page {
	background: #333;
	border: 1px solid #4a4a4a;
	color: #eee;
	font-size: 0.78rem;
	border-radius: 3px;
	padding: 0.2rem 0.4rem;
}
.ks-ep-page-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	background: #333;
	border: 1px solid #4a4a4a;
	color: #eee;
	border-radius: 3px;
	font-size: 0.8rem;
	transition: background 0.15s;
}
.ks-ep-page-btn:hover { background: #404040; }
.ks-rail {
	position: relative;
}
.ks-rail-grid {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-behavior: smooth;
	padding-bottom: 15px;
	position: relative;
	scrollbar-width: thin;
	scrollbar-color: #3a3a3a transparent;
}
.ks-rail-grid::-webkit-scrollbar { height: 5px; }
.ks-rail-grid::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 3px; }
.ks-rail-arrow {
	position: absolute;
	top: 35%;
	transform: translateY(-50%);
	z-index: 5;
	width: 40px;
	height: 60px;
	background: transparent;
	border: none;
	color: rgba(255, 255, 255, 0.75);
	font-size: 28px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.15s;
}
.ks-rail-arrow svg { display: none; }
.ks-rail-arrow.ks-rail-prev { left: 0; }
.ks-rail-arrow.ks-rail-next { right: 0; }

/* Poster card — kisskh style: EP badge bottom-right, title below */
.ks-card { scroll-snap-align: start; }
.ks-poster {
	position: relative;
	display: block;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--placeholder);
	aspect-ratio: 16 / 9;
	min-width: 220px;
}
.ks-poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1); }
.ks-poster:hover img { transform: scale(1.04); }
.ks-ep-badge {
	position: absolute;
	right: 0;
	bottom: 0;
	background: transparent;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	padding: 0;
	text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}
.ks-no-poster { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #262626, #1c1c1c); }
.ks-card-title {
	display: block;
	padding: 0 10px 10px;
	margin-top: 0;
	font-size: 0.875rem;
	font-weight: 500;
	color: #e3e3e3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.25;
}
.ks-card-title:hover { color: #fff; }

/* ---------- Detail page: backdrop left + grey panel right ---------- */
.ks-detail-full {
	display: flex;
	min-height: 100vh;
}
.ks-detail-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: min(60%, 720px);
	height: 100vh;
	background-size: cover;
	background-position: center;
}
.ks-detail-backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(17, 17, 17, 0.85) 0%, rgba(17, 17, 17, 0.25) 60%, rgba(17, 17, 17, 0.15) 100%);
}
/* Episode page: video player occupies the left column (kisskh ?ep=N style) */
.ks-player-screen {
	background: #0a0a0a !important;
	background-image: none !important;
}
.ks-player-screen::after { display: none; }
.ks-player-screen > iframe,
.ks-player-screen > video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000;
}
.ks-player-screen > video:focus-visible { outline: none; }
/* Active episode square (white highlight, like kisskh) */
.ks-ep-active .ks-episode {
	background: #ffffff !important;
}
.ks-ep-active .ks-episode-num {
	color: #111111 !important;
}
.ks-ep-active .ks-cc-badge {
	background: #ff7a00 !important;
	color: #ffffff !important;
}
.ks-detail-panel {
	margin-inline-start: min(55%, 660px);
	width: calc(100% - min(55%, 660px));
	flex: 1 1 auto;
	min-width: 0;
	background: var(--panel);
	padding: 1.3rem 1.5rem 2rem;
	min-height: 100vh;
}
.ks-detail-panel h1 {
	font-size: 1.35rem;
	font-weight: 800;
	color: #fff;
	margin: 0 0 0.3rem;
	line-height: 1.3;
}
.ks-detail-date { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.6rem; }
.ks-detail-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
.ks-detail-pills span {
	background: #8d8d8d;
	color: #fff;
	font-size: 0.72rem;
	font-weight: 500;
	padding: 0.2rem 0.55rem;
	border-radius: 3px;
}
.ks-action-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.6rem;
	margin-bottom: 1rem;
}
.ks-action-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	background: #202020;
	border: 1px solid #333;
	color: #ddd;
	border-radius: 5px;
	padding: 0.75rem 0.3rem;
	font-size: 0.72rem;
	cursor: pointer;
	transition: background 0.15s, transform 0.14s cubic-bezier(0.23, 1, 0.32, 1);
}
.ks-action-btn svg { width: 19px; height: 19px; }
.ks-action-btn:hover { background: #222; color: #fff; }
.ks-detail-adnote { font-size: 0.72rem; color: #9a9a9a; margin: 0 0 0.8rem; }
.ks-action-btn:active { transform: scale(0.97); }

/* In-site embedded video player (episode page) */
.ks-embed-player {
	width: 100%;
	margin: 0 0 1.1rem;
	background: #000;
	border-radius: 4px;
	overflow: hidden;
}
.ks-embed-player video {
	width: 100%;
	max-height: 62vh;
	display: block;
	background: #000;
}
.ks-embed-player iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	display: block;
	background: #000;
}

/* Episode squares (kisskh style: centered compact grid, number + CC top-right) */
.ks-episodes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin: 0.8rem 0 1.4rem;
}
.ks-episode-row {
	width: 54px;
	height: 54px;
	background: #333;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.ks-episode-row .ks-episode { width: 100%; height: 100%; }
.ks-episode-num { color: #fff; font-size: 1.05rem; font-weight: 600; }
.ks-episode .ks-cc-badge {
	position: absolute;
	top: 2px;
	right: 2px;
	font-size: 0.5rem;
	font-weight: 700;
	color: #e3e3e3;
}
.ks-episode-row { position: relative; }
.ks-watch-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	background: var(--accent);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 600;
	padding: 0.2rem 0.55rem;
	border-radius: 3px;
	transition: background 0.15s, transform 0.14s cubic-bezier(0.23, 1, 0.32, 1);
}
.ks-watch-btn svg { width: 11px; height: 11px; }
.ks-watch-btn:hover { background: var(--accent-dark); }
.ks-watch-btn:active { transform: scale(0.97); }

/* Description accordion */
.ks-accordion {
	border: 1px solid #333;
	border-radius: 5px;
	overflow: hidden;
	margin-bottom: 1.1rem;
}
.ks-accordion {
	border: none;
	border-radius: 5px;
	overflow: hidden;
	margin-bottom: 1.1rem;
}
.ks-accordion summary {
	list-style: none;
	cursor: pointer;
	padding: 0.65rem 0.8rem;
	font-size: 0.85rem;
	font-weight: 700;
	color: #222;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #d8d8d8;
	user-select: none;
	border-radius: 5px;
}
.ks-accordion summary::-webkit-details-marker { display: none; }
.ks-accordion[open] summary .ks-acc-arrow { transform: rotate(180deg); }
.ks-acc-arrow { transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1); font-size: 0.75rem; color: var(--muted); }
.ks-accordion .ks-accordion-body { padding: 0.8rem; font-size: 0.84rem; line-height: 1.6; color: #cfcfcf; }
.ks-accordion .ks-accordion-body p { margin: 0 0 0.6rem; }
.ks-genres { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.8rem; }
.ks-genre-tag {
	background: rgba(255, 122, 0, 0.12);
	color: var(--accent);
	font-size: 0.72rem;
	font-weight: 600;
	padding: 0.18rem 0.55rem;
	border-radius: 20px;
}

/* Share / report modals */
.ks-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.72);
	z-index: 120;
	display: none;
	align-items: center;
	justify-content: center;
}
.ks-modal-backdrop.ks-modal-open { display: flex; }
.ks-modal {
	background: #303030;
	border: 1px solid #3f3f3f;
	border-radius: 8px;
	width: min(380px, calc(100% - 2rem));
	max-height: 85vh;
	overflow-y: auto;
	padding: 1.2rem;
	position: relative;
}
.ks-modal h3 { margin: 0 0 0.9rem; font-size: 1rem; color: #fff; }
.ks-modal-close {
	position: absolute;
	top: 0.8rem;
	right: 0.8rem;
	background: none;
	border: none;
	color: #ddd;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
}
.ks-share-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.6rem;
	margin-bottom: 0.9rem;
}
.ks-share-grid a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	color: #ddd;
	font-size: 0.72rem;
	padding: 0.6rem 0.3rem;
	background: #262626;
	border-radius: 5px;
}
.ks-share-grid a:hover { background: #313131; color: #fff; }
.ks-share-grid a svg { width: 22px; height: 22px; }
.ks-copy-row { display: flex; gap: 0.4rem; }
.ks-copy-row input {
	flex: 1;
	background: #fff;
	color: #222;
	border: none;
	border-radius: 3px;
	padding: 0.5rem 0.6rem;
	font-size: 0.8rem;
	min-width: 0;
}
.ks-copy-row button {
	background: var(--accent);
	color: #fff;
	border: none;
	border-radius: 3px;
	padding: 0 0.8rem;
	font-size: 0.8rem;
	font-weight: 700;
	cursor: pointer;
}
.ks-copy-row button:hover { background: var(--accent-dark); }

/* Player wrap */
.ks-player-wrap { margin: 1.1rem 0 1.4rem; }
.ks-player-wrap video { width: 100%; border-radius: 5px; background: #000; }
.ks-section-title {
	font-size: 1.02rem;
	font-weight: 800;
	color: #fff;
	margin: 1.5rem 0 0.7rem;
}

/* ---------- Footer ---------- */
.ks-footer {
	background: #121212;
	border-top: 1px solid #1a1a1a;
	color: #737373;
	padding: 10px 20px;
	margin-top: 2.5rem;
	font-size: 0.8rem;
}
.ks-footer-disclaimer { max-width: 820px; margin: 0 auto 0.9rem; text-align: center; line-height: 1.55; color: #737373; }
.ks-footer-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem 1.1rem;
}
.ks-footer-links a { color: #bbb; }
.ks-footer-links a:hover { color: var(--accent); }
.ks-footer-bottom {
	display: flex;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 0.8rem;
	font-size: 0.74rem;
	color: #6e6e6e;
}

/* Bottom nav (mobile) */
.ks-bottom-nav {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: #151515;
	border-top: 1px solid #2c2c2c;
	z-index: 70;
	justify-content: space-around;
	padding: 0.25rem 0 0.4rem;
}
.ks-bottom-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	color: #b5b5b5;
	font-size: 0.62rem;
	padding: 0.35rem 0.3rem;
	min-width: 0;
}
.ks-bottom-item svg { width: 19px; height: 19px; }
.ks-bottom-item:hover, .ks-bottom-item.ks-bottom-active { color: var(--accent); }
body { padding-bottom: 0; }
@media (max-width: 700px) {
	body { padding-bottom: 58px; }
	.ks-bottom-nav { display: flex; }
}

/* ---------- Airing schedule / calendar (kisskh style) ---------- */
.ks-qtabs { display: flex; gap: 0.5rem; margin: 0.9rem 0; flex-wrap: wrap; }
.ks-qtab {
	padding: 0.42rem 0.9rem;
	background: var(--card);
	border: 1px solid var(--border);
	color: #bbb;
	border-radius: 5px;
	font-size: 0.78rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.15s, color 0.15s;
}
.ks-qtab:hover { border-color: #444; color: #fff; }
.ks-qtab-active { border-color: var(--accent); color: var(--accent); }
.ks-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; margin: 0 0 1.2rem; }
.ks-day {
	display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
	padding: 0.55rem 0.3rem;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 6px;
	color: #999;
	text-decoration: none;
	font-size: 0.72rem;
	transition: border-color 0.15s, color 0.15s;
}
.ks-day:hover { border-color: #444; color: #fff; }
.ks-day-num { font-size: 0.95rem; font-weight: 700; }
.ks-day-name { font-weight: 600; }
.ks-day-active { border-color: var(--accent); color: var(--accent); }
.ks-day-airing { border-bottom: 3px solid var(--accent); }
.ks-sched-day { margin: 0 0 1.4rem; }
.ks-sched-head {
	display: flex; align-items: center; justify-content: space-between;
	margin: 0 0 0.7rem;
}
.ks-sched-head h2 { font-size: 0.95rem; font-weight: 700; color: #eee; margin: 0; }
.ks-sched-actions { display: flex; align-items: center; gap: 0.6rem; }
.ks-sched-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 5px;
	color: #ccc;
	text-decoration: none;
	transition: border-color 0.15s;
}
.ks-sched-btn:hover { border-color: var(--accent); color: var(--accent); }
.ks-sched-btn svg { width: 16px; height: 16px; }
.ks-sched-filter {
	display: inline-flex; align-items: center; gap: 0.35rem;
	color: #999;
	font-size: 0.75rem;
	text-decoration: none;
}
.ks-sched-filter:hover { color: var(--accent); }
.ks-sched-filter svg { width: 13px; height: 13px; }
.ks-sched-grid { display: flex; flex-direction: column; gap: 0.45rem; }
.ks-show-row {
	display: flex; align-items: center; gap: 0.65rem;
	padding: 0.55rem 0.6rem;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 6px;
	text-decoration: none;
	transition: border-color 0.15s;
}
.ks-show-row:hover { border-color: #444; }
.ks-show-poster {
	flex: 0 0 auto;
	width: 40px; height: 40px;
	border-radius: 5px;
	background: var(--placeholder);
	background-size: cover;
	background-position: center;
	display: flex; align-items: center; justify-content: center;
	color: #666;
	font-size: 0.6rem;
	font-weight: 700;
	text-align: center;
	overflow: hidden;
}
.ks-show-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0.1rem; }
.ks-show-title { color: #eee; font-size: 0.85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ks-show-ep { color: #999; font-size: 0.72rem; }
.ks-show-time { color: var(--accent); font-size: 0.72rem; font-weight: 600; }
.ks-show-plus { color: #666; font-size: 1.1rem; font-weight: 300; }
.ks-sched-empty { color: var(--muted); font-size: 0.8rem; margin: 0.4rem 0; }
.ks-sched-title { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 1.35rem; font-weight: 800; color: #fff; margin: 0; }
.ks-sched-title svg { width: 26px; height: 26px; color: var(--accent); }

/* ---------- News + calendar / misc tokens ---------- */
.ks-news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.9rem; }
.ks-news-card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform 0.18s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.18s;
}
.ks-news-card:hover { transform: translateY(-2px); border-color: #3c3c3c; }
.ks-news-img {
	aspect-ratio: 16 / 9;
	background: var(--placeholder);
	background-size: cover;
	background-position: center;
	position: relative;
}
.ks-badge {
	position: absolute;
	left: 0.5rem;
	top: 0.5rem;
	background: var(--accent);
	color: #fff;
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	padding: 0.2rem 0.5rem;
	border-radius: 3px;
}
.ks-news-body { padding: 0.85rem 0.95rem 1rem; }
.ks-news-body h2 { font-size: 0.95rem; color: #eee; margin: 0 0 0.4rem; line-height: 1.35; }
.ks-news-body h2 a:hover { color: var(--accent); }
.ks-news-meta { font-size: 0.74rem; color: var(--muted); display: flex; gap: 0.6rem; flex-wrap: wrap; }
.ks-upcoming-strip, .ks-side-card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 0.9rem 1rem;
	margin-bottom: 0.9rem;
}
.ks-upcoming-strip h3, .ks-side-card h3 { font-size: 0.9rem; color: #fff; margin: 0 0 0.7rem; display: flex; align-items: center; gap: 0.45rem; }
.ks-upcoming-strip h3 svg { width: 15px; height: 15px; color: var(--accent); }
.ks-upcoming-list { list-style: none; margin: 0; padding: 0; }
.ks-upcoming-list li { margin-bottom: 0.45rem; }
.ks-upcoming-item { font-size: 0.82rem; color: #d5d5d5; display: flex; gap: 0.5rem; }
.ks-upcoming-item:hover { color: var(--accent); }
.ks-upcoming-date { color: var(--accent); font-weight: 700; font-size: 0.75rem; }
.ks-cal-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--accent);
	font-weight: 700;
	font-size: 0.85rem;
}
.ks-follow-grid { display: flex; gap: 0.5rem; }
.ks-follow-btn {
	flex: 1;
	text-align: center;
	background: #262626;
	border: 1px solid #3b3b3b;
	border-radius: 4px;
	padding: 0.45rem 0;
	font-size: 0.78rem;
	color: #ddd;
}
.ks-follow-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Carousel (used on detail related + single-news) */
.ks-carousel {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 0.8rem;
}
@media (max-width: 1100px) { .ks-carousel { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .ks-carousel { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .ks-carousel { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; } }
@media (max-width: 480px)  { .ks-carousel { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; } }
@media (max-width: 380px)  { .ks-carousel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Comments */
.ks-comments { margin-top: 1.5rem; }
.ks-comments h3 { font-size: 1rem; color: #fff; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
	background: #222;
	border: 1px solid #3b3b3b;
	color: #eee;
	border-radius: 4px;
	padding: 0.55rem 0.7rem;
	width: 100%;
	font-size: 0.85rem;
	font-family: inherit;
	box-sizing: border-box;
}
.comment-form textarea { min-height: 110px; resize: vertical; }
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--accent); outline: none; }
.comment-form input[type="submit"] {
	background: var(--accent);
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 0.55rem 1.2rem;
	font-weight: 700;
	cursor: pointer;
}
.comment-form input[type="submit"]:hover { background: var(--accent-dark); }
.comment { border-top: 1px solid #2c2c2c; padding: 0.8rem 0; }
.comment .fn { color: #eee; font-weight: 700; }
.comment-meta { font-size: 0.74rem; color: var(--muted); }

/* Breadcrumbs */
.ks-breadcrumbs { padding: 0.55rem 0 0; font-size: 0.74rem; color: var(--muted); }
.ks-breadcrumbs a { color: var(--accent); }
.ks-breadcrumbs a:hover { text-decoration: underline; }

/* Pagination */
.ks-pagination { display: flex; justify-content: center; gap: 0.5rem; margin: 2rem 0; }
.ks-pagination a, .ks-pagination span {
	padding: 0.35rem 0.7rem;
	border-radius: 4px;
	border: 1px solid #333;
	color: #ddd;
	background: #1c1c1c;
}
.ks-pagination a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.ks-pagination span { color: var(--accent); font-weight: 700; border-color: var(--accent); }
.ks-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 0.8rem;
}
.ks-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.2rem; align-items: start; }

/* Calendar */
.ks-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.ks-cal-head h1 { font-size: 1.15rem; color: #fff; margin: 0; }
.ks-cal-nav { display: flex; gap: 0.5rem; }
.ks-cal-nav a {
	background: #1c1c1c;
	border: 1px solid #333;
	color: #ddd;
	border-radius: 4px;
	padding: 0.4rem 0.75rem;
	font-size: 0.8rem;
}
.ks-cal-nav a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.ks-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.4rem; }
.ks-cal-dow { text-align: center; font-size: 0.72rem; color: var(--muted); font-weight: 700; padding: 0.35rem 0; }
.ks-cal-day {
	min-height: 78px;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 4px;
	padding: 0.35rem 0.45rem;
	font-size: 0.78rem;
}
.ks-cal-day .ks-cal-num { font-weight: 700; color: #eee; }
.ks-cal-day.ks-cal-empty { background: transparent; border-color: transparent; }
.ks-cal-day.ks-cal-today { border-color: var(--accent); }
.ks-cal-day .ks-cal-ev {
	display: block;
	background: rgba(255, 122, 0, 0.14);
	color: var(--accent);
	border-radius: 3px;
	padding: 0.12rem 0.3rem;
	margin-top: 0.2rem;
	font-size: 0.66rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ks-cal-day .ks-cal-ev:hover { background: var(--accent); color: #fff; }
@media (max-width: 760px) { .ks-cal-grid { grid-template-columns: repeat(7, 1fr); gap: 0.2rem; } .ks-cal-day { min-height: 56px; padding: 0.25rem; font-size: 0.7rem; } .ks-cal-day .ks-cal-ev { font-size: 0.58rem; } }

/* ---------- Explore page (archive-drama): kisskh.hk filter chips + grid cards ---------- */
.ks-filters { margin: 0 0 1.2rem; }
.ks-filter-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-bottom: 0.65rem;
}
.ks-explore-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 0.9rem;
	margin-bottom: 1.5rem;
}
.ks-explore-card {
	width: auto;
	min-width: 0;
}
.ks-explore-card .ks-poster { border-radius: 3px; background: #222; min-width: 0; width: 100%; }
.ks-explore-card .ks-poster img { object-fit: cover; width: 100%; height: 100%; }
.ks-explore-card .ks-no-poster { display: block; }
.ks-explore-card .ks-no-poster { background: #2b2b2b; }
.ks-status-pill {
	position: absolute;
	left: 6px;
	bottom: 6px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	font-size: 0.66rem;
	font-weight: 600;
	padding: 0.12rem 0.4rem;
	border-radius: 2px;
	letter-spacing: 0.01em;
}
.ks-explore-card .ks-card-title {
	background: #2a2a2a;
	border-radius: 0 0 3px 3px;
	margin-top: 0;
	padding: 0.4rem 0.55rem;
	border-top: 1px solid #353535;
	color: #e3e3e3;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.3;
}
.ks-explore-card .ks-card-title:hover { color: var(--accent); }

/* ---------- Responsive / mobile ---------- */
@media (max-width: 768px) {
	.ks-explore-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
	.ks-explore-card { width: 100%; }
	.ks-rail-grid { grid-auto-columns: minmax(130px, 1fr); }
	.ks-menu-toggle { display: inline-flex; align-items: center; justify-content: center; background: none; border: 1px solid #333; color: #fff; border-radius: 4px; padding: 0.45rem; }
	.ks-nav {
		display: none;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		margin: 0.5rem 0 0;
		padding: 0.3rem;
		gap: 0;
	}
	.ks-nav.ks-nav-open { display: flex; }
	.ks-header .container { flex-wrap: wrap; }
	.ks-header-actions { order: 3; width: 100%; justify-content: flex-end; margin: 0.35rem 0 0; }
	.ks-search-input { width: 160px; }
	.ks-search-results { width: calc(100vw - 2rem); }

	.ks-detail-full { flex-direction: column; }
	.ks-detail-backdrop { position: relative; width: 100%; height: 42vh; }
	.ks-detail-panel { margin-inline-start: 0; padding: 1rem; min-height: auto; }
	.ks-episode-row { width: 48px; height: 48px; }
	.ks-hero { height: auto; aspect-ratio: 16 / 9; max-height: none; border-radius: 0; margin-top: 0; }
	.ks-hero-title { font-size: 0.82rem; }
	.ks-action-row { grid-template-columns: repeat(4, 1fr); gap: 0.45rem; }
}
@media (max-width: 560px) {
	.ks-episode-row { width: 44px; height: 44px; }
	.ks-rail-grid { grid-auto-columns: minmax(120px, 1fr); }
	.ks-auth-text { display: none; }
	.ks-btn-outline .ks-auth-text, .ks-btn-solid .ks-auth-text { display: inline; }
	.ks-btn-solid .ks-auth-text::after, .ks-btn-outline .ks-auth-text::after { content: ""; }
}
@media (max-width: 480px) {
	.ks-detail-panel h1 { font-size: 1.15rem; }
	.ks-news-grid { grid-template-columns: 1fr; }
}

/* ---------- Light mode (toggle) — keep kisskh dark as default; light inverts safely ---------- */
body:not(.ks-dark) {
	--bg: #f4f4f4;
	--bg-2: #ebebeb;
	--card: #ffffff;
	--panel: #ffffff;
	--text: #1f1f1f;
	--muted: #757575;
	--border: #e2e2e2;
	--placeholder: #dcdcdc;
	background: var(--bg);
	color: var(--text);
}
body:not(.ks-dark) .ks-header { background: linear-gradient(180deg, #232323 0%, #181818 100%); }
body:not(.ks-dark) .ks-brand { color: #fff; }
body:not(.ks-dark) .ks-nav a, body:not(.ks-dark) .ks-nav .ks-nav-item { color: #e3e3e3; }
body:not(.ks-dark) .ks-card-title { color: #444; }
body:not(.ks-dark) .ks-news-body h2 { color: #222; }
body:not(.ks-dark) .ks-upcoming-item { color: #333; }
body:not(.ks-dark) .ks-search-results { background: #fff; border-color: #ddd; }
body:not(.ks-dark) .ks-search-results .ks-sr-title { color: #222; }
body:not(.ks-dark) .ks-footer { background: #1c1c1c; color: #9a9a9a; }
body:not(.ks-dark) .ks-bottom-nav { background: #222; border-top-color: #353535; }
body:not(.ks-dark) .ks-bottom-item { color: #c5c5c5; }
body:not(.ks-dark) .ks-cal-day { background: #fff; }
body:not(.ks-dark) .ks-breadcrumbs, body:not(.ks-dark) .ks-pagination { color: var(--muted); }
body:not(.ks-dark) .ks-section-head h2 { color: #1f1f1f; }
body:not(.ks-dark) .ks-section-title { color: #1f1f1f; }
body:not(.ks-dark) .ks-detail-panel h1 { color: #111; }
body:not(.ks-dark) .ks-accordion summary { color: #111; background: #e4e4e4; }
body:not(.ks-dark) .ks-accordion .ks-accordion-body { color: #333; }
body:not(.ks-dark) .ks-ep-row a.ks-episode { color: #333; }
body:not(.ks-dark) .ks-episode-num { color: #111; }
body:not(.ks-dark) .ks-episode-title { color: #555; }
body:not(.ks-dark) .ks-news-card { border-color: var(--border); }
body:not(.ks-dark) .comment { border-top-color: #e4e4e4; }
body:not(.ks-dark) .comment .fn { color: #111; }
body:not(.ks-dark) .ks-cal-head h1, body:not(.ks-dark) .ks-comments h3 { color: #1f1f1f; }
body:not(.ks-dark) .ks-filter-chip { background: #fff; border-color: #ccc; color: #333; }

/* Overflow clamp — no side-to-side screen movement */
html, body { overflow-x: hidden; }
.ks-footer, .ks-footer-inner, .ks-bottom-nav, main, .ks-detail-panel { max-width: 100%; min-width: 0; box-sizing: border-box; }
*, *::before, *::after { box-sizing: border-box; }

/* ---------- Full-screen search overlay (kisskh style, v22) ---------- */
.ks-search-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: #1a1a1a;
	z-index: 10000;
	display: none;
	flex-direction: column;
	overflow-y: auto;
}
.ks-search-overlay.ks-search-visible { display: flex; }
.ks-search-overlay-header {
	display: flex;
	align-items: center;
	height: 64px;
	padding: 0 20px;
	border-bottom: 1px solid #2d2d2d;
	background-color: #1a1a1a;
	gap: 15px;
}
.ks-search-back-btn {
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
	padding: 6px;
	display: inline-flex;
	align-items: center;
}
.ks-search-back-btn svg { width: 24px; height: 24px; }
.ks-search-input-wrap { flex: 1; }
.ks-search-overlay-input {
	width: 100%;
	background: transparent;
	border: none;
	color: #fff;
	font-size: 18px;
	padding: 8px 0;
	outline: none;
}
.ks-search-overlay-content { max-width: 1200px; width: 100%; margin: 0 auto; padding: 20px; box-sizing: border-box; }
.ks-search-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.ks-filter-tab {
	background-color: #2e2e2e;
	color: #ffffff;
	padding: 6px 16px;
	border-radius: 20px;
	border: none;
	font-size: 14px;
	cursor: pointer;
	font-weight: 500;
	transition: background 0.2s, color 0.2s;
}
.ks-filter-tab.ks-filter-active, .ks-filter-tab:hover { background-color: #ffffff; color: #121212; }
.ks-popular-search-title { color: #ffffff; font-size: 20px; margin: 0 0 15px; font-weight: 600; }
.ks-popular-search-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.ks-popular-search-card { background: #252525; border-radius: 6px; overflow: hidden; transition: transform 0.2s; }
.ks-popular-search-card:hover { transform: translateY(-3px); }
.ks-popular-search-card a { text-decoration: none; display: block; }
.ks-ps-img {
	aspect-ratio: 16 / 9;
	background-size: cover;
	background-position: center;
	background-color: #333;
	position: relative;
}
.ks-ps-type {
	position: absolute;
	left: 8px;
	bottom: 8px;
	background: rgba(0, 0, 0, 0.65);
	color: #fff;
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 3px;
}
.ks-ps-title {
	color: #e3e3e3;
	font-size: 14px;
	padding: 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------- Explore filter chips (kisskh flat style, v22) ---------- */
.ks-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.2rem; align-items: center; }
.ks-filter-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.ks-filter-chip {
	background: #2e2e2e;
	border: none;
	color: #ffffff;
	border-radius: 20px;
	padding: 6px 16px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
}
.ks-filter-chip.ks-filter-active { background: #ffffff; color: #121212; }
.ks-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/* ---------- Mobile burger + mobile nav (kisskh style, v22) ---------- */
.ks-burger {
	display: none;
	background: #2a2a2a;
	border: none;
	color: #ffffff;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
}
.ks-burger svg { width: 22px; height: 22px; }
.ks-search-trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	color: #d8d8d8;
	cursor: pointer;
	font-size: 0.85rem;
}
.ks-search-trigger:hover { color: #fff; }
.ks-sidebar-dim {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 80;
	display: none;
}
.ks-sidebar-dim.ks-dim-visible { display: block; }

@media (max-width: 900px) {
	.ks-burger { display: inline-flex; }
	.ks-search-trigger span { display: none; }
	.ks-nav {
		position: fixed;
		top: 0;
		left: 0;
		width: min(300px, 80vw);
		height: 100vh;
		background: #1a1a1a;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 80px 10px 20px;
		z-index: 90;
		transform: translateX(-100%);
		transition: transform 0.25s cubic-bezier(0.23, 1, 0.32, 1);
	}
	.ks-nav.ks-nav-mobile-open { transform: translateX(0); }
	.ks-nav a {
		padding: 12px 16px;
		color: #d8d8d8;
		border-radius: 4px;
	}
	.ks-nav a:hover { background: #2a2a2a; }
	.ks-headers-actions-mobile { display: none; }
	.ks-popular-search-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.ks-episode-row { width: 42px; height: 42px; }
	.ks-rail-grid { grid-auto-columns: minmax(120px, 1fr); }
	.ks-auth-text { display: none; }
	.ks-btn-outline .ks-auth-text, .ks-btn-solid .ks-auth-text { display: inline; }
	.ks-btn-solid .ks-auth-text::after, .ks-btn-outline .ks-auth-text::after { content: ""; }
	.ks-hero { height: 230px; }
	.ks-rail-section { padding-inline: 20px; }
}

/* ---------- Homepage v22 additions (kisskh.hk exact) ---------- */
.ks-hero-title-pill {
	display: inline-block;
	background: rgba(0, 0, 0, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 500;
	padding: 2px 10px;
	border-radius: 4px;
	margin-right: 10px;
	vertical-align: middle;
}
.ks-upcoming-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 20px;
}
.ks-upcoming-card {
	background: #262626;
	border-radius: 8px;
	overflow: hidden;
	display: block;
	text-decoration: none;
	transition: transform 0.2s;
}
.ks-upcoming-card:hover { transform: translateY(-3px); }
.ks-upcoming-img {
	aspect-ratio: 16 / 9;
	background-size: cover;
	background-position: center;
	background-color: #333;
}
.ks-upcoming-info {
	padding: 10px 12px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.ks-upcoming-info .ks-upcoming-date {
	color: #f77e0b;
	font-size: 0.8rem;
	white-space: nowrap;
}
.ks-upcoming-info .ks-upcoming-title {
	color: #e3e3e3;
	font-size: 0.9rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------- v24.1 KissKH.co layout refinements ---------- */
body.home .container,
body.front-page .container {
	max-width: none;
	padding-inline: clamp(20px, 4vw, 64px);
}

body.home .ks-rail-section,
body.front-page .ks-rail-section {
	padding-inline: 0;
}

body.home #main-content,
body.front-page #main-content {
	width: 100%;
	max-width: none;
}

body.home .ks-rail-grid,
body.front-page .ks-rail-grid {
	gap: clamp(12px, 1.4vw, 22px);
}

body.home .ks-poster,
body.front-page .ks-poster {
	min-width: clamp(180px, 18vw, 250px);
}

.single-drama #main-content {
	max-width: none;
	width: 100%;
}

.single-drama .ks-detail-full {
	display: block;
	max-width: 1440px;
	min-height: 0;
	margin: 0 auto;
	padding: clamp(16px, 3vw, 36px) clamp(16px, 4vw, 64px) 4rem;
}

.single-drama .ks-detail-backdrop {
	position: relative;
	top: auto;
	left: auto;
	width: 100%;
	height: clamp(300px, 42vw, 540px);
	min-height: 300px;
	border-radius: 8px;
	overflow: hidden;
	background-color: #181818;
	background-position: center 25%;
}

.single-drama .ks-detail-backdrop::after {
	background: linear-gradient(
		180deg,
		rgba(15, 15, 15, .12) 0%,
		rgba(15, 15, 15, .18) 34%,
		rgba(15, 15, 15, .92) 100%
	);
}

.single-drama .ks-player-screen {
	height: auto;
	aspect-ratio: 16 / 9;
	min-height: 0;
}

.single-drama .ks-player-screen > iframe,
.single-drama .ks-player-screen > video {
	position: absolute;
}

.single-drama .ks-detail-panel {
	position: relative;
	z-index: 2;
	width: min(1080px, calc(100% - 2rem));
	margin: -120px auto 0;
	padding: clamp(20px, 3vw, 36px);
	min-height: 0;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 9px;
	background: rgba(48, 48, 48, .98);
	box-shadow: 0 16px 50px rgba(0, 0, 0, .28);
}

.ks-detail-header {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	margin-bottom: 18px;
}

.ks-detail-poster {
	width: 150px;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	border-radius: 6px;
	background: #222;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}

.ks-detail-poster img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ks-detail-header-copy {
	min-width: 0;
	padding-top: 4px;
}

.single-drama .ks-detail-header-copy h1 {
	margin-top: 0;
}

.single-drama .ks-detail-header-copy .ks-detail-pills {
	margin-bottom: 0;
}

.single-drama .ks-action-row {
	max-width: 720px;
}

.single-drama .ks-episodes {
	justify-content: flex-start;
	padding: 4px 0 8px;
}

.single-drama .ks-section-title {
	margin-top: 1.25rem;
}

.single-drama .ks-player-screen + .ks-detail-panel {
	margin-top: 18px;
}

.ks-theme-switch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: #1c1c1c;
	border: 1px solid #333;
	color: #ddd;
	border-radius: 4px;
	cursor: pointer;
}

.ks-theme-switch svg {
	width: 17px;
	height: 17px;
}

@media (max-width: 700px) {
	body.home .container,
	body.front-page .container {
		padding-inline: 16px;
	}

	.single-drama .ks-detail-full {
		padding: 12px 12px 3rem;
	}

	.single-drama .ks-detail-backdrop {
		height: 230px;
		min-height: 230px;
		border-radius: 6px;
	}

	.single-drama .ks-player-screen {
		height: auto;
		aspect-ratio: 16 / 9;
	}

	.single-drama .ks-detail-panel {
		width: 100%;
		margin: -42px auto 0;
		padding: 18px 14px 24px;
		border-radius: 7px;
	}

	.single-drama .ks-player-screen + .ks-detail-panel {
		margin-top: 12px;
	}

	.ks-detail-header {
		grid-template-columns: 92px minmax(0, 1fr);
		gap: 14px;
	}

	.ks-detail-poster {
		width: 92px;
	}

	.single-drama .ks-detail-header-copy h1 {
		font-size: 1.08rem;
	}
}

@media (max-width: 420px) {
	.ks-detail-header {
		grid-template-columns: 78px minmax(0, 1fr);
		gap: 11px;
	}

	.ks-detail-poster {
		width: 78px;
	}

	.single-drama .ks-action-row {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---------- Single drama polish — KissKH-inspired detail view ---------- */
.single-drama {
background:
radial-gradient(circle at 50% -12%, rgba(255, 122, 0, .08), transparent 34rem),
var(--bg);
}

.single-drama .ks-detail-full {
max-width: 1480px;
padding: clamp(18px, 3vw, 42px) clamp(14px, 4vw, 64px) 5rem;
}

.single-drama .ks-detail-backdrop {
height: clamp(320px, 38vw, 520px);
min-height: 320px;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 12px;
box-shadow: 0 22px 60px rgba(0, 0, 0, .28);
background-position: center 28%;
}

.single-drama .ks-detail-backdrop::after {
background:
linear-gradient(180deg, rgba(15, 15, 15, .02) 12%, rgba(15, 15, 15, .2) 48%, rgba(15, 15, 15, .96) 100%),
linear-gradient(90deg, rgba(15, 15, 15, .08), transparent 55%);
}

.single-drama .ks-detail-panel {
width: min(1180px, calc(100% - 2rem));
margin: -112px auto 0;
padding: clamp(22px, 3.2vw, 42px);
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 12px;
background: rgba(47, 47, 47, .98);
box-shadow: 0 20px 60px rgba(0, 0, 0, .32);
}

.single-drama .ks-detail-header {
grid-template-columns: 168px minmax(0, 1fr);
gap: 28px;
margin-bottom: 22px;
}

.single-drama .ks-detail-poster {
width: 168px;
border-radius: 8px;
box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
}

.single-drama .ks-detail-header-copy h1 {
font-size: clamp(1.45rem, 2.5vw, 2.25rem);
line-height: 1.12;
letter-spacing: -.025em;
margin-bottom: .35rem;
}

.single-drama .ks-detail-date {
color: #a9a9a9;
font-size: .78rem;
margin-bottom: .75rem;
}

.single-drama .ks-detail-pills {
gap: .45rem;
}

.single-drama .ks-detail-pills span,
.single-drama .ks-genre-tag {
border: 1px solid rgba(255, 255, 255, .13);
background: rgba(255, 255, 255, .06);
border-radius: 999px;
}

.single-drama .ks-action-row {
max-width: none;
grid-template-columns: repeat(4, minmax(92px, 132px));
justify-content: start;
gap: .65rem;
margin: 0 0 .7rem;
}

.single-drama .ks-action-btn {
min-height: 68px;
border-radius: 8px;
background: #252525;
border-color: #414141;
}

.single-drama .ks-action-btn:hover,
.single-drama .ks-action-btn.ks-fav-on {
background: #303030;
border-color: var(--accent);
}

.single-drama .ks-detail-adnote {
padding: .55rem .7rem;
border-left: 3px solid var(--accent);
background: rgba(255, 122, 0, .06);
border-radius: 0 5px 5px 0;
}

.single-drama .ks-accordion {
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 8px;
background: rgba(0, 0, 0, .08);
}

.single-drama .ks-accordion summary {
background: #3a3a3a;
padding: .8rem 1rem;
}

.single-drama .ks-accordion .ks-accordion-body {
padding: .9rem 1rem;
line-height: 1.75;
}

.single-drama .ks-episodes {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
justify-content: stretch;
gap: .7rem;
padding: .35rem 0 1rem;
margin: 0;
}

.single-drama .ks-episode-row {
width: auto;
height: auto;
min-height: 62px;
justify-content: space-between;
gap: .45rem;
padding: .45rem .55rem .45rem .72rem;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 8px;
background: #292929;
transition: border-color .15s, transform .15s, background .15s;
}

.single-drama .ks-episode-row:hover,
.single-drama .ks-episode-row.ks-ep-active {
border-color: var(--accent);
background: #333;
transform: translateY(-1px);
}

.single-drama .ks-episode-row .ks-episode {
display: flex;
align-items: center;
gap: .6rem;
min-width: 0;
height: auto;
padding: .15rem 0;
}

.single-drama .ks-episode-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex: 0 0 32px;
border-radius: 50%;
background: #414141;
color: #fff;
font-size: .86rem;
font-weight: 800;
}

.single-drama .ks-episode-row.ks-ep-active .ks-episode-num {
background: var(--accent);
}

.single-drama .ks-episode .ks-cc-badge {
position: static;
order: 3;
padding: .12rem .25rem;
border-radius: 3px;
background: #555;
color: #eee;
font-size: .52rem;
}

.single-drama .ks-episode-title {
min-width: 0;
overflow: hidden;
color: #cfcfcf;
font-size: .78rem;
text-overflow: ellipsis;
white-space: nowrap;
}

.single-drama .ks-watch-btn {
flex: 0 0 auto;
padding: .42rem .62rem;
border-radius: 5px;
}

.single-drama .ks-player-screen {
height: auto;
aspect-ratio: 16 / 9;
min-height: 0;
border-radius: 12px;
}

.single-drama .ks-player-screen + .ks-detail-panel {
margin-top: 22px;
}

.single-drama .ks-manual-embed {
position: absolute;
inset: 0;
display: flex;
align-items: stretch;
justify-content: stretch;
background: #000;
}

.single-drama .ks-manual-embed iframe,
.single-drama .ks-manual-embed embed,
.single-drama .ks-manual-embed object {
display: block;
width: 100% !important;
height: 100% !important;
min-height: 0;
border: 0;
background: #000;
}

@media (max-width: 700px) {
.single-drama .ks-detail-full {
padding: 12px 10px 3rem;
}

.single-drama .ks-detail-backdrop {
height: 230px;
min-height: 230px;
border-radius: 8px;
}

.single-drama .ks-detail-panel,
.single-drama .ks-player-screen + .ks-detail-panel {
width: 100%;
margin: -38px auto 0;
padding: 18px 14px 24px;
border-radius: 8px;
}

.single-drama .ks-player-screen + .ks-detail-panel {
margin-top: 12px;
}

.single-drama .ks-detail-header {
grid-template-columns: 92px minmax(0, 1fr);
gap: 14px;
}

.single-drama .ks-detail-poster {
width: 92px;
}

.single-drama .ks-detail-header-copy h1 {
font-size: 1.15rem;
}

.single-drama .ks-action-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.single-drama .ks-episodes {
grid-template-columns: 1fr;
}
}


/* ---------- KissKH-inspired single-post split layout ---------- */
.single-drama .ks-detail-full {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(420px, .88fr);
	align-items: stretch;
	gap: 0;
	max-width: 1440px;
	padding: clamp(18px, 3vw, 42px) clamp(14px, 4vw, 64px) 5rem;
}

.single-drama .ks-detail-backdrop {
	position: relative;
	top: auto;
	left: auto;
	width: 100%;
	height: auto;
	min-height: 650px;
	border-radius: 12px 0 0 12px;
	background-size: cover;
	background-position: center center;
	box-shadow: 0 22px 60px rgba(0, 0, 0, .28);
}

.single-drama .ks-detail-backdrop::after {
	background: linear-gradient(90deg, rgba(15, 15, 15, .06) 20%, rgba(15, 15, 15, .18) 62%, rgba(15, 15, 15, .72) 100%);
}

.single-drama .ks-detail-panel,
.single-drama .ks-player-screen + .ks-detail-panel {
	width: auto;
	min-width: 0;
	margin: 0;
	padding: clamp(24px, 3.5vw, 46px) clamp(22px, 3vw, 40px);
	border-radius: 0 12px 12px 0;
	background: #303030;
	box-shadow: 0 22px 60px rgba(0, 0, 0, .28);
}

.single-drama .ks-detail-header {
	grid-template-columns: 132px minmax(0, 1fr);
	gap: 20px;
}

.single-drama .ks-detail-poster {
	width: 132px;
}

.ks-detail-badges {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .45rem;
	margin: 0 0 .75rem;
}

.ks-detail-badges span {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: .22rem .58rem;
	border-radius: 4px;
	font-size: .69rem;
	font-weight: 800;
	letter-spacing: .02em;
	line-height: 1;
}

.ks-detail-badges .ks-ep-highlight {
	background: var(--accent);
	color: #171717;
}

.ks-detail-badges .ks-count-badge {
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .14);
	color: #f0f0f0;
}

.ks-detail-badges .ks-status-badge {
	background: #202020;
	border: 1px solid rgba(255, 255, 255, .12);
	color: #d4d4d4;
}

.single-drama .ks-episodes {
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

@media (max-width: 980px) {
	.single-drama .ks-detail-full {
		grid-template-columns: minmax(0, 1fr) minmax(350px, .9fr);
	}
	.single-drama .ks-detail-header {
		grid-template-columns: 104px minmax(0, 1fr);
		gap: 14px;
	}
	.single-drama .ks-detail-poster { width: 104px; }
}

@media (max-width: 700px) {
	.single-drama .ks-detail-full {
		display: block;
		padding: 12px 10px 3rem;
	}
	.single-drama .ks-detail-backdrop {
		height: 260px;
		min-height: 260px;
		border-radius: 8px 8px 0 0;
	}
	.single-drama .ks-detail-backdrop::after {
		background: linear-gradient(180deg, rgba(15, 15, 15, .08) 20%, rgba(15, 15, 15, .92) 100%);
	}
	.single-drama .ks-detail-panel,
	.single-drama .ks-player-screen + .ks-detail-panel {
		width: 100%;
		margin: -24px 0 0;
		padding: 18px 14px 24px;
		border-radius: 8px;
	}
	.single-drama .ks-player-screen + .ks-detail-panel { margin-top: 12px; }
}

@media (max-width: 420px) {
	.single-drama .ks-detail-header {
		grid-template-columns: 78px minmax(0, 1fr);
		gap: 11px;
	}
	.single-drama .ks-detail-poster { width: 78px; }
}


/* ---------- Reference screenshot match: desktop KissKH drama single page ---------- */
@media (min-width: 701px) {
	.single-drama,
	.single-drama #main-content {
		background: #111;
	}

	.single-drama #main-content {
		width: 100%;
		max-width: none;
		padding: 0;
	}

	.single-drama .ks-detail-full {
		display: grid;
		grid-template-columns: 58.15% 41.85%;
		align-items: stretch;
		gap: 0;
		width: 100%;
		max-width: none;
		min-height: calc(100vh - 52px);
		padding: 0;
		margin: 0;
	}

	.single-drama .ks-detail-backdrop {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		height: auto;
		min-height: calc(100vh - 52px);
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background-size: cover;
		background-position: center center;
	}

	.single-drama .ks-detail-backdrop::after {
		background: none;
	}

	.single-drama .ks-detail-panel,
	.single-drama .ks-player-screen + .ks-detail-panel {
		position: relative;
		z-index: 1;
		width: 100%;
		min-width: 0;
		min-height: calc(100vh - 52px);
		margin: 0;
		padding: 16px 18px 32px 16px;
		border: 0;
		border-radius: 0;
		background: #444;
		box-shadow: none;
	}

	.single-drama .ks-detail-header {
		display: block;
		margin: 0 0 20px;
	}

	.single-drama .ks-detail-header-copy {
		padding: 0;
	}

	.single-drama .ks-detail-header-copy h1 {
		margin: 0 0 3px;
		font-size: 20px;
		font-weight: 700;
		line-height: 1.25;
		letter-spacing: 0;
		color: #f5f5f5;
	}

	.single-drama .ks-detail-date {
		margin: 0 0 14px;
		font-size: 13px;
		line-height: 1.25;
		color: #d0d0d0;
	}

	.single-drama .ks-detail-pills {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 0;
		margin: 0;
		font-size: 13px;
		line-height: 1.25;
	}

	.single-drama .ks-detail-pills span {
		position: relative;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: #f0f0f0;
		font-size: 13px;
		font-weight: 400;
	}

	.single-drama .ks-detail-pills span:not(:last-child)::after {
		content: "";
		display: inline-block;
		height: 15px;
		margin: 0 14px -3px;
		border-right: 1px solid rgba(255, 255, 255, .28);
	}

	.single-drama .ks-action-row {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0;
		max-width: none;
		margin: 0 0 22px;
	}

	.single-drama .ks-action-btn {
		min-height: 66px;
		padding: 0;
		gap: 9px;
		border: 0;
		border-radius: 0;
		background: transparent;
		color: #f0f0f0;
		font-size: 13px;
		font-weight: 400;
	}

	.single-drama .ks-action-btn svg {
		width: 23px;
		height: 23px;
		stroke-width: 2.25;
	}

	.single-drama .ks-action-btn:hover,
	.single-drama .ks-action-btn.ks-fav-on {
		background: transparent;
		color: #fff;
	}

	.single-drama .ks-action-btn:hover svg {
		color: var(--accent);
	}

	.single-drama .ks-detail-adnote {
		margin: 0 0 21px;
		padding: 0;
		border: 0;
		background: transparent;
		color: #d1d1d1;
		font-size: 11px;
		line-height: 1.35;
	}

	.single-drama .ks-accordion {
		margin: 0 0 14px;
		border: 0;
		border-radius: 2px;
		background: transparent;
	}

	.single-drama .ks-accordion summary {
		padding: 12px 24px;
		border-radius: 2px;
		background: #3d3d3d;
		color: #f5f5f5;
		font-size: 14px;
		font-weight: 400;
	}

	.single-drama .ks-acc-arrow {
		color: #f5f5f5;
		font-size: 14px;
	}

	.single-drama .ks-accordion .ks-accordion-body {
		padding: 12px 24px;
		background: #3d3d3d;
		color: #e0e0e0;
		font-size: 13px;
	}

	.single-drama .ks-section-title {
		margin: 0;
		color: #f5f5f5;
		font-size: 21px;
		font-weight: 700;
		line-height: 1.2;
	}

	.single-drama .ks-episodes {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-content: flex-start;
		gap: 10px;
		margin: 0;
		padding: 4px 0 14px;
	}

	.single-drama .ks-episode-row {
		position: relative;
		width: 66px;
		height: 38px;
		min-height: 0;
		padding: 0;
		border: 0;
		border-radius: 2px;
		background: rgba(0, 0, 0, .08);
		box-shadow: 0 2px 2px rgba(0, 0, 0, .24);
		transition: background .15s, box-shadow .15s;
	}

	.single-drama .ks-episode-row .ks-episode {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 5px;
		width: 100%;
		height: 100%;
		padding: 0;
	}

	.single-drama .ks-episode-num {
		width: auto;
		height: auto;
		flex: 0 0 auto;
		background: transparent;
		color: #f3f3f3;
		font-size: 16px;
		font-weight: 400;
	}

	.single-drama .ks-episode .ks-cc-badge {
		position: absolute;
		top: 2px;
		right: 5px;
		order: initial;
		padding: 0;
		background: transparent;
		color: #f0f0f0;
		font-size: 8px;
		font-weight: 700;
	}

	.single-drama .ks-episode-title {
		max-width: 90px;
		color: #f3f3f3;
		font-size: 16px;
		font-weight: 400;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.single-drama .ks-episode-row:hover,
	.single-drama .ks-episode-row.ks-ep-active {
		border: 0;
		background: rgba(0, 0, 0, .2);
		box-shadow: 0 2px 3px rgba(0, 0, 0, .35);
		transform: none;
	}

	.single-drama .ks-episode-row.ks-ep-active .ks-episode-num {
		background: transparent;
		color: #fff;
	}
}

@media (max-width: 700px) {
	.single-drama #main-content { padding: 0; }
	.single-drama .ks-detail-full { min-height: 0; }
	.single-drama .ks-detail-backdrop { min-height: 260px; }
	.single-drama .ks-detail-panel,
	.single-drama .ks-player-screen + .ks-detail-panel {
		min-height: 0;
		padding: 16px 14px 28px;
		background: #444;
	}
	.single-drama .ks-detail-header { margin-bottom: 16px; }
	.single-drama .ks-detail-header-copy h1 { font-size: 18px; }
	.single-drama .ks-action-row { margin-bottom: 18px; }
	.single-drama .ks-action-btn { min-height: 60px; }
	.single-drama .ks-episode-row { width: 62px; }
}


/* Screenshot-specific toolbar polish */
@media (min-width: 701px) {
	.single-drama .ks-genres,
	.single-drama .ks-stars {
		display: none;
	}

	.single-drama .ks-episode-toolbar {
		align-items: baseline !important;
		gap: 10px !important;
		margin: 0 0 7px !important;
	}

	.single-drama .ks-episode-summary {
		flex: 0 0 auto;
	}

	.single-drama .ks-episode-summary h2 {
		font-size: 21px;
		line-height: 1.1;
	}

	.single-drama .ks-episode-summary > span {
		display: block;
		margin-top: 2px !important;
		color: #c5c5c5 !important;
		font-size: 12px !important;
		line-height: 1.2;
	}

	.single-drama .ks-episode-controls {
		gap: 9px !important;
		margin-left: auto;
		color: #d0d0d0;
		font-size: 12px;
	}

	.single-drama .ks-episode-controls > span {
		color: #c5c5c5 !important;
		font-size: 12px !important;
		white-space: nowrap;
	}

	.single-drama .ks-episode-controls .ks-ep-per-page {
		padding: 3px 5px;
		border: 0;
		border-radius: 2px;
		background: #515151;
		color: #fff;
		font-size: 12px;
	}

	.single-drama .ks-episode-controls .ks-ep-page-btn {
		width: 20px;
		height: 20px;
		border: 0;
		background: transparent;
		color: #bfbfbf;
		font-size: 17px;
	}

	.single-drama .ks-episode-controls .ks-ep-page-btn:hover {
		background: rgba(255,255,255,.08);
		color: #fff;
	}
}

@media (max-width: 700px) {
	.single-drama .ks-genres,
	.single-drama .ks-stars {
		display: none;
	}
	.single-drama .ks-episode-toolbar {
		align-items: flex-start !important;
	}
	.single-drama .ks-episode-controls {
		margin-left: auto;
		font-size: 11px;
	}
}


/* ---------- Homepage card sizing: reference screenshot ---------- */
body.home .ks-rail-section,
body.front-page .ks-rail-section {
	padding-top: 5px;
	padding-bottom: 10px;
}

body.home .ks-rail-grid,
body.front-page .ks-rail-grid {
	gap: 16px;
	align-items: flex-start;
}

body.home .ks-rail-grid .ks-card,
body.front-page .ks-rail-grid .ks-card {
	flex: 0 0 clamp(190px, 20.4vw, 278px);
	width: clamp(190px, 20.4vw, 278px);
	min-width: clamp(190px, 20.4vw, 278px);
	overflow: hidden;
	border-radius: 4px;
	background: transparent;
}

body.home .ks-rail-grid .ks-poster,
body.front-page .ks-rail-grid .ks-poster {
	width: 100%;
	height: auto;
	min-width: 0;
	aspect-ratio: 16 / 9;
	border-radius: 4px 4px 0 0;
	background: #242424;
}

body.home .ks-rail-grid .ks-poster img,
body.front-page .ks-rail-grid .ks-poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

body.home .ks-rail-grid .ks-card-title,
body.front-page .ks-rail-grid .ks-card-title {
	display: block;
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 0 10px;
	overflow: hidden;
	background: #2b2b2b;
	border-radius: 0 0 4px 4px;
	border-top: 1px solid rgba(255, 255, 255, .04);
	color: #e8e8e8;
	font-size: 14px;
	font-weight: 400;
	line-height: 40px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body.home .ks-rail-grid .ks-card-title:hover,
body.front-page .ks-rail-grid .ks-card-title:hover {
	background: #353535;
	color: #fff;
}

body.home .ks-rail-grid .ks-country-badge,
body.front-page .ks-rail-grid .ks-country-badge {
	position: absolute;
	left: 8px;
	bottom: 7px;
	z-index: 2;
	max-width: calc(100% - 16px);
	padding: 3px 7px;
	border-radius: 2px;
	background: rgba(0, 0, 0, .68);
	color: #fff;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.25;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

body.home .ks-rail-grid .ks-ep-badge,
body.front-page .ks-rail-grid .ks-ep-badge {
	right: 8px;
	bottom: 7px;
	z-index: 2;
	font-size: 12px;
	font-weight: 600;
}

@media (max-width: 900px) {
	body.home .ks-rail-grid .ks-card,
	body.front-page .ks-rail-grid .ks-card,
	body.home .ks-rail-grid .ks-poster,
	body.front-page .ks-rail-grid .ks-poster {
		flex-basis: 240px;
		width: 240px;
		min-width: 240px;
	}
	body.home .ks-rail-grid .ks-poster,
	body.front-page .ks-rail-grid .ks-poster {
		height: 135px;
	}
}

@media (max-width: 560px) {
	body.home .ks-rail-section,
	body.front-page .ks-rail-section {
		padding-inline: 20px;
	}
	body.home .ks-rail-grid .ks-card,
	body.front-page .ks-rail-grid .ks-card,
	body.home .ks-rail-grid .ks-poster,
	body.front-page .ks-rail-grid .ks-poster {
		flex-basis: 220px;
		width: 220px;
		min-width: 220px;
	}
	body.home .ks-rail-grid .ks-poster,
	body.front-page .ks-rail-grid .ks-poster {
		height: 124px;
	}
}


/* ---------- Automatic hero artwork fitting ---------- */
.ks-hero-slide .ks-hero-bg {
	background-position: center center;
	background-repeat: no-repeat;
	background-color: #111;
}

.ks-hero-slide .ks-hero-bg.ks-hero-fit-cover {
	background-size: cover;
}

.ks-hero-slide .ks-hero-bg.ks-hero-fit-contain {
	background-size: contain;
	background-position: center center;
}

@media (max-width: 700px) {
	.ks-hero-slide .ks-hero-bg {
		background-position: center center;
	}
}


/* ---------- Final responsive fixes from live-site review ---------- */
.ks-hero-slide .ks-hero-bg.ks-hero-fit-cover {
	background-size: cover !important;
	background-position: center center !important;
}

/* Keep narrow/portrait artwork inside the slider instead of cropping its
 * top and bottom. The JS class is selected from the image's real ratio. */
.ks-hero-slide .ks-hero-bg.ks-hero-fit-contain {
	background-size: contain !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-color: #111;
}

@media (max-width: 900px) {
	.ks-header {
		height: 58px;
		padding: 0 12px;
	}
	.ks-header .container {
		gap: 10px;
		flex-wrap: nowrap;
	}
	.ks-burger {
		display: inline-flex !important;
		flex: 0 0 38px;
		width: 38px;
		height: 38px;
		background: #2b2b2b;
		border: 1px solid #3d3d3d;
	}
	.ks-burger svg { width: 20px; height: 20px; }
	.ks-brand { flex: 0 0 auto; }
	.ks-brand svg { width: 82px; height: auto; }
	.ks-nav {
		width: min(292px, 82vw);
		padding: 70px 10px 24px;
		background: #202020;
		box-shadow: 12px 0 28px rgba(0,0,0,.34);
	}
	.ks-nav a,
	.ks-nav .ks-nav-item {
		min-height: 44px;
		padding: 12px 14px;
		font-size: 14px;
		border-bottom: 1px solid rgba(255,255,255,.06);
	}
	.ks-header-actions {
		gap: 6px;
		margin-left: auto;
	}
	.ks-search-trigger {
		width: 36px;
		height: 36px;
		justify-content: center;
		border: 1px solid #3a3a3a;
		border-radius: 4px;
	}
	.ks-theme-switch { width: 36px; height: 36px; }
	.ks-btn-outline {
		width: 36px;
		height: 36px;
		justify-content: center;
		padding: 0;
	}
	.ks-btn-outline .ks-auth-text { display: none !important; }
	.ks-sidebar-dim { z-index: 80; }
	.ks-burger,
	.ks-header-actions { position: relative; z-index: 100; }
}

.ks-bottom-search {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	margin: 0;
	font: inherit;
	background: transparent;
	cursor: pointer;
}

@media (max-width: 700px) {
	/* Keep mobile episode tiles visually identical to the desktop boxes. */
	.single-drama .ks-episodes {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
		padding: 4px 0 14px;
	}
	.single-drama .ks-episode-row {
		width: 66px;
		height: 38px;
		min-height: 0;
		padding: 0;
		border: 0;
		border-radius: 2px;
		background: rgba(0, 0, 0, .08);
		box-shadow: 0 2px 2px rgba(0, 0, 0, .24);
	}
	.single-drama .ks-episode-row .ks-episode {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 5px;
		width: 100%;
		height: 100%;
		padding: 0;
	}
	.single-drama .ks-episode-num {
		width: auto;
		height: auto;
		flex: 0 0 auto;
		background: transparent;
		color: #f3f3f3;
		font-size: 16px;
		font-weight: 400;
	}
	.single-drama .ks-episode .ks-cc-badge {
		position: absolute;
		top: 2px;
		right: 5px;
		padding: 0;
		background: transparent;
		color: #f0f0f0;
		font-size: 8px;
		font-weight: 700;
	}
	.single-drama .ks-episode-title {
		max-width: 90px;
		color: #f3f3f3;
		font-size: 16px;
		font-weight: 400;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.single-drama .ks-episode-row:hover,
	.single-drama .ks-episode-row.ks-ep-active {
		border: 0;
		background: rgba(0, 0, 0, .2);
		box-shadow: 0 2px 3px rgba(0, 0, 0, .35);
		transform: none;
	}
}


/* ---------- Mobile menu stability + compact episode tiles ---------- */
@media (max-width: 900px) {
	.ks-header {
		position: sticky;
		z-index: 300;
	}
	.ks-header .container {
		position: relative;
		z-index: 301;
	}
	.ks-nav {
		z-index: 302;
		isolation: isolate;
	}
	.ks-header-actions,
	.ks-burger {
		z-index: 304;
	}
	.ks-sidebar-dim {
		z-index: 250;
	}
	body.ks-menu-open {
		overflow: hidden;
	}
}

@media (max-width: 700px) {
	.single-drama .ks-episodes {
		gap: 7px;
		padding: 3px 0 12px;
	}
	.single-drama .ks-episode-row {
		width: 54px;
		height: 32px;
		border-radius: 2px;
	}
	.single-drama .ks-episode-row .ks-episode {
		gap: 3px;
	}
	.single-drama .ks-episode-num {
		font-size: 14px;
	}
	.single-drama .ks-episode .ks-cc-badge {
		top: 1px;
		right: 4px;
		font-size: 7px;
	}
	.single-drama .ks-episode-title {
		max-width: 70px;
		font-size: 14px;
	}
}

/* ---------- Responsive related dramas ---------- */
.single-drama .ks-detail-header {
	display: block;
	grid-template-columns: none;
}

.single-drama .ks-detail-header-copy {
	width: 100%;
	min-width: 0;
}

.single-drama .ks-detail-header-copy h1 {
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: normal;
}

.single-drama .ks-detail-full {
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
}

.single-drama .ks-detail-backdrop {
	background-attachment: scroll;
}

.single-drama .ks-carousel {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	width: 100%;
}

.single-drama .ks-carousel .ks-card {
	width: 100%;
	min-width: 0;
}

.single-drama .ks-carousel .ks-poster {
	width: 100%;
	min-width: 0;
	aspect-ratio: 16 / 9;
}

@media (max-width: 700px) {
	.single-drama .ks-carousel {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	.single-drama .ks-carousel .ks-card-title {
		padding-inline: 4px;
		font-size: .78rem;
	}
}

/* ---------- Standalone episode pages ---------- */
/*
 * The shared .ks-detail-backdrop rule is intentionally fixed for the
 * original drama detail layout. Standalone Episodes use a normal document
 * flow, so they must opt out of that rule; otherwise the player is removed
 * from the layout and the footer appears directly under the header.
 */
.single-episode {
	background:
		radial-gradient(circle at 50% -12%, rgba(255, 122, 0, .08), transparent 34rem),
		var(--bg);
}

.single-episode #main-content {
	width: 100%;
	max-width: none;
}

.single-episode #main-content > .container {
	max-width: 1180px;
	padding-inline: clamp(14px, 4vw, 64px);
}

.single-episode .ks-public-episode {
	padding: clamp(18px, 3vw, 34px);
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 12px;
	background: rgba(48, 48, 48, .98);
	box-shadow: 0 22px 60px rgba(0, 0, 0, .28);
}

.single-episode .ks-public-episode > header {
	padding-bottom: 1rem;
	border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.single-episode .ks-detail-backdrop.ks-player-screen {
	position: relative;
	top: auto;
	left: auto;
	width: 100%;
	height: auto;
	min-height: 0 !important;
	aspect-ratio: 16 / 9;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 10px;
	overflow: hidden;
	background: #050505 !important;
	box-shadow: 0 16px 42px rgba(0, 0, 0, .28);
}

.single-episode .ks-manual-embed {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: stretch;
	justify-content: stretch;
	background: #000;
}

.single-episode .ks-manual-embed iframe,
.single-episode .ks-manual-embed embed,
.single-episode .ks-manual-embed object {
	display: block;
	width: 100% !important;
	height: 100% !important;
	min-height: 0;
	border: 0;
	background: #000;
}

.single-episode .ks-public-episode > p:last-child {
	margin-bottom: 0;
}

@media (max-width: 700px) {
	.single-episode #main-content > .container {
		padding-inline: 10px;
	}

	.single-episode .ks-public-episode {
		padding: 14px;
		border-radius: 8px;
	}

	.single-episode .ks-detail-backdrop.ks-player-screen {
		border-radius: 8px;
	}
}

/* ---------- Responsive comments ---------- */
.single-drama .ks-comments {
	width: 100%;
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.single-drama .ks-comments h3,
.single-drama .ks-comments #reply-title {
	margin: 0 0 .9rem;
	color: #f5f5f5;
	font-size: 1rem;
	font-weight: 700;
}

.single-drama .ks-comments .comment-list {
	margin: 0 0 1.2rem;
	padding: 0;
}

.single-drama .ks-comments .comment,
.single-drama .ks-comments .pingback,
.single-drama .ks-comments .trackback {
	margin: 0;
	padding: .85rem 0;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.single-drama .ks-comments .comment:first-child {
	border-top: 0;
}

.single-drama .ks-comments .comment-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .75rem;
	margin: 0;
}

.single-drama .ks-comments .comment-form > p {
	margin: 0;
	min-width: 0;
}

.single-drama .ks-comments .comment-form .comment-notes,
.single-drama .ks-comments .comment-form .comment-form-comment,
.single-drama .ks-comments .comment-form .form-submit,
.single-drama .ks-comments .comment-form .comment-form-cookies-consent {
	grid-column: 1 / -1;
}

.single-drama .ks-comments label {
	display: block;
	margin: 0 0 .3rem;
	color: #cfcfcf;
	font-size: .78rem;
}

.single-drama .ks-comments input[type="text"],
.single-drama .ks-comments input[type="email"],
.single-drama .ks-comments input[type="url"],
.single-drama .ks-comments textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	padding: .65rem .75rem;
	border: 1px solid #505050;
	border-radius: 5px;
	background: #2b2b2b;
	color: #f5f5f5;
	font: inherit;
	font-size: .84rem;
	box-sizing: border-box;
}

.single-drama .ks-comments textarea {
	min-height: 112px;
	resize: vertical;
}

.single-drama .ks-comments input:focus,
.single-drama .ks-comments textarea:focus {
	border-color: var(--accent);
	outline: none;
	box-shadow: 0 0 0 2px rgba(255, 122, 0, .12);
}

.single-drama .ks-comments .form-submit {
	margin-top: .1rem;
}

.single-drama .ks-comments .ks-submit-btn {
	min-height: 38px;
	border: 0;
	cursor: pointer;
}

@media (max-width: 560px) {
	.single-drama .ks-comments .comment-form {
		grid-template-columns: 1fr;
	}

	.single-drama .ks-comments .comment-form > p {
		grid-column: 1 / -1;
	}
}

/* ---------- Homepage: use the full mobile viewport ---------- */
@media (max-width: 700px) {
	body.home .container,
	body.front-page .container {
		padding-inline: 0;
	}

	body.home .ks-rail-section,
	body.front-page .ks-rail-section {
		padding-inline: 0;
	}

	body.home .ks-section-head,
	body.front-page .ks-section-head {
		padding-inline: 12px;
	}

	body.home .ks-rail-grid,
	body.front-page .ks-rail-grid {
		padding-inline: 12px;
	}
}

@media (max-width: 560px) {
	body.home .ks-rail-grid .ks-card,
	body.front-page .ks-rail-grid .ks-card {
		flex-basis: calc(100vw - 24px);
		width: calc(100vw - 24px);
		min-width: calc(100vw - 24px);
	}

	body.home .ks-rail-grid .ks-poster,
	body.front-page .ks-rail-grid .ks-poster {
		width: 100%;
		min-width: 0;
		height: auto;
		aspect-ratio: 16 / 9;
	}
}

/* ---------- Final screenshot match: compact hero + single page viewport ---------- */
.ks-hero {
	height: clamp(220px, 25.8vw, 350px);
	aspect-ratio: auto;
}

.ks-hero-arrow svg {
	display: block;
	width: 24px;
	height: 24px;
}

.ks-hero-slide .ks-hero-bg.ks-hero-fit-contain {
	background-size: contain !important;
	background-position: center center !important;
	background-color: #111 !important;
}

@media (min-width: 701px) {
	.single-drama .ks-detail-full {
		height: calc(100vh - 52px);
		min-height: 0;
		overflow: hidden;
	}

	.single-drama .ks-detail-backdrop {
		height: 100%;
		min-height: 0;
	}

	.single-drama .ks-detail-panel,
	.single-drama .ks-player-screen + .ks-detail-panel {
		height: 100%;
		min-height: 0;
		overflow: hidden;
	}

	.single-drama .ks-detail-header {
		margin-bottom: 14px;
	}

	.single-drama .ks-section-title {
		margin-top: 0;
	}
}

@media (max-width: 700px) {
	.ks-hero {
		height: clamp(220px, 62vw, 350px);
	}
}


/* ---------- Hero slider fill fix ----------
 * Always fill the full slider frame so portrait thumbnails do not appear
 * small in the center with black bars on both sides. */
.ks-hero-slide .ks-hero-bg,
.ks-hero-slide .ks-hero-bg.ks-hero-fit-contain,
.ks-hero-slide .ks-hero-bg.ks-hero-fit-cover {
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-color: transparent !important;
}

/* Slightly taller frame on narrow screens so the enlarged artwork remains usable. */
@media (max-width: 700px) {
	.ks-hero { height: clamp(240px, 58vw, 390px); }
}

@media (max-width: 480px) {
	.ks-hero { height: clamp(230px, 64vw, 330px); }
}


/* ---------- Mobile homepage card sizing fix ----------
 * Keep two cards visible on phones so homepage thumbnails are compact and
 * the horizontal rail does not render one oversized card across the screen. */
@media (max-width: 560px) {
	body.home .ks-rail-grid .ks-card,
	body.front-page .ks-rail-grid .ks-card {
		flex: 0 0 calc((100vw - 36px) / 2);
		width: calc((100vw - 36px) / 2);
		min-width: calc((100vw - 36px) / 2);
	}

	body.home .ks-rail-grid .ks-poster,
	body.front-page .ks-rail-grid .ks-poster {
		width: 100%;
		min-width: 0;
		aspect-ratio: 16 / 9;
	}

	body.home .ks-rail-grid,
	body.front-page .ks-rail-grid {
		gap: 12px;
		padding-inline: 12px;
	}
}


/* ---------- Requested final cleanup ---------- */
/* Keep the rail arrows and horizontal scrolling, but remove the visible
 * scrollbar/slide line from desktop homepage rails. */
body.home .ks-rail-grid,
body.front-page .ks-rail-grid {
	scrollbar-width: none;
}
body.home .ks-rail-grid::-webkit-scrollbar,
body.front-page .ks-rail-grid::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

/* You May Also Like uses the same card proportions and spacing as homepage. */
.single-drama .ks-carousel {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
.single-drama .ks-carousel .ks-card {
	min-width: 0;
	width: 100%;
}
.single-drama .ks-carousel .ks-poster {
	width: 100%;
	min-width: 0;
	aspect-ratio: 16 / 9;
}
.single-drama .ks-carousel .ks-card-title {
	padding: 0 10px 10px;
	font-size: .875rem;
	line-height: 1.25;
}
@media (max-width: 700px) {
	.single-drama .ks-carousel {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px;
	}
	.single-drama .ks-carousel .ks-card-title {
		padding-inline: 4px;
		font-size: .78rem;
	}
}


/* Removed permanently: Light/Dark switch is no longer part of this theme. */
.ks-theme-switch { display: none !important; }


/* ---------- Search results use homepage poster cards ---------- */
.ks-search-results-grid {
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
}
.ks-search-results-grid .ks-card {
	width: 100%;
	min-width: 0;
}
.ks-search-results-grid .ks-poster {
	width: 100%;
	min-width: 0;
	aspect-ratio: 16 / 9;
}
.ks-search-results-grid .ks-card-title {
	padding: 0 10px 10px;
	font-size: .875rem;
	line-height: 1.25;
}
@media (max-width: 700px) {
	.ks-search-results-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
	.ks-search-results-grid .ks-card-title {
		padding-inline: 4px;
		font-size: .78rem;
	}
}


/* ---------- Mobile PWA install button ---------- */
.ks-install-app {
	display: none;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 0 10px;
	border: 1px solid #ff7a00;
	border-radius: 4px;
	background: #ff7a00;
	color: #fff;
	font: inherit;
	font-size: .78rem;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
}
.ks-install-app:hover { background: #e06b00; border-color: #e06b00; }

/* Match homepage card title strip under related dramas. */
.single-drama .ks-carousel .ks-card-title {
	display: block;
	width: 100%;
	height: 40px;
	margin: 0;
	padding: 0 10px;
	overflow: hidden;
	background: #2b2b2b;
	border-radius: 0 0 4px 4px;
	border-top: 1px solid rgba(255, 255, 255, .04);
	color: #e8e8e8;
	font-size: 14px;
	font-weight: 400;
	line-height: 40px;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.single-drama .ks-carousel .ks-card-title:hover {
	background: #353535;
	color: #fff;
}

@media (max-width: 700px) {
	.ks-install-app { display: inline-flex; }
	.single-drama .ks-carousel .ks-card-title {
		height: 36px;
		padding-inline: 6px;
		font-size: .78rem;
		line-height: 36px;
	}
}


/* Reference-style PWA install control: fixed purple pill on mobile. */
.ks-install-app {
	display: none !important;
	position: fixed;
	bottom: 22px;
	right: 18px;
	z-index: 9999;
	align-items: center;
	gap: 7px;
	min-height: 0;
	padding: 10px 20px;
	border: none;
	border-radius: 999px;
	background: #6c3fcf;
	box-shadow: 0 4px 16px rgba(108, 63, 207, .5);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
}
.ks-install-app:hover { background: #5a32b0; border-color: transparent; }
@media (max-width: 700px) {
	.ks-install-app.ks-install-ready { display: inline-flex !important; }
}

/* The install prompt is available on every supported viewport, like the
 * source KissAsianTV PWA. Browsers only reveal it when installation is
 * actually available. */
.ks-install-app.ks-install-ready { display: inline-flex !important; }

/* ---------- Full slider artwork on desktop and mobile ---------- */
/*
 * Slider artwork is often a portrait MDL poster. Cover crops its top and
 * bottom, so keep the complete fetched Featured Image visible instead.
 * The dark letterbox is intentional and keeps the image readable at every
 * viewport ratio.
 */
.ks-hero-slide img.ks-hero-bg,
.ks-hero-slide .ks-hero-bg {
	object-fit: contain !important;
	background: #111 !important;
	background-size: contain !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}


/* ---------- Final search result layout repair ---------- */
.ks-search-results-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	align-items: start;
	gap: 16px;
	width: 100%;
	margin: 0;
	padding: 0;
}
.ks-search-results-grid .ks-card {
	display: block;
	position: relative;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	align-self: start;
}
.ks-search-results-grid .ks-poster {
	display: block;
	position: relative;
	width: 100%;
	min-width: 0;
	height: auto;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.ks-search-results-grid .ks-poster img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
.ks-search-results-grid .ks-card-title {
	display: block;
	width: 100%;
	min-height: 40px;
	height: 40px;
	margin: 0;
	padding: 0 10px;
	overflow: hidden;
	background: #2b2b2b;
	border-radius: 0 0 4px 4px;
	border-top: 1px solid rgba(255, 255, 255, .04);
	color: #e8e8e8;
	font-size: 14px;
	line-height: 40px;
	text-overflow: ellipsis;
	white-space: nowrap;
}
@media (max-width: 700px) {
	.ks-search-results-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
	.ks-search-results-grid .ks-card-title {
		height: 36px;
		min-height: 36px;
		padding-inline: 6px;
		font-size: .78rem;
		line-height: 36px;
	}
}


/* ---------- Final mobile navigation repair ---------- */
@media (max-width: 900px) {
	.ks-nav {
		display: flex !important;
		visibility: visible;
	}
	.ks-nav:not(.ks-nav-mobile-open) {
		transform: translateX(-105%);
		pointer-events: none;
	}
	.ks-nav.ks-nav-mobile-open {
		transform: translateX(0);
		pointer-events: auto;
	}
	.ks-burger {
		display: inline-flex !important;
		position: relative;
		z-index: 1000;
	}
}


/* ---------- Homepage links and final mobile card stability ---------- */
.ks-section-title-link {
	color: inherit;
	text-decoration: none;
}
.ks-section-title-link:hover { color: var(--accent); }
.ks-search-results-grid,
.ks-favorites-page .ks-search-results-grid {
	grid-auto-rows: max-content;
	align-content: start;
}
.ks-search-results-grid .ks-card,
.ks-favorites-page .ks-card {
	height: max-content;
	box-sizing: border-box;
}
.ks-search-results-grid .ks-poster,
.ks-favorites-page .ks-poster {
	box-sizing: border-box;
	min-height: 0;
}
@media (max-width: 700px) {
	.ks-search-results-grid,
	.ks-favorites-page .ks-search-results-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		grid-auto-rows: max-content;
		column-gap: 10px;
		row-gap: 14px;
	}
}


/* ---------- Final title and utility-page polish ---------- */
.ks-section-head h2,
.ks-section-head h2 .ks-section-title-link,
.ks-section-title,
.ks-section-title-link {
	color: #fff !important;
}
.ks-section-head h2 .ks-section-title-link:hover { color: #fff !important; }
.ks-request-form {
	max-width: 560px;
	display: grid;
	gap: 14px;
	margin-top: 18px;
}
.ks-request-form label {
	display: grid;
	gap: 6px;
	color: #eee;
	font-size: .9rem;
}
.ks-request-form input,
.ks-request-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid #444;
	border-radius: 4px;
	background: #222;
	color: #fff;
	font: inherit;
}
.ks-form-success {
	padding: 10px 12px;
	border-left: 3px solid var(--accent);
	background: #252525;
	color: #fff;
}


/* ---------- Compact responsive footer ---------- */
.ks-footer {
	padding: 12px 0 10px;
	font-size: .76rem;
}
.ks-footer .container {
	padding-inline: 20px;
}
.ks-footer-disclaimer {
	max-width: 760px;
	margin: 0 auto 7px;
	line-height: 1.35;
}
.ks-footer-links {
	gap: 8px 14px;
	margin: 0;
	line-height: 1.2;
}
.ks-footer-links a {
	font-size: .74rem;
	padding: 0;
}
.ks-footer-bottom {
	gap: 10px;
	margin-top: 8px;
	padding-top: 7px;
	font-size: .66rem;
	line-height: 1.2;
}
@media (max-width: 700px) {
	.ks-footer {
		padding: 9px 0 7px;
		font-size: .7rem;
	}
	.ks-footer .container {
		padding-inline: 12px;
	}
	.ks-footer-disclaimer {
		margin-bottom: 5px;
		line-height: 1.25;
	}
	.ks-footer-links {
		gap: 5px 10px;
	}
	.ks-footer-links a {
		font-size: .68rem;
	}
	.ks-footer-bottom {
		margin-top: 6px;
		padding-top: 5px;
		font-size: .6rem;
	}
	body { padding-bottom: 48px; }
	.ks-bottom-nav {
		padding: 2px 0 3px;
	}
	.ks-bottom-item {
		gap: 0;
		padding: 3px 2px;
		font-size: .56rem;
		line-height: 1.15;
	}
	.ks-bottom-item svg {
		width: 17px;
		height: 17px;
	}
}


/* ---------- Final Request Drama and Favorites sizing repair ---------- */
body.page .ks-request-form,
.ks-request-form {
	display: grid !important;
	width: min(100%, 520px);
	max-width: 520px;
	margin: 16px 0 24px;
	padding: 16px;
	box-sizing: border-box;
	gap: 12px;
	background: #242424;
	border: 1px solid #3a3a3a;
	border-radius: 6px;
}
.ks-request-form label {
	display: grid !important;
	width: 100%;
	gap: 5px;
	color: #f1f1f1;
	font-size: .86rem;
}
.ks-request-form input,
.ks-request-form textarea {
	display: block;
	width: 100% !important;
	max-width: 100%;
	min-height: 40px;
	box-sizing: border-box;
	background: #171717 !important;
	border: 1px solid #4a4a4a !important;
	border-radius: 4px;
	color: #fff !important;
}
.ks-request-form textarea { min-height: 96px; resize: vertical; }
.ks-request-form button { justify-self: start; }
.ks-favorites-page .ks-search-results-grid {
	grid-template-columns: repeat(auto-fill, minmax(160px, 200px));
	justify-content: start;
	gap: 14px;
}
.ks-favorites-page .ks-card,
.ks-favorites-page .ks-poster {
	width: 100%;
	min-width: 0;
}
.ks-favorites-page .ks-poster {
	aspect-ratio: 16 / 9;
}
@media (max-width: 700px) {
	.ks-favorites-page .ks-search-results-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px;
	}
	.ks-favorites-page .ks-card-title {
		height: 34px;
		min-height: 34px;
		padding-inline: 5px;
		font-size: .74rem;
		line-height: 34px;
	}
	.ks-request-form { padding: 12px; }
}


/* Episode-specific visible heading */
.ks-visible-episode-label {
	color: #fff;
	font-weight: 600;
	font-size: .9em;
}
@media (max-width: 700px) {
	.ks-visible-episode-label { display: inline; font-size: .82em; }
}


/* ---------- Homepage News and dark authentication styling ---------- */
.ks-home-news-section .ks-news-grid {
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
}
.ks-home-news-section .ks-news-img {
	aspect-ratio: 16 / 8.4;
}
.ks-home-news-section .ks-news-body {
	padding: .65rem .75rem .72rem;
}
.ks-home-news-section .ks-news-body h2 {
	font-size: .88rem;
	margin-bottom: .28rem;
}
.ks-auth-page,
.ks-auth-wrap,
body:has(.ks-auth-card) {
	background: #303030;
	color: #eee;
}
.ks-auth-card {
	width: min(100% - 24px, 440px);
	margin: 32px auto;
	padding: 22px;
	box-sizing: border-box;
	background: #242424;
	border: 1px solid #3b3b3b;
	border-radius: 7px;
	box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.ks-auth-card h1 { color: #fff; margin: 0 0 7px; }
.ks-auth-sub { color: #aaa; margin: 0 0 18px; }
.ks-auth-field { display: grid; gap: 6px; margin-bottom: 12px; color: #eee; }
.ks-auth-field label { color: #ddd; font-size: .86rem; }
.ks-auth-field input[type="text"],
.ks-auth-field input[type="email"],
.ks-auth-field input[type="password"] {
	width: 100%;
	min-height: 40px;
	padding: 9px 11px;
	box-sizing: border-box;
	background: #171717 !important;
	border: 1px solid #494949 !important;
	border-radius: 4px;
	color: #fff !important;
}
.ks-auth-field input:focus { outline: 2px solid rgba(27,127,168,.45); border-color: #1b7fa8 !important; }
.ks-auth-btn {
	display: inline-block;
	width: 100%;
	padding: 10px 14px;
	border: 1px solid #1b7fa8;
	border-radius: 4px;
	background: #1b7fa8;
	color: #fff !important;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
}
.ks-auth-btn:hover { background: #146986; border-color: #146986; }
.ks-auth-links { color: #aaa; text-align: center; }
.ks-auth-links a { color: #63c0e5; }
.ks-auth-error { margin-bottom: 14px; padding: 9px 11px; border-left: 3px solid #d9534f; background: #352424; color: #ffb0ab; }
.ks-auth-ok { margin-bottom: 14px; padding: 9px 11px; border-left: 3px solid #3ca66b; background: #20352a; color: #a9ebc4; }
@media (max-width: 700px) {
	.ks-home-news-section .ks-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
	.ks-home-news-section .ks-news-body { padding: .5rem .55rem .58rem; }
	.ks-home-news-section .ks-news-body h2 { font-size: .76rem; }
	.ks-auth-card { margin: 18px auto; padding: 16px; }
}


/* ---------- KissKH.hk-style final hero treatment ---------- */
/* Direct full-frame artwork: no blurred side fill and no contain letterbox. */
.ks-hero-media {
	background: #111 !important;
}
.ks-hero-media::before,
.ks-hero-media::after {
	display: none !important;
}
.ks-hero-media .ks-hero-image {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center 20% !important;
	background: transparent !important;
}
@media (max-width: 700px) {
	.ks-hero-media .ks-hero-image {
		object-fit: cover !important;
		object-position: center 20% !important;
	}
}


/* ---------- Competitor-style HD full-width hero sizing ---------- */
.ks-hero {
	height: clamp(320px, 36vw, 520px) !important;
	aspect-ratio: auto !important;
}
.ks-hero-media,
.ks-hero-media .ks-hero-image {
	width: 100% !important;
	height: 100% !important;
}
.ks-hero-media .ks-hero-image {
	object-fit: cover !important;
	object-position: center center !important;
	image-rendering: auto;
}
@media (max-width: 700px) {
	.ks-hero {
		height: clamp(280px, 78vw, 520px) !important;
	}
	.ks-hero-media .ks-hero-image {
		object-position: center center !important;
	}
}
@media (max-width: 420px) {
	.ks-hero {
		height: 78vw !important;
		min-height: 260px;
		max-height: 390px;
	}
}


/* ---------- Shorter hero with balanced mixed-artwork framing ---------- */
.ks-hero {
	height: clamp(260px, 28vw, 400px) !important;
}
.ks-hero-media .ks-hero-image {
	object-fit: cover !important;
	object-position: center center !important;
}
@media (max-width: 700px) {
	.ks-hero {
		height: clamp(240px, 62vw, 360px) !important;
	}
	.ks-hero-media .ks-hero-image {
		object-position: center center !important;
	}
}
@media (max-width: 420px) {
	.ks-hero {
		height: clamp(225px, 66vw, 320px) !important;
	}
}


/* ---------- Manual slider artwork frame: 1349x387 ---------- */
.ks-hero {
	width: 100% !important;
	aspect-ratio: 1349 / 387 !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
}
.ks-hero-media,
.ks-hero-media .ks-hero-image {
	width: 100% !important;
	height: 100% !important;
}
.ks-hero-media .ks-hero-image {
	object-fit: cover !important;
	object-position: center center !important;
}
@media (max-width: 700px) {
	.ks-hero {
		aspect-ratio: 16 / 7 !important;
		min-height: 220px !important;
	}
}
@media (max-width: 420px) {
	.ks-hero {
		aspect-ratio: 16 / 8 !important;
		min-height: 210px !important;
	}
}