/* 阅读页：引用、列表、待办、字体（与 wangEditor data-slate-editor 内样式一致）；.blockquote 为主题回帖引用，见 kehua_theme */
.kehua-page-read .kehua-article-body blockquote:not(.blockquote),
.kehua-read-main .kehua-article-body blockquote:not(.blockquote),
.kehua-article-body blockquote:not(.blockquote),
.message blockquote:not(.blockquote) {
	margin: 10px 0;
	padding: 10px;
	border-left: 8px solid #b4d5ff;
	background: #f5f2f0;
	color: inherit;
	line-height: 1.5;
}
/* 主题全局 ul { list-style:none; padding:0 } 会去掉圆点，须用 !important 恢复 */
.kehua-page-read .kehua-article-body ul,
.kehua-article-body ul,
.message ul {
	margin: 0.5em 0 !important;
	padding-left: 1.5em !important;
	list-style: disc outside !important;
	list-style-type: disc !important;
}
.kehua-page-read .kehua-article-body ul ul,
.kehua-article-body ul ul,
.message ul ul {
	list-style: circle outside !important;
	list-style-type: circle !important;
}
.kehua-page-read .kehua-article-body ol,
.kehua-article-body ol,
.message ol {
	margin: 0.5em 0 !important;
	padding-left: 1.5em !important;
	list-style: decimal outside !important;
	list-style-type: decimal !important;
}
.kehua-page-read .kehua-article-body li,
.kehua-article-body li,
.message li {
	display: list-item !important;
	margin: 0.2em 0;
}
.kehua-page-read .kehua-article-body ul li input[type="checkbox"],
.kehua-article-body ul li input[type="checkbox"],
.message ul li input[type="checkbox"] {
	margin: 0 0.4em 0 0;
	vertical-align: middle;
	width: 1em;
	height: 1em;
}

/* 代码块：与 wangEditor .w-e-text-container [data-slate-editor] pre>code 一致（pre 包裹 code） */
.kehua-page-read .kehua-article-body pre,
.kehua-read-main .kehua-article-body pre,
.kehua-article-body pre,
.message pre,
.kehua-post-message pre {
	display: block;
	box-sizing: border-box;
	max-width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible;
	background: transparent !important;
	border: none !important;
	border-radius: 0;
}
.kehua-page-read .kehua-article-body pre code,
.kehua-read-main .kehua-article-body pre code,
.kehua-article-body pre code,
.message pre code,
.kehua-post-message pre code {
	display: block;
	width: 100%;
	box-sizing: border-box;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0.5em 0 !important;
	padding: 1em !important;
	font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	tab-size: 4;
	-moz-tab-size: 4;
	-o-tab-size: 4;
	background: #f5f2f0 !important;
	border: 1px solid #e8e8e8 !important;
	border-radius: 4px !important;
	text-shadow: 0 1px #fff;
	text-align: left;
	white-space: pre !important;
	word-wrap: normal !important;
	word-break: normal !important;
	word-spacing: normal !important;
	overflow-wrap: normal !important;
	-webkit-hyphens: none;
	hyphens: none;
}
/* Prism token 颜色与 wangEditor style.css 内联规则一致 */
.kehua-page-read .kehua-article-body pre code .token.cdata,
.kehua-page-read .kehua-article-body pre code .token.comment,
.kehua-page-read .kehua-article-body pre code .token.doctype,
.kehua-page-read .kehua-article-body pre code .token.prolog,
.kehua-read-main .kehua-article-body pre code .token.cdata,
.kehua-read-main .kehua-article-body pre code .token.comment,
.kehua-read-main .kehua-article-body pre code .token.doctype,
.kehua-read-main .kehua-article-body pre code .token.prolog,
.kehua-article-body pre code .token.cdata,
.kehua-article-body pre code .token.comment,
.kehua-article-body pre code .token.doctype,
.kehua-article-body pre code .token.prolog,
.message pre code .token.cdata,
.message pre code .token.comment,
.message pre code .token.doctype,
.message pre code .token.prolog,
.kehua-post-message pre code .token.cdata,
.kehua-post-message pre code .token.comment,
.kehua-post-message pre code .token.doctype,
.kehua-post-message pre code .token.prolog {
	color: #708090;
}
.kehua-page-read .kehua-article-body pre code .token.punctuation,
.kehua-read-main .kehua-article-body pre code .token.punctuation,
.kehua-article-body pre code .token.punctuation,
.message pre code .token.punctuation,
.kehua-post-message pre code .token.punctuation {
	color: #999;
}
.kehua-page-read .kehua-article-body pre code .token.namespace,
.kehua-read-main .kehua-article-body pre code .token.namespace,
.kehua-article-body pre code .token.namespace,
.message pre code .token.namespace,
.kehua-post-message pre code .token.namespace {
	opacity: 0.7;
}
.kehua-page-read .kehua-article-body pre code .token.boolean,
.kehua-page-read .kehua-article-body pre code .token.constant,
.kehua-page-read .kehua-article-body pre code .token.deleted,
.kehua-page-read .kehua-article-body pre code .token.number,
.kehua-page-read .kehua-article-body pre code .token.property,
.kehua-page-read .kehua-article-body pre code .token.symbol,
.kehua-page-read .kehua-article-body pre code .token.tag,
.kehua-read-main .kehua-article-body pre code .token.boolean,
.kehua-read-main .kehua-article-body pre code .token.constant,
.kehua-read-main .kehua-article-body pre code .token.deleted,
.kehua-read-main .kehua-article-body pre code .token.number,
.kehua-read-main .kehua-article-body pre code .token.property,
.kehua-read-main .kehua-article-body pre code .token.symbol,
.kehua-read-main .kehua-article-body pre code .token.tag,
.kehua-article-body pre code .token.boolean,
.kehua-article-body pre code .token.constant,
.kehua-article-body pre code .token.deleted,
.kehua-article-body pre code .token.number,
.kehua-article-body pre code .token.property,
.kehua-article-body pre code .token.symbol,
.kehua-article-body pre code .token.tag,
.message pre code .token.boolean,
.message pre code .token.constant,
.message pre code .token.deleted,
.message pre code .token.number,
.message pre code .token.property,
.message pre code .token.symbol,
.message pre code .token.tag,
.kehua-post-message pre code .token.boolean,
.kehua-post-message pre code .token.constant,
.kehua-post-message pre code .token.deleted,
.kehua-post-message pre code .token.number,
.kehua-post-message pre code .token.property,
.kehua-post-message pre code .token.symbol,
.kehua-post-message pre code .token.tag {
	color: #905;
}
.kehua-page-read .kehua-article-body pre code .token.attr-name,
.kehua-page-read .kehua-article-body pre code .token.builtin,
.kehua-page-read .kehua-article-body pre code .token.char,
.kehua-page-read .kehua-article-body pre code .token.inserted,
.kehua-page-read .kehua-article-body pre code .token.selector,
.kehua-page-read .kehua-article-body pre code .token.string,
.kehua-read-main .kehua-article-body pre code .token.attr-name,
.kehua-read-main .kehua-article-body pre code .token.builtin,
.kehua-read-main .kehua-article-body pre code .token.char,
.kehua-read-main .kehua-article-body pre code .token.inserted,
.kehua-read-main .kehua-article-body pre code .token.selector,
.kehua-read-main .kehua-article-body pre code .token.string,
.kehua-article-body pre code .token.attr-name,
.kehua-article-body pre code .token.builtin,
.kehua-article-body pre code .token.char,
.kehua-article-body pre code .token.inserted,
.kehua-article-body pre code .token.selector,
.kehua-article-body pre code .token.string,
.message pre code .token.attr-name,
.message pre code .token.builtin,
.message pre code .token.char,
.message pre code .token.inserted,
.message pre code .token.selector,
.message pre code .token.string,
.kehua-post-message pre code .token.attr-name,
.kehua-post-message pre code .token.builtin,
.kehua-post-message pre code .token.char,
.kehua-post-message pre code .token.inserted,
.kehua-post-message pre code .token.selector,
.kehua-post-message pre code .token.string {
	color: #690;
}
.kehua-page-read .kehua-article-body pre code.language-css .token.string,
.kehua-page-read .kehua-article-body pre code.style .token.string,
.kehua-page-read .kehua-article-body pre code .token.entity,
.kehua-page-read .kehua-article-body pre code .token.operator,
.kehua-page-read .kehua-article-body pre code .token.url,
.kehua-read-main .kehua-article-body pre code.language-css .token.string,
.kehua-read-main .kehua-article-body pre code.style .token.string,
.kehua-read-main .kehua-article-body pre code .token.entity,
.kehua-read-main .kehua-article-body pre code .token.operator,
.kehua-read-main .kehua-article-body pre code .token.url,
.kehua-article-body pre code.language-css .token.string,
.kehua-article-body pre code.style .token.string,
.kehua-article-body pre code .token.entity,
.kehua-article-body pre code .token.operator,
.kehua-article-body pre code .token.url,
.message pre code.language-css .token.string,
.message pre code.style .token.string,
.message pre code .token.entity,
.message pre code .token.operator,
.message pre code .token.url,
.kehua-post-message pre code.language-css .token.string,
.kehua-post-message pre code.style .token.string,
.kehua-post-message pre code .token.entity,
.kehua-post-message pre code .token.operator,
.kehua-post-message pre code .token.url {
	color: #9a6e3a;
}
.kehua-page-read .kehua-article-body pre code .token.atrule,
.kehua-page-read .kehua-article-body pre code .token.attr-value,
.kehua-page-read .kehua-article-body pre code .token.keyword,
.kehua-read-main .kehua-article-body pre code .token.atrule,
.kehua-read-main .kehua-article-body pre code .token.attr-value,
.kehua-read-main .kehua-article-body pre code .token.keyword,
.kehua-article-body pre code .token.atrule,
.kehua-article-body pre code .token.attr-value,
.kehua-article-body pre code .token.keyword,
.message pre code .token.atrule,
.message pre code .token.attr-value,
.message pre code .token.keyword,
.kehua-post-message pre code .token.atrule,
.kehua-post-message pre code .token.attr-value,
.kehua-post-message pre code .token.keyword {
	color: #07a;
}
.kehua-page-read .kehua-article-body pre code .token.class-name,
.kehua-page-read .kehua-article-body pre code .token.function,
.kehua-read-main .kehua-article-body pre code .token.class-name,
.kehua-read-main .kehua-article-body pre code .token.function,
.kehua-article-body pre code .token.class-name,
.kehua-article-body pre code .token.function,
.message pre code .token.class-name,
.message pre code .token.function,
.kehua-post-message pre code .token.class-name,
.kehua-post-message pre code .token.function {
	color: #dd4a68;
}
.kehua-page-read .kehua-article-body pre code .token.important,
.kehua-page-read .kehua-article-body pre code .token.regex,
.kehua-page-read .kehua-article-body pre code .token.variable,
.kehua-read-main .kehua-article-body pre code .token.important,
.kehua-read-main .kehua-article-body pre code .token.regex,
.kehua-read-main .kehua-article-body pre code .token.variable,
.kehua-article-body pre code .token.important,
.kehua-article-body pre code .token.regex,
.kehua-article-body pre code .token.variable,
.message pre code .token.important,
.message pre code .token.regex,
.message pre code .token.variable,
.kehua-post-message pre code .token.important,
.kehua-post-message pre code .token.regex,
.kehua-post-message pre code .token.variable {
	color: #e90;
}
.kehua-page-read .kehua-article-body pre code .token.bold,
.kehua-page-read .kehua-article-body pre code .token.important,
.kehua-read-main .kehua-article-body pre code .token.bold,
.kehua-read-main .kehua-article-body pre code .token.important,
.kehua-article-body pre code .token.bold,
.kehua-article-body pre code .token.important,
.message pre code .token.bold,
.kehua-post-message pre code .token.bold {
	font-weight: 700;
}
.kehua-page-read .kehua-article-body pre code .token.italic,
.kehua-read-main .kehua-article-body pre code .token.italic,
.kehua-article-body pre code .token.italic,
.message pre code .token.italic,
.kehua-post-message pre code .token.italic {
	font-style: italic;
}
.kehua-page-read .kehua-article-body pre code .token.entity,
.kehua-read-main .kehua-article-body pre code .token.entity,
.kehua-article-body pre code .token.entity,
.message pre code .token.entity,
.kehua-post-message pre code .token.entity {
	cursor: help;
}
/* 兼容无 <code> 包裹的旧内容 */
.kehua-page-read .kehua-article-body pre:not(:has(> code)),
.kehua-read-main .kehua-article-body pre:not(:has(> code)),
.kehua-article-body pre:not(:has(> code)),
.message pre:not(:has(> code)),
.kehua-post-message pre:not(:has(> code)) {
	display: block;
	box-sizing: border-box;
	max-width: 100%;
	margin: 0.5em 0 !important;
	padding: 1em !important;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	background: #f5f2f0 !important;
	border: 1px solid #e8e8e8 !important;
	border-radius: 4px !important;
	text-shadow: 0 1px #fff;
	white-space: pre !important;
	word-break: normal !important;
	word-wrap: normal !important;
	overflow-wrap: normal !important;
}
/* 行内 code（非 pre 包裹） */
.kehua-page-read .kehua-article-body p code,
.kehua-read-main .kehua-article-body p code,
.kehua-article-body p code,
.kehua-article-body li code,
.message p code,
.message li code {
	font-family: Consolas, Monaco, Menlo, monospace !important;
	font-size: 0.9em;
	padding: 0.12em 0.4em;
	background: rgba(0, 0, 0, 0.06);
	border-radius: 4px;
	word-break: break-word;
}

/* wangEditor：表格外壳虚线边框（入库 HTML 常为 .table-container>table） */
.kehua-page-read .kehua-article-body .table-container,
.kehua-read-main .kehua-article-body .table-container,
.kehua-article-body .table-container,
.message .table-container {
	border: 1px dashed #ccc;
	border-radius: 5px;
	margin: 10px 0;
	overflow-x: auto;
	padding: 10px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
.kehua-page-read .kehua-article-body .table-container table,
.kehua-read-main .kehua-article-body .table-container table,
.kehua-article-body .table-container table,
.message .table-container table {
	margin: 0 !important;
	border: none !important;
}

/* 阅读页正文表格：主题 style 常在 table/td/th 上 border:0，需提高优先级 */
.kehua-page-read .kehua-article-body table,
.kehua-article-body table,
.message table {
	border-collapse: collapse !important;
	border-spacing: 0;
	max-width: 100%;
	margin: 0.75em 0;
	border: 1px solid #ccc !important;
	box-sizing: border-box;
	table-layout: auto !important;
}
.kehua-page-read .kehua-article-body table td,
.kehua-page-read .kehua-article-body table th,
.kehua-article-body table td,
.kehua-article-body table th,
.message table td,
.message table th {
	border: 1px solid #ccc !important;
	padding: 3px 5px !important;
	line-height: 1.5 !important;
	min-width: 30px;
	/* 空单元格无文字时行盒高度为 0 会塌陷，与 wangEditor 内有占位时观感一致（约与 min-width 同量级“方格”） */
	min-height: calc(6px + 1.5em);
	vertical-align: middle;
	box-sizing: border-box;
	/* 覆盖正文 overflow-wrap:anywhere，避免窄列下一字一行像「竖排」 */
	word-break: normal !important;
	overflow-wrap: break-word !important;
	writing-mode: horizontal-tb !important;
	text-orientation: mixed !important;
}

.kehua-page-read .kehua-article-body table th,
.kehua-read-main .kehua-article-body table th,
.kehua-article-body table th,
.message table th {
	background-color: #f5f2f0 !important;
	font-weight: 700 !important;
	text-align: center !important;
}

.kehua-page-read .kehua-article-body table td,
.kehua-article-body table td,
.message table td {
	text-align: left;
}

/* wangEditor 单元格内常为 <p>，会继承 .kehua-article-body 的 overflow-wrap:anywhere，必须单独覆盖 */
.kehua-page-read .kehua-article-body table td p,
.kehua-page-read .kehua-article-body table th p,
.kehua-article-body table td p,
.kehua-article-body table th p,
.message table td p,
.message table th p {
	overflow-wrap: break-word !important;
	word-break: keep-all !important;
}

/* 小屏：不靠暴力 min-width/max-content 拉长表格（会破坏 wangEditor 里规整方格观感）；交由 .table-container 横向滑动 */
@media (max-width: 768px) {
	.kehua-page-read .kehua-article-body,
	.kehua-read-main .kehua-article-body,
	.kehua-article-body {
		overflow-x: auto;
		overflow-y: visible;
		-webkit-overflow-scrolling: touch;
		min-width: 0;
	}

	.kehua-page-read .kehua-article-body .table-container,
	.kehua-read-main .kehua-article-body .table-container,
	.kehua-article-body .table-container,
	.message .table-container {
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
		max-width: 100%;
	}

	.kehua-page-read .kehua-article-body .table-container table,
	.kehua-read-main .kehua-article-body .table-container table,
	.kehua-article-body .table-container table,
	.message .table-container table {
		width: auto !important;
		max-width: none !important;
		min-width: 0 !important;
		table-layout: auto !important;
	}

	.kehua-page-read .kehua-article-body table,
	.kehua-read-main .kehua-article-body table,
	.kehua-article-body table,
	.message table {
		width: auto !important;
		max-width: 100% !important;
		min-width: 0 !important;
		table-layout: auto !important;
	}

	.kehua-page-read .kehua-article-body table td,
	.kehua-page-read .kehua-article-body table th,
	.kehua-article-body table td,
	.kehua-article-body table th,
	.message table td,
	.message table th {
		min-width: 30px !important;
		min-height: calc(6px + 1.5em) !important;
		padding: 3px 5px !important;
		white-space: normal !important;
		word-break: normal !important;
		overflow-wrap: break-word !important;
	}

	.kehua-page-read .kehua-article-body table td p,
	.kehua-page-read .kehua-article-body table th p,
	.kehua-article-body table td p,
	.kehua-article-body table th p,
	.message table td p,
	.message table th p {
		word-break: normal !important;
		overflow-wrap: break-word !important;
	}
}

/* 正文内网易云链接：隐藏（阅页仅用底栏播放；多首时取 DOM 中第一首预载） */
body.xn-gnp-pad {
	padding-bottom: var(--xn-gnp-height, 70px);
}

/* 修罗阅读页主容器为 .kehua-article-body，须与 .message 一并处理，否则仍会显示「🎵 歌名 — 歌手」 */
.kehua-page-read .kehua-article-body a[href*='music.163.com/song?'],
.kehua-read-main .kehua-article-body a[href*='music.163.com/song?'],
.kehua-article-body a[href*='music.163.com/song?'],
.message a[href*='music.163.com/song?'] {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	font-size: 0 !important;
	line-height: 0 !important;
	color: transparent !important;
}
.kehua-page-read .kehua-article-body a[href*='music.163.com/song?']::before,
.kehua-page-read .kehua-article-body a[href*='music.163.com/song?']::after,
.kehua-read-main .kehua-article-body a[href*='music.163.com/song?']::before,
.kehua-read-main .kehua-article-body a[href*='music.163.com/song?']::after,
.kehua-article-body a[href*='music.163.com/song?']::before,
.kehua-article-body a[href*='music.163.com/song?']::after,
.message a[href*='music.163.com/song?']::before,
.message a[href*='music.163.com/song?']::after {
	content: none !important;
}
.kehua-page-read .kehua-article-body p.xn-netease-marker-p,
.kehua-read-main .kehua-article-body p.xn-netease-marker-p,
.kehua-article-body p.xn-netease-marker-p,
.message p.xn-netease-marker-p,
.kehua-page-read .kehua-article-body p.xn-netease-marker-p:has(> a[href*='music.163.com/song?']:only-child),
.kehua-read-main .kehua-article-body p.xn-netease-marker-p:has(> a[href*='music.163.com/song?']:only-child),
.kehua-article-body p.xn-netease-marker-p:has(> a[href*='music.163.com/song?']:only-child),
.kehua-page-read .kehua-article-body p:has(> a[href*='music.163.com/song?']:only-child),
.kehua-read-main .kehua-article-body p:has(> a[href*='music.163.com/song?']:only-child),
.kehua-article-body p:has(> a[href*='music.163.com/song?']:only-child),
.message p.xn-netease-marker-p:has(> a[href*='music.163.com/song?']:only-child),
.message p:has(> a[href*='music.163.com/song?']:only-child) {
	position: relative;
	margin: 0;
	padding: 0;
	height: 0;
	min-height: 0;
	overflow: hidden;
	line-height: 0;
	font-size: 0;
}

/* 底部固定播放栏（仿网易网页端条） */
.xn-gnp {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10050;
	background: rgba(255, 255, 255, 0.65);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-top: 1px solid rgba(255, 255, 255, 0.35);
	box-sizing: border-box;
	font-size: 14px;
	color: #333;
}
.xn-gnp-inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: 1200px;
	margin: 0 auto;
	padding: 10px 16px;
	min-height: var(--xn-gnp-height, 70px);
	box-sizing: border-box;
}
.xn-gnp-info {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 0;
	min-width: 0;
	max-width: min(28vw, 320px);
	/* 仅占位的空白不截获点击，避免压住绝对居中的播放区（子元素仍可按） */
	pointer-events: none;
}
.xn-gnp-info * {
	pointer-events: auto;
}
.xn-gnp-cover {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 4px;
	overflow: hidden;
	background: #eee;
}
.xn-gnp-cover-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	vertical-align: top;
}
.xn-gnp-text {
	min-width: 0;
}
/* 合并「歌名 - 歌手」仅小屏展示；桌面端用上下两行 */
.xn-gnp-line {
	display: none;
}
.xn-gnp-title {
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.35;
}
.xn-gnp-artist {
	font-size: 12px;
	color: #888;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.3;
	margin-top: 2px;
}
/* 相对整栏几何居中，宽度尽量大（不受左侧歌名占位影响）；左右 flex 各占一半剩余，保证 50% 在正中 */
.xn-gnp-center {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	/* 两侧各预留约 160px，避免与封面区、右侧工具叠住；宽屏仍可到 720px */
	width: min(720px, max(240px, calc(100% - 320px)));
	max-width: calc(100% - 320px);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: 6px;
	min-width: 220px;
	pointer-events: none;
}
.xn-gnp-center > * {
	pointer-events: auto;
}
.xn-gnp-btns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	align-self: center;
}
.xn-gnp-prev,
.xn-gnp-next {
	box-sizing: border-box;
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	opacity: 0.55;
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.xn-gnp-prev:hover,
.xn-gnp-next:hover {
	opacity: 0.9;
	/* 勿用 background 简写，会清掉底图 SVG */
	background-color: rgba(0, 0, 0, 0.05);
}
.xn-gnp-prev:focus-visible,
.xn-gnp-next:focus-visible,
.xn-gnp-play:focus-visible {
	outline: 2px solid rgba(236, 65, 65, 0.65);
	outline-offset: 2px;
}
.xn-gnp-prev {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M6 6h2v12H6V6zm3.5 6l8.5 6V6l-8.5 6z'/%3E%3C/svg%3E")
		center/20px 20px no-repeat;
}
.xn-gnp-next {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M16 18h2V6h-2v12zM6 18l8.5-6L6 6v12z'/%3E%3C/svg%3E")
		center/20px 20px no-repeat;
}
.xn-gnp-play {
	box-sizing: border-box;
	width: 42px;
	height: 42px;
	border: none;
	border-radius: 50%;
	background: #ec4141;
	cursor: pointer;
	box-shadow: none;
	flex-shrink: 0;
	position: relative;
	touch-action: manipulation;
}
.xn-gnp-play:hover {
	filter: brightness(1.05);
}
.xn-gnp-play::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-40%, -50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent #fff;
	pointer-events: none;
}
.xn-gnp.is-playing .xn-gnp-play::after {
	width: 11px;
	height: 14px;
	border: none;
	transform: translate(-50%, -50%);
	background: linear-gradient(
		90deg,
		#fff 0 30%,
		transparent 30% 70%,
		#fff 70% 100%
	);
	pointer-events: none;
}
.xn-gnp-seek {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-width: 0;
}
.xn-gnp-cur,
.xn-gnp-dur {
	font-size: 11px;
	color: #999;
	font-variant-numeric: tabular-nums;
	flex: 0 0 auto;
}
.xn-gnp-track {
	flex: 1 1 auto;
	min-width: 48px;
	padding: 8px 0;
	cursor: pointer;
}
.xn-gnp-track-rail {
	position: relative;
	height: 4px;
	background: #e8e8e8;
	border-radius: 2px;
}
.xn-gnp-track-fill {
	height: 100%;
	width: 0;
	background: #ec4141;
	border-radius: 2px;
	pointer-events: none;
}
.xn-gnp-track-thumb {
	position: absolute;
	top: 50%;
	left: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #ec4141;
	box-shadow: 0 0 0 2px #fff;
	pointer-events: none;
	transform: translate(-50%, -50%);
}
.xn-gnp-tools {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 6px;
	pointer-events: none;
}
.xn-gnp-tools .xn-gnp-vol-wrap,
.xn-gnp-tools .xn-gnp-pl-wrap {
	pointer-events: none;
}
.xn-gnp-tools button,
.xn-gnp-tools .xn-gnp-vol-pop,
.xn-gnp-tools .xn-gnp-pl-panel {
	pointer-events: auto;
}
.xn-gnp-like {
	width: 32px;
	height: 32px;
	border: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.8'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E")
		center/20px 20px no-repeat;
	cursor: pointer;
	opacity: 0.75;
	border-radius: 4px;
}
.xn-gnp-like:hover,
.xn-gnp-like.is-on {
	opacity: 1;
}
.xn-gnp-like.is-on {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ec4141'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
}
.xn-gnp-loop {
	width: 32px;
	height: 32px;
	border: none;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.8'%3E%3Cpath d='M17 3l4 4-4 4M3 11V9a4 4 0 0 1 4-4h14M7 21l-4-4 4-4M21 13v2a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
	cursor: pointer;
	opacity: 0.75;
	border-radius: 4px;
	position: relative;
	box-sizing: border-box;
}
.xn-gnp-loop:hover {
	opacity: 1;
	background-color: rgba(0, 0, 0, 0.05);
}
.xn-gnp-loop.is-on {
	opacity: 1;
}
/* 单曲循环：在双箭头图标正中叠加「1」，颜色与箭头描边一致 */
.xn-gnp-loop.is-on.is-single::after {
	content: '1';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -54%);
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
	color: #888;
	pointer-events: none;
	font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'PingFang SC', sans-serif;
}
.xn-gnp-vol-wrap {
	position: relative;
}
.xn-gnp-vol {
	width: 32px;
	height: 32px;
	border: none;
	box-sizing: border-box;
	overflow: visible;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4V5z'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'/%3E%3C/svg%3E")
		center/22px 22px no-repeat;
	cursor: pointer;
	opacity: 0.75;
	border-radius: 4px;
}
.xn-gnp-vol:hover {
	opacity: 1;
	background-color: rgba(0, 0, 0, 0.05);
}
.xn-gnp.is-muted .xn-gnp-vol {
	opacity: 0.4;
}
.xn-gnp-vol-pop {
	display: none;
	position: absolute;
	bottom: 100%;
	right: 0;
	margin-bottom: 6px;
	padding: 12px 10px;
	background: rgba(255, 255, 255, 0.65);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: none;
	border-radius: 8px;
	box-shadow: none;
	z-index: 10;
	align-items: center;
	justify-content: center;
}
.xn-gnp-vol-pop.is-open {
	display: flex;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.xn-gnp-vol-pop {
		background: rgba(255, 255, 255, 0.94);
	}
}
.xn-gnp-vol-range {
	-webkit-appearance: slider-vertical;
	appearance: slider-vertical;
	width: 32px;
	height: 96px;
	min-height: 96px;
	margin: 0;
	padding: 0;
	accent-color: #ec4141;
	cursor: pointer;
	vertical-align: middle;
}

/* 播放列表：音量右侧按钮 + 上展毛玻璃面板 */
.xn-gnp-pl-wrap {
	position: relative;
	flex-shrink: 0;
}
.xn-gnp-pl {
	width: 32px;
	height: 32px;
	border: none;
	padding: 0;
	box-sizing: border-box;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h10'/%3E%3C/svg%3E")
		center/20px 20px no-repeat;
	cursor: pointer;
	opacity: 0.75;
	border-radius: 4px;
}
.xn-gnp-pl:hover,
.xn-gnp.is-pl-open .xn-gnp-pl {
	opacity: 1;
	background-color: rgba(0, 0, 0, 0.05);
}
.xn-gnp-pl-panel {
	position: absolute;
	right: 0;
	bottom: calc(100% + 10px);
	width: min(92vw, 300px);
	max-height: min(48vh, 360px);
	display: flex;
	flex-direction: column;
	padding: 0;
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
	z-index: 30;
	box-sizing: border-box;
	box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.55);
	backdrop-filter: blur(24px) saturate(1.45);
	-webkit-backdrop-filter: blur(24px) saturate(1.45);
}
.xn-gnp-pl-panel[hidden] {
	display: none !important;
}
.xn-gnp-pl-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 14px 8px;
	font-size: 13px;
	font-weight: 600;
	color: rgba(30, 30, 30, 0.88);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	background: rgba(255, 255, 255, 0.42);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}
.xn-gnp-pl-count {
	font-weight: 500;
	font-size: 12px;
	color: rgba(100, 100, 100, 0.85);
	white-space: nowrap;
}
.xn-gnp-pl-list {
	list-style: none;
	margin: 0;
	padding: 6px 6px 10px;
	overflow-y: auto;
	flex: 1 1 auto;
	min-height: 0;
	-webkit-overflow-scrolling: touch;
}
.xn-gnp-pl-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 10px 10px 8px;
	margin: 2px 0;
	border-radius: 10px;
	cursor: pointer;
	transition: background-color 0.18s ease, box-shadow 0.18s ease;
}
.xn-gnp-pl-item:hover {
	background-color: rgba(0, 0, 0, 0.055);
}
.xn-gnp-pl-item.is-current {
	background: rgba(236, 65, 65, 0.14);
	box-shadow: 0 0 0 1px rgba(236, 65, 65, 0.22);
}
.xn-gnp-pl-item.is-current:hover {
	background-color: rgba(236, 65, 65, 0.2);
	box-shadow: 0 0 0 1px rgba(236, 65, 65, 0.3);
}
.xn-gnp-pl-idx {
	flex: 0 0 auto;
	width: 22px;
	text-align: right;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	color: rgba(120, 120, 120, 0.9);
	padding-top: 2px;
}
.xn-gnp-pl-main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.xn-gnp-pl-title {
	font-size: 13px;
	font-weight: 500;
	color: rgba(35, 35, 35, 0.92);
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.xn-gnp-pl-playhit {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 10px;
	background: transparent;
	cursor: pointer;
}
.xn-gnp-pl-empty {
	padding: 20px 12px;
	text-align: center;
	font-size: 13px;
	color: rgba(120, 120, 120, 0.9);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.xn-gnp-pl-panel {
		background: rgba(255, 255, 255, 0.96);
	}
	.xn-gnp-pl-head {
		background: rgba(248, 249, 251, 0.98);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}
/* 修罗主题底栏：54px 为 inner 最小高度；+10px 再上移一点。border-box 下勿把 padding 重复加进该数 */
body.kehua-mobile-tabbar-on {
	--xn-gnp-above-tabbar: calc(64px + env(safe-area-inset-bottom, 0px));
}
/* 电脑端：底栏略增高（--xn-gnp-height 仍由 JS 写入，此处仅加量；手机端不走此段） */
@media (min-width: 769px) {
	body.xn-gnp-pad {
		padding-bottom: calc(var(--xn-gnp-height, 70px) + 18px);
	}
	.xn-gnp-inner {
		min-height: calc(var(--xn-gnp-height, 70px) + 18px);
		padding: 12px 16px;
	}
	.xn-gnp-center {
		gap: 8px;
	}
	/* 加大主控键热区（图标仍 20px 居中），减少误点不响应 */
	.xn-gnp-prev,
	.xn-gnp-next {
		width: 40px;
		height: 40px;
		min-width: 40px;
		min-height: 40px;
		border-radius: 8px;
		touch-action: manipulation;
	}
	.xn-gnp-play {
		width: 48px;
		height: 48px;
		touch-action: manipulation;
	}
	.xn-gnp-play::after {
		border-width: 9px 0 9px 14px;
	}
	.xn-gnp.is-playing .xn-gnp-play::after {
		width: 12px;
		height: 16px;
	}
}
@keyframes xn-gnp-cover-spin {
	to {
		transform: rotate(360deg);
	}
}
/* 手机端：单行紧凑条（与桌面底栏样式隔离，仅小屏生效） */
@media (max-width: 768px) {
	/* 无底部导航时仍贴屏幕底；有修罗底栏时抬升到导航栏上方（高于 .kehua-mobile-tabbar z-index:90） */
	.xn-gnp {
		bottom: var(--xn-gnp-above-tabbar, 0px);
		font-size: 13px;
		border-top: 1px solid rgba(0, 0, 0, 0.06);
		background: rgba(255, 255, 255, 0.92);
		z-index: 100;
	}
	body.xn-gnp-pad:not(.kehua-mobile-tabbar-on) {
		padding-bottom: 56px !important;
	}
	body.kehua-mobile-tabbar-on.xn-gnp-pad {
		padding-bottom: 0 !important;
	}
	/* 与 style.css 中 .kehua-layout 底栏留白一致，再叠加播放器条高度，避免正文被挡 */
	body.kehua-mobile-tabbar-on.xn-gnp-pad .kehua-layout {
		padding-bottom: calc(70px + 54px + 66px + env(safe-area-inset-bottom, 0px)) !important;
	}
	/* 无 .kehua-layout 的页面（如部分个人中心） */
	body.kehua-mobile-tabbar-on.xn-gnp-pad:not(:has(.kehua-layout)) {
		padding-bottom: calc(60px + 54px + env(safe-area-inset-bottom, 0px)) !important;
	}
	.xn-gnp-inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, auto);
		align-items: center;
		gap: 10px;
		padding: 8px 12px;
		min-height: 50px;
	}
	.xn-gnp-info {
		grid-column: 1;
		justify-self: stretch;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		overflow: hidden;
		flex: unset;
		gap: 10px;
		z-index: auto;
	}
	.xn-gnp-cover {
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}
	.xn-gnp-cover-img {
		border-radius: 50%;
	}
	/* 仅小屏：播放中封面匀速旋转（暂停随 .is-playing 移除而停） */
	.xn-gnp.is-playing .xn-gnp-cover-img {
		animation: xn-gnp-cover-spin 14s linear infinite;
		transform-origin: 50% 50%;
	}
	@media (prefers-reduced-motion: reduce) {
		.xn-gnp.is-playing .xn-gnp-cover-img {
			animation: none;
		}
	}
	.xn-gnp-text {
		display: block;
		min-width: 0;
		max-width: 100%;
		/* basis 0% + min-width:0 才能压住长英文歌名，否则 flex 按内容最小宽度撑开 */
		flex: 1 1 0%;
		overflow: hidden;
	}
	.xn-gnp-line {
		display: block;
		width: 100%;
		max-width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		min-width: 0;
		font-weight: 600;
		font-size: 14px;
		line-height: 1.35;
		color: #3d4260;
	}
	.xn-gnp-title,
	.xn-gnp-artist {
		display: none !important;
	}
	/* 小屏保持原有三列 grid，不继承桌面的绝对居中（避免叠层、点按异常） */
	.xn-gnp-center {
		position: static;
		left: auto;
		top: auto;
		transform: none;
		grid-column: 2;
		justify-self: center;
		width: auto;
		max-width: none;
		min-width: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 0;
		z-index: auto;
		pointer-events: auto;
		box-sizing: border-box;
	}
	.xn-gnp-seek {
		display: none;
	}
	.xn-gnp-btns {
		gap: 12px;
		align-self: auto;
	}
	.xn-gnp-prev,
	.xn-gnp-next {
		display: none;
	}
	/* 与桌面同色；小屏去掉投影 */
	.xn-gnp-play {
		width: 40px;
		height: 40px;
		box-shadow: none;
	}
	.xn-gnp-tools {
		grid-column: 3;
		justify-self: end;
		flex: unset;
		min-width: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 4px;
		z-index: auto;
	}
	.xn-gnp-tools .xn-gnp-like,
	.xn-gnp-tools .xn-gnp-loop,
	.xn-gnp-tools .xn-gnp-vol-wrap {
		display: none;
	}
	.xn-gnp-tools .xn-gnp-pl-wrap {
		display: block;
	}
	/* 小屏：底栏上会叠在正文上，须更高实色 + 强模糊，避免「全透明」难读（部分 WebView 虚化弱） */
	.xn-gnp-pl-panel {
		width: min(94vw, 320px);
		max-height: min(52vh, 400px);
		right: 0;
		left: auto;
		background: rgba(250, 251, 253, 0.94);
		border: 1px solid rgba(255, 255, 255, 0.92);
		box-shadow:
			0 8px 36px rgba(15, 23, 42, 0.2),
			0 0 0 1px rgba(255, 255, 255, 0.75) inset;
		backdrop-filter: blur(48px) saturate(1.85);
		-webkit-backdrop-filter: blur(48px) saturate(1.85);
		transform: translateZ(0);
		-webkit-transform: translateZ(0);
	}
	.xn-gnp-pl-head {
		background: rgba(255, 255, 255, 0.88);
		border-bottom: 1px solid rgba(0, 0, 0, 0.07);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
	}
	.xn-gnp-pl-title {
		color: #121418;
		font-weight: 600;
	}
	.xn-gnp-pl-idx {
		color: #5a6169;
	}
	.xn-gnp-pl-item:hover {
		background-color: rgba(0, 0, 0, 0.06);
	}
	.xn-gnp-pl-item.is-current:hover {
		background-color: rgba(236, 65, 65, 0.24);
		box-shadow: 0 0 0 1px rgba(236, 65, 65, 0.32);
	}
}