/*!
 * KNN 侧栏视频播放器 - 前台样式
 * 设计基线：zibll 9.x 的 .zib-widget / .title-theme / .float-right / .controller-hide
 * 所有选择器都限定在 .knsv 内，不会污染主题；颜色优先继承主题 CSS 变量。
 */

.knsv {
	/* 与 zibll body{} 同名变量：主题已定义就直接继承，否则用演示站默认值 */
	--knsv-bg: var(--main-bg-color, #fff);
	--knsv-page: var(--body-bg-color, #f5f6f7);
	--knsv-text: var(--main-color, #4e5358);
	--knsv-strong: var(--key-color, #333);
	--knsv-muted: var(--muted-color, #777);
	--knsv-muted2: var(--muted-2-color, #999);
	--knsv-muted3: var(--muted-3-color, #b1b1b1);
	--knsv-border: var(--main-border-color, rgba(50, 50, 50, .06));
	--knsv-shadow: var(--main-shadow, rgba(116, 116, 116, .08));
	--knsv-accent: var(--theme-color, #f04494);
	--knsv-radius: var(--main-radius, 8px);
	--knsv-mini-radius: calc(var(--knsv-radius) / 1.4);
	--knsv-sticky-top: 70px;
	--knsv-offset-x: 20px;
	--knsv-offset-y: 60px;

	box-sizing: border-box;
	display: block;
	color: var(--knsv-text);
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
}

.knsv *, .knsv *::before, .knsv *::after { box-sizing: border-box; }
.knsv button { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.knsv input[type="range"] { -webkit-appearance: none; appearance: none; }
.knsv svg { display: block; }
.knsv__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.knsv__icon { width: 1.15em; height: 1.15em; fill: currentColor; }
.knsv :focus-visible { outline: 2px solid var(--knsv-accent); outline-offset: 2px; }

.knsv--sidebar { clear: both; margin: 0 0 20px; }
.knsv__card {
	background: var(--knsv-bg);
	border-radius: var(--knsv-radius);
	box-shadow: 0 0 10px var(--knsv-shadow);
	padding: 15px;
	transition: box-shadow .3s, background .3s, opacity .3s, transform .3s, visibility .3s;
}

/* 标题：1:1 复刻 zibll .title-theme（15px / 1.2em 左缩进 / 4px 强调色竖条） */
.knsv__head { display: flex; align-items: center; gap: 8px; min-height: 22px; margin-bottom: 12px; }
.knsv__head-title { position: relative; padding-left: 1.2em; font-size: 15px; font-weight: 600; color: var(--knsv-strong); line-height: 1.4; }
.knsv__head-title::before {
	position: absolute; content: ''; width: 4px;
	background: var(--knsv-accent);
	top: 10%; left: 2px; bottom: 10%;
	border-radius: 5px;
	box-shadow: 1px 1px 3px -1px var(--knsv-accent);
}
.knsv__head-sub { font-size: 12px; color: var(--knsv-muted2); }
.knsv__head-spacer { flex: 1 1 auto; }
.knsv__head-btn { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; color: var(--knsv-muted2); }
.knsv__head-btn:hover { background: var(--knsv-border); color: var(--knsv-accent); }
.knsv__head-btn .knsv__icon { width: 15px; height: 15px; }

/* 画面：16:9，封面 + 大播放按钮（对齐 DPlayer poster / fa-play-circle） */
.knsv__body { position: relative; }
.knsv__stage {
	position: relative;
	overflow: hidden;
	border-radius: var(--knsv-mini-radius);
	background: #000;
	line-height: 0;
	isolation: isolate;
}
.knsv__stage::before { content: ''; display: block; padding-bottom: 56.25%; }
@supports (aspect-ratio: 16 / 9) {
	.knsv__stage { aspect-ratio: 16 / 9; }
	.knsv__stage::before { display: none; }
}
.knsv__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.knsv__poster {
	position: absolute; inset: 0;
	display: grid; place-items: center;
	background: linear-gradient(135deg, rgba(240, 68, 148, .22), rgba(41, 42, 45, .92));
	cursor: pointer;
	transition: opacity .3s, visibility .3s;
}
.knsv__poster-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.knsv__poster-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .45)); }
.knsv__bigplay {
	position: relative; z-index: 1;
	width: 54px; height: 54px; border-radius: 50%;
	display: grid; place-items: center;
	color: rgba(255, 255, 255, .92);
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .38);
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
	box-shadow: 0 2px 14px rgba(0, 0, 0, .22);
	transition: transform .25s, background .25s, border-color .25s;
}
.knsv__bigplay .knsv__icon { width: 28px; height: 28px; margin-left: 3px; }
.knsv__bigplay:hover { transform: scale(1.09); background: var(--knsv-accent); border-color: var(--knsv-accent); }
.knsv.is-playing .knsv__poster { opacity: 0; visibility: hidden; pointer-events: none; }
.knsv.is-playing .knsv__stage { cursor: pointer; }

.knsv__spinner {
	position: absolute; top: 50%; left: 50%; z-index: 2;
	width: 34px; height: 34px; margin: -17px 0 0 -17px;
	display: grid; place-items: center; color: #fff;
	opacity: 0; pointer-events: none; transition: opacity .2s;
}
.knsv.is-loading .knsv__spinner { opacity: .9; }
.knsv__spinner .knsv__icon { width: 30px; height: 30px; animation: knsv-spin .85s linear infinite; }
@keyframes knsv-spin { to { transform: rotate(360deg); } }

.knsv__toast {
	position: absolute; top: 10px; left: 50%; z-index: 6;
	max-width: 90%; padding: 6px 12px; border-radius: 20px;
	background: rgba(0, 0, 0, .72); color: #fff;
	font-size: 12px; line-height: 1.4; text-align: center;
	opacity: 0; transform: translate(-50%, -8px);
	pointer-events: none; transition: opacity .25s, transform .25s;
}
.knsv__toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* 控制条：悬停浮现（zibll 侧栏用 .controller-hide 全隐藏，这里提供 full / minimal 两态） */
.knsv__controls {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
	display: flex; align-items: center; gap: 6px;
	padding: 20px 10px 8px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .72));
	color: #fff; line-height: 1;
	opacity: 0; transform: translateY(6px);
	transition: opacity .25s, transform .25s;
}
.knsv:hover .knsv__controls,
.knsv:focus-within .knsv__controls,
.knsv.is-paused .knsv__controls,
.knsv.is-touch .knsv__controls { opacity: 1; transform: none; }
.knsv--minimal .knsv__controls { display: none; }
.knsv--minimal .knsv__stage { cursor: pointer; }

/* 隐藏播放控制：PHP 端已不渲染控制条/面板，这里是兜底并移除所有点击态 */
.knsv--no-controls .knsv__controls,
.knsv--no-controls .knsv__panel { display: none !important; }
.knsv--no-controls .knsv__stage,
.knsv--no-controls.is-playing .knsv__stage { cursor: default; }
.knsv--no-controls .knsv__video { pointer-events: none; }
.knsv--no-controls .knsv__bigplay { cursor: pointer; }
.knsv--no-controls .knsv__poster { cursor: default; }
@media (hover: none) { .knsv__controls { opacity: 1; transform: none; } }

.knsv__btn { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 5px; color: #fff; opacity: .9; transition: background .2s, opacity .2s; }
.knsv__btn:hover { background: rgba(255, 255, 255, .2); opacity: 1; }
.knsv__btn[hidden] { display: none; }
.knsv__btn .knsv__icon { width: 17px; height: 17px; }
.knsv__rate-btn { width: auto; min-width: 30px; padding: 0 4px; font-size: 11px; font-variant-numeric: tabular-nums; }
.knsv__time { flex: 0 0 auto; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: .92; }
.knsv__sep { margin: 0 3px; opacity: .55; }

.knsv__bar { flex: 1 1 auto; min-width: 28px; padding: 9px 0; cursor: pointer; touch-action: none; }
.knsv__bar-track { position: relative; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); transition: height .15s; }
.knsv__bar:hover .knsv__bar-track { height: 5px; }
.knsv__bar-buffer, .knsv__bar-played { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; }
.knsv__bar-buffer { background: rgba(255, 255, 255, .38); }
.knsv__bar-played { background: var(--knsv-accent); }
.knsv__bar-thumb { position: absolute; top: 50%; left: 0; width: 9px; height: 9px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); box-shadow: 0 1px 4px rgba(0, 0, 0, .45); opacity: 0; transition: opacity .2s; }
.knsv__bar:hover .knsv__bar-thumb, .knsv__bar:focus-visible .knsv__bar-thumb { opacity: 1; }

.knsv__vol { width: 52px; height: 3px; flex: 0 0 auto; border-radius: 3px; background: rgba(255, 255, 255, .35); accent-color: var(--knsv-accent); cursor: pointer; opacity: .9; }
.knsv__vol::-webkit-slider-thumb { -webkit-appearance: none; width: 9px; height: 9px; border-radius: 50%; background: #fff; }
.knsv__vol::-moz-range-thumb { width: 9px; height: 9px; border: 0; border-radius: 50%; background: #fff; }
/* 侧栏只有 ~270px 可用宽度，收起音量条与独立倍速按钮，功能移入「更多」面板 */
.knsv--sidebar .knsv__vol, .knsv--sidebar .knsv__rate-btn,
.knsv--docked .knsv__vol, .knsv--docked .knsv__rate-btn { display: none; }

/* 更多面板：倍速 / 循环 / 播放列表 */
.knsv__panel {
	position: absolute; right: 8px; bottom: 44px; z-index: 7;
	width: 190px; max-height: 76%; overflow: auto;
	padding: 10px; border-radius: var(--knsv-mini-radius);
	background: rgba(28, 28, 30, .94); color: #fff;
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	box-shadow: 0 8px 26px rgba(0, 0, 0, .32);
	font-size: 12px; line-height: 1.5;
}
.knsv__panel[hidden] { display: none; }
.knsv__panel-row { margin-bottom: 10px; }
.knsv__panel-row:last-child { margin-bottom: 0; }
.knsv__panel-label { display: block; margin-bottom: 6px; font-size: 11px; color: rgba(255, 255, 255, .6); }
.knsv__rates { display: flex; flex-wrap: wrap; gap: 4px; }
.knsv__rate-opt { padding: 4px 8px; border-radius: 5px; color: rgba(255, 255, 255, .82); background: rgba(255, 255, 255, .1); font-size: 11px; }
.knsv__rate-opt:hover, .knsv__rate-opt.is-active { background: var(--knsv-accent); color: #fff; }
.knsv__panel-toggle { display: flex; align-items: center; gap: 7px; width: 100%; padding: 6px 8px; border-radius: 6px; color: rgba(255, 255, 255, .82); font-size: 12px; text-align: left; }
.knsv__panel-toggle:hover { background: rgba(255, 255, 255, .1); }
.knsv__panel-toggle.is-on { color: var(--knsv-accent); }
.knsv__panel-toggle .knsv__icon { width: 15px; height: 15px; }
.knsv__list { display: flex; flex-direction: column; gap: 2px; }
.knsv__list-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px; border-radius: 6px; color: rgba(255, 255, 255, .85); font-size: 12px; text-align: left; }
.knsv__list-item:hover, .knsv__list-item.is-active { background: rgba(255, 255, 255, .13); color: #fff; }
.knsv__list-num { flex: 0 0 auto; width: 18px; text-align: center; opacity: .55; font-variant-numeric: tabular-nums; }
.knsv__list-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knsv__panel::-webkit-scrollbar { width: 4px; }
.knsv__panel::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25); border-radius: 4px; }

/* 吸顶：对齐 zibll 的 data-affix / .sidebar-affix */
@media (min-width: 1024px) {
	.knsv--sticky { position: sticky; top: var(--knsv-sticky-top); z-index: 20; }
	body.admin-bar .knsv--sticky { top: calc(var(--knsv-sticky-top) + 32px); }
	.knsv--sticky.is-stuck .knsv__card { box-shadow: 0 6px 26px rgba(0, 0, 0, .13); }
}
@media (max-width: 782px) {
	body.admin-bar .knsv--sticky { top: calc(var(--knsv-sticky-top) + 46px); }
}

/* 位置：zibll .float-right 默认 right:20px / bottom:60px */
.knsv--pos-br { right: var(--knsv-offset-x); bottom: var(--knsv-offset-y); }
.knsv--pos-bl { left: var(--knsv-offset-x); bottom: var(--knsv-offset-y); }
.knsv--pos-tr { right: var(--knsv-offset-x); top: var(--knsv-offset-y); }
.knsv--pos-tl { left: var(--knsv-offset-x); top: var(--knsv-offset-y); }

/* 悬浮 / 停靠：同一套外观，滚动时自动缩成圆钮 */
.knsv--float, .knsv--docked {
	position: fixed; z-index: 1030; margin: 0;
	width: min(320px, calc(100vw - 2 * var(--knsv-offset-x)));
}
.knsv--float .knsv__card, .knsv--docked .knsv__card { box-shadow: 0 10px 34px rgba(0, 0, 0, .22); }
.knsv--float .knsv__controls, .knsv--docked .knsv__controls { opacity: 1; transform: none; }
.knsv--docked { animation: knsv-dock-in .3s ease both; }
@keyframes knsv-dock-in { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
.knsv__placeholder { display: block; width: 100%; }

.knsv__fab {
	position: fixed; z-index: 1031;
	width: 48px; height: 48px; border-radius: 50%;
	display: grid; place-items: center;
	background-color: var(--knsv-accent); background-size: cover; background-position: center;
	color: #fff; box-shadow: 0 4px 16px rgba(240, 68, 148, .4);
	opacity: 0; transform: scale(.6); pointer-events: none;
	transition: opacity .3s, transform .3s, width .3s, height .3s;
}
.knsv__fab::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(0, 0, 0, .32); }
.knsv__fab .knsv__icon { position: relative; width: 22px; height: 22px; margin-left: 2px; }
.knsv--pos-br .knsv__fab { right: var(--knsv-offset-x); bottom: var(--knsv-offset-y); }
.knsv--pos-bl .knsv__fab { left: var(--knsv-offset-x); bottom: var(--knsv-offset-y); }
.knsv--pos-tr .knsv__fab { right: var(--knsv-offset-x); top: var(--knsv-offset-y); }
.knsv--pos-tl .knsv__fab { left: var(--knsv-offset-x); top: var(--knsv-offset-y); }

.knsv--float.is-collapsed .knsv__card,
.knsv--float.is-hidden .knsv__card {
	opacity: 0; visibility: hidden; pointer-events: none;
	transform: translateY(20px) scale(.92);
}
.knsv--float.is-collapsed .knsv__fab,
.knsv--float.is-hidden .knsv__fab { opacity: 1; transform: scale(1); pointer-events: auto; }
.knsv--float.is-hidden .knsv__fab { width: 30px; height: 30px; opacity: .42; }
.knsv--float.is-hidden .knsv__fab .knsv__icon { width: 15px; height: 15px; }

/* 向下滚动时自动收起（对齐 zibll body.scroll-down .scroll-down-hide） */
html.knsv-scroll-down .knsv--float:not(.is-pinned) .knsv__card {
	opacity: 0; visibility: hidden; pointer-events: none;
	transform: translateX(40px);
}
html.knsv-scroll-down .knsv--float:not(.is-hidden) .knsv__fab {
	opacity: 1; transform: scale(1); pointer-events: auto;
}

/* 暗色：knn-theme 用 body.dark-mode，zibll 用 .dark-theme，这里全部兼容 */
body.dark-mode .knsv,
body.dark-theme .knsv,
html.dark .knsv,
.dark-theme .knsv,
[data-theme="dark"] .knsv {
	--knsv-bg: var(--knsv-dark-bg, #323335);
	--knsv-page: var(--knsv-dark-page, #292a2d);
	--knsv-text: var(--knsv-dark-text, #e5eef7);
	--knsv-strong: var(--knsv-dark-strong, #f8fafc);
	--knsv-muted: var(--knsv-dark-muted, #b4b6bb);
	--knsv-muted2: var(--knsv-dark-muted2, #888a8f);
	--knsv-muted3: var(--knsv-dark-muted3, #636469);
	--knsv-border: var(--knsv-dark-border, rgba(114, 114, 114, .1));
	--knsv-shadow: var(--knsv-dark-shadow, rgba(24, 24, 24, .1));
}
@media (prefers-color-scheme: dark) {
	html:not(.knsv-force-light) .knsv[data-knsv-dark="system"] {
		--knsv-bg: var(--knsv-dark-bg, #323335);
		--knsv-page: var(--knsv-dark-page, #292a2d);
		--knsv-text: var(--knsv-dark-text, #e5eef7);
		--knsv-strong: var(--knsv-dark-strong, #f8fafc);
		--knsv-muted: var(--knsv-dark-muted, #b4b6bb);
		--knsv-muted2: var(--knsv-dark-muted2, #888a8f);
		--knsv-muted3: var(--knsv-dark-muted3, #636469);
		--knsv-border: var(--knsv-dark-border, rgba(114, 114, 114, .1));
		--knsv-shadow: var(--knsv-dark-shadow, rgba(24, 24, 24, .1));
	}
}

/* 全屏 */
.knsv__stage:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; }
.knsv__stage:fullscreen::before { display: none; }
.knsv__stage:fullscreen .knsv__video { object-fit: contain; }
.knsv__stage:-webkit-full-screen { width: 100vw; height: 100vh; }

/* 响应式 */
@media (max-width: 1023px) {
	.knsv--sidebar .knsv__vol, .knsv--sidebar .knsv__rate-btn { display: none; }
	.knsv--sidebar .knsv__controls { opacity: 1; transform: none; }
}
@media (max-width: 767px) {
	.knsv--float, .knsv--docked { width: min(300px, calc(100vw - 2 * var(--knsv-offset-x))); }
	.knsv--pos-br.knsv--float, .knsv--pos-bl.knsv--float,
	.knsv--pos-br.knsv--docked, .knsv--pos-bl.knsv--docked {
		bottom: calc(12px + env(safe-area-inset-bottom)) !important;
	}
	.knsv--pos-br .knsv__fab, .knsv--pos-bl .knsv__fab { bottom: calc(12px + env(safe-area-inset-bottom)) !important; }
	.knsv__panel { width: 172px; }
	.knsv__time { font-size: 10px; }
	.knsv__controls { gap: 4px; padding-left: 7px; padding-right: 7px; }
	.knsv--sidebar .knsv__card { padding: 12px; }
	.knsv--float .knsv__vol, .knsv--docked .knsv__vol { width: 38px; }
}
@media (max-width: 380px) {
	.knsv--float .knsv__vol, .knsv--docked .knsv__vol { display: none; }
	.knsv--float .knsv__rate-btn, .knsv--docked .knsv__rate-btn { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.knsv *, .knsv *::before, .knsv *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.knsv--empty {
	padding: 12px 15px; border-radius: var(--knsv-radius);
	background: var(--knsv-bg); color: var(--knsv-muted);
	font-size: 13px; box-shadow: 0 0 10px var(--knsv-shadow);
}

/* 手机端隐藏容器。
   容器本身不设隐藏规则 —— 真正的 display:none 由服务端按后台开关输出的
   <style id="knsv-mobile-hide-css"> 媒体查询提供（见 knsv_mobile_hide_css()）。
   这样「关闭开关」时任何设备都一定正常显示，桌面端也不会被误隐藏；
   JS 只补 aria-hidden / inert 与状态类，不作为隐藏的主逻辑。 */
.knsv-mobile-hide { display: block; }
.knsv-mobile-hide.knsv-mobile-is-hidden { pointer-events: none; }