/*
Theme Name: Xiaoyuanshu
Theme URI: https://www.Xiaoyuanshu.com
Author: Xiaoyuanshu Mirror
Author URI: https://www.Xiaoyuanshu.com
Description: Ai 提示词 站点
Version: 1.9.96
Requires at least: 5.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Xiaoyuanshu
Tags: custom-menu, custom-logo, featured-images, translation-ready
*/

/*
 * 主题级补充样式（少量，不影响原镜像 CSS 的渲染结果）：
 * 仅用于 page.php 通用页面内容区，原站页面结构不使用以下类名。
 */
.xs-page-shell {
	padding: 90px 16px 90px;
}

@media (max-width: 696px) {
	.xs-page-shell {
		padding: 96px 8px 40px;
	}
}

.xs-page-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 15px 20px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

/*
 * 频道栏（顶部 tab）：原站 tab 之间零间距，选中/悬停的胶囊背景会直接贴住相邻文字。
 * 每个 tab 加 3px 水平外边距，相邻胶囊之间留出 6px 间隙（首页与网址导航页共用）。
 */
#channel-container .channel,
.xs-sites-mobile-cats .channel {
	margin: 0 3px;
}

/*
 * 顶栏背景滚动联动：页面在顶部时背景隐藏（透明、无磨砂），
 * 下滑后恢复原站的磨砂半透明背景。xs-scrolled 由 theme.js 按滚动位置切换。
 */
header.mask-paper[data-v-e9e3ec64] {
	background: transparent;
	-webkit-backdrop-filter: blur(0);
	backdrop-filter: blur(0);
	transition: background 0.25s, -webkit-backdrop-filter 0.25s, backdrop-filter 0.25s;
}

header.mask-paper.xs-scrolled[data-v-e9e3ec64] {
	background: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: blur(20px) saturate(1.8);
	backdrop-filter: blur(20px) saturate(1.8);
}

html[dark] header.mask-paper.xs-scrolled[data-v-e9e3ec64] {
	background: rgba(10, 10, 10, 0.72);
}
/* 顶栏 Logo 深浅模式切换：默认显示浅色 Logo，深色模式（后台可单独上传）切换显示 */
header img.xs-logo-dark[data-v-e9e3ec64] { display: none; }
html[dark] header img.xs-logo-light[data-v-e9e3ec64] { display: none; }
html[dark] header img.xs-logo-dark[data-v-e9e3ec64] { display: block; }

/* 面包屑导航（内容卡片上方） */
.xs-breadcrumb {
	max-width: 1200px;
	margin: 0 auto 14px;
	padding: 0 4px;
	font-size: 14px;
	line-height: 1.5;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	color: rgba(51, 51, 51, 0.6);
}

.xs-breadcrumb a {
	color: rgba(51, 51, 51, 0.6);
	text-decoration: none;
	transition: color 0.15s;
}

.xs-breadcrumb a:hover {
	color: var(--color-primary-label, #333);
}

.xs-breadcrumb .xs-crumb-current {
	color: var(--color-primary-label, #333);
}

.xs-breadcrumb .xs-crumb-sep {
	color: rgba(51, 51, 51, 0.35);
}

/* 自定义页面（无卡片容器）面包屑：与标题正文左对齐，去掉水平居中边距与左右内边距 */
.xs-page-plain .xs-breadcrumb {
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

/* 详情页相关内容 */
.xs-related {
	max-width: 1200px;
	margin: 36px auto 0;
}

.xs-related-title {
	margin: 0 0 18px;
	font-size: 20px;
	font-weight: 600;
	color: var(--color-primary-label, #333);
}

.xs-related-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
}

.xs-related-card {
	display: block;
	color: inherit;
	text-decoration: none;
}

.xs-related-cover {
	aspect-ratio: 3 / 4;
	border-radius: 12px;
	overflow: hidden;
	background: var(--color-active-background, #f5f5f5);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(51, 51, 51, 0.25);
}

.xs-related-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.xs-related-cover svg {
	width: 40px;
	height: 40px;
}

.xs-related-card:hover img {
	transform: scale(1.05);
}

.xs-related-name {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--color-primary-label, #333);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.xs-related-author {
	margin-top: 6px;
	font-size: 12px;
	color: var(--color-tertiary-label, rgba(51, 51, 51, 0.6));
}

@media (max-width: 1024px) {
	.xs-related-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 768px) {
	.xs-related-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* 详情页 AI 提示词容器（评论区上方） */
.xs-ai-prompt {
	margin: 10px 0 10px;
	border: 1px solid rgba(51, 51, 51, 0.1);
	border-radius: 12px;
	background: #f8f8f8;
	overflow: hidden;
}

.xs-ai-prompt-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 16px;
	border-bottom: 1px solid rgba(51, 51, 51, 0.08);
}

.xs-ai-prompt-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-primary-label, #333);
}

.xs-ai-copy {
	border: none;
	background: var(--xs-primary, #ff2442);
	color: #fff;
	font-size: 13px;
	line-height: 1;
	padding: 7px 16px;
	border-radius: 16px;
	cursor: pointer;
	transition: background 0.15s;
}

.xs-ai-copy:hover {
	background: var(--xs-primary-dark, #e11f3b);
}

.xs-ai-copy.xs-copied {
	background: #06ae56;
}

.xs-ai-prompt-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.xs-ai-toggle {
	border: none;
	background: transparent;
	color: rgba(51, 51, 51, 0.6);
	font-size: 13px;
	line-height: 1;
	padding: 7px 2px;
	cursor: pointer;
	transition: color 0.15s;
}

.xs-ai-toggle:hover {
	color: #333;
}

/* 默认收起：较低高度 + 底部渐隐提示可展开 */
.xs-ai-prompt-body {
	height: 96px;
	overflow-y: hidden;
	position: relative;
	padding: 12px 16px;
	font-size: 13px;
	line-height: 1.7;
	color: rgba(51, 51, 51, 0.8);
	white-space: pre-wrap;
	word-break: break-word;
	transition: height 0.25s ease;
}

.xs-ai-prompt:not(.xs-expanded) .xs-ai-prompt-body::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 40px;
	background: linear-gradient(180deg, rgba(248, 248, 248, 0), #f8f8f8);
	pointer-events: none;
}

.xs-ai-prompt.xs-expanded .xs-ai-prompt-body {
	height: auto;
}

@media (prefers-reduced-motion: reduce) {
	.xs-ai-prompt-body {
		transition: none;
	}
}

/* 详情页自定义按钮（AI 提示词容器下方，后台文章编辑页可配置） */
.xs-custom-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 12px 0 4px;
}

.xs-custom-button {
	display: inline-flex;
	align-items: center;
	padding: 8px 18px;
	border-radius: 18px;
	background: var(--xs-primary, #ff2442);
	color: #fff;
	font-size: 13px;
	line-height: 1;
	text-decoration: none;
	transition: background 0.15s;
}

.xs-custom-button:hover {
	background: var(--xs-primary-dark, #e11f3b);
	color: #fff;
}

/*
 * 少量作品靠左排列：原站 static-layout 为居中（justify-content:center），
 * 作品少于列数时卡片悬在中间显得突兀，这里改为从左侧起排。
 */
.feeds-container.static-layout[data-v-76b7224f] {
	justify-content: flex-start;
}

/*
 * 卡片点赞态：已赞时图标与计数变小红书红（原站 like-active 为常态类，点赞态用 xs-liked 区分）。
 * 作用于 feed 卡片与笔记详情页（like-wrapper 结构通用）。
 */
.like-wrapper.xs-liked .like-icon {
	color: var(--xs-primary, #ff2442);
}

.like-wrapper.xs-liked .count {
	color: var(--xs-primary, #ff2442);
}

/*
 * 顶部搜索框：输入内容后搜索图标点亮（灰圆底变小红书红，放大镜保持白色）。
 * 图标为内联 SVG（原 img 引用无法被外部 CSS 着色）。
 */
.input-box.xs-has-value .search-icon .xs-search-bg {
	fill: var(--xs-primary, #ff2442);
	fill-opacity: 1;
}

/*
 * 笔记详情页（single.php）：小红书 PC 端笔记详情风格。
 * 白卡片容器复用 .xs-page-content，内部左图右文两栏；
 * 无封面图时信息栏独占整卡。
 */
.xs-note-detail {
	display: flex;
	align-items: stretch;
	padding: 0;
	overflow: hidden;
	min-height: 560px;
	max-width: 1200px;
}

.xs-note-detail .xs-note-media {
	flex: 0 0 55%;
	background: #0f0f0f;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 760px;
	overflow: hidden;
}

.xs-note-detail .xs-note-media img {
	display: block;
	width: auto;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
}

/* 未设置图片时的占位图 */
.xs-note-detail .xs-note-media.xs-note-placeholder {
	background: var(--color-active-background, #f5f5f5);
	color: rgba(51, 51, 51, 0.25);
}

.xs-note-detail .xs-note-media.xs-note-placeholder svg {
	width: 96px;
	height: 96px;
}

.xs-note-detail .xs-note-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	padding: 15px 20px;
	height: 760px;
	overflow: hidden;
}

/* 评论区占满右栏剩余高度，内部滚动（与左图等高，评论多时不再撑长卡片） */
/* 评论区固定占满右栏剩余高度：标题与输入条常驻，仅评论列表内部滚动 */
.xs-note-detail .xs-note-info .xs-comments {
	flex: 1 1 0;
	min-height: 160px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	overscroll-behavior: contain;
}

.xs-note-detail .xs-note-info .xs-comments .xs-comments-title,
.xs-note-detail .xs-note-info .xs-comments .xs-comments-end,
.xs-note-detail .xs-note-info .xs-comments .xs-comment-composer {
	flex: none;
}

/* 评论输入条固定在评论区底部（评论少/为空时也不随内容上浮） */
.xs-note-detail .xs-note-info .xs-comments .xs-comment-composer {
	margin-top: auto;
}

.xs-note-detail .xs-note-info .xs-comments .xs-comment-list {
	flex: 1 1 0;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.xs-note-detail .xs-note-info .xs-comment-list::-webkit-scrollbar {
	width: 6px;
}

.xs-note-detail .xs-note-info .xs-comment-list::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.15);
	border-radius: 3px;
}

.xs-note-detail .xs-note-author {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
}

.xs-note-detail .xs-note-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: block;
}

.xs-note-detail .xs-note-author-name {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--color-primary-label, #333);
	text-decoration: none;
}

.xs-note-detail .xs-note-author-name:hover {
	color: var(--xs-primary, #ff2442);
}

.xs-note-detail .xs-note-date {
	display: block;
	font-size: 12px;
	line-height: 1.4;
	color: var(--color-tertiary-label, rgba(51, 51, 51, 0.6));
}

.xs-note-detail .xs-note-title {
	margin: 10px 0 10px;
	font-size: 20px;
	line-height: 1.4;
	font-weight: 600;
	color: var(--color-primary-label, #333);
}

.xs-note-detail .xs-note-body {
	flex: 0 1 auto;
	min-height: 0;
	overflow-y: auto;
	font-size: 15px;
	line-height: 1.7;
	color: var(--color-primary-label, #333);
	overflow-wrap: break-word;
}

/* 隐藏详情页大标题时，补回标题原有的 10px 上间距，避免正文紧贴作者分隔线 */
.xs-note-detail .xs-note-body.xs-body-no-title {
	margin-top: 10px;
}

/* 正文区细滚动条（高度自适应内容，超长时内部滚动） */
.xs-note-detail .xs-note-body::-webkit-scrollbar {
	width: 6px;
}

.xs-note-detail .xs-note-body::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.15);
	border-radius: 3px;
}

/* 正文段落间距收紧（覆盖全局 p 的默认 margin） */
.xs-note-detail .xs-note-body p {
	margin: 0 0 4px;
}

.xs-note-detail .xs-note-body p:last-child {
	margin-bottom: 0;
}

.xs-note-detail .xs-note-body img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

/* 详情页图集轮播（后台图片集配置多图时） */
.xs-note-detail .xs-note-media.xs-note-gallery {
	background: #0f0f0f;
	padding: 0;
	align-items: center;
	justify-content: center;
}

.xs-note-detail .xs-note-gallery .xs-gallery-stage {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 提权覆盖单图 .xs-note-detail .xs-note-media img 的 display/width 规则 */
.xs-note-detail .xs-note-gallery .xs-gallery-slide {
	display: none;
	width: auto;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
}

.xs-note-detail .xs-note-gallery .xs-gallery-slide.xs-current {
	display: block;
	margin: 0 auto;
}

/* 图集内视频帧：铺满舞台黑底居中，浏览器原生控件播放 */
.xs-note-detail .xs-note-gallery .xs-gallery-slide.xs-gallery-video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000;
}

.xs-gal-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	color: #333;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.xs-gal-nav:hover {
	background: #fff;
}

.xs-gal-prev {
	left: 16px;
}

.xs-gal-next {
	right: 16px;
}

.xs-gal-badge {
	position: absolute;
	right: 16px;
	bottom: 14px;
	padding: 4px 12px;
	border-radius: 14px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 12px;
	line-height: 1;
}

@media (max-width: 768px) {
	.xs-note-detail {
		flex-direction: column;
	}

	.xs-note-detail .xs-note-media {
		flex: none;
		height: 480px;
	}

	.xs-note-detail .xs-note-info {
		padding: 24px 20px;
		height: auto;
		overflow: visible;
	}

	.xs-note-detail .xs-note-info .xs-comments {
		display: block;
		overflow: visible;
	}

	.xs-note-detail .xs-note-info .xs-comment-list {
		overflow: visible;
	}

	/* 页面版详情（single）：评论区解除内部滚动，随页面一起滚动；
	 * 输入条 sticky 吸附视口底边、无底部间距，滚动到评论末尾时随内容归位（与弹窗一致）。
	 * 用 .xs-page-shell 前缀限定页面版，不影响弹窗内克隆的同结构节点。 */
	.xs-page-shell .xs-note-detail {
		/* 桌面端卡片的 overflow:hidden 会把 sticky 的滚动容器变成卡片自身，
		 * 输入条因此永远无法吸附视口底边，移动端必须解除 */
		overflow: visible;
	}

	.xs-page-shell .xs-note-detail .xs-note-media {
		/* 卡片解除 overflow:hidden 后，顶部圆角改由媒体区自己裁切 */
		border-radius: 16px 16px 0 0;
	}

	.xs-page-shell .xs-note-detail .xs-note-info {
		flex: none;
		padding-bottom: 0;
	}

	.xs-page-shell .xs-note-detail .xs-note-info .xs-comments {
		/* 桌面端 flex:1 1 0（基准 0）在自适应高度的卡片里会把评论区塌缩成
		 * min-height:160px 的盒子，评论溢出卡片压到"相关内容"上；
		 * 移动端改回按内容高度撑开 */
		flex: none;
		min-height: 0;
		overflow: visible;
	}

	.xs-page-shell .xs-note-detail .xs-note-info .xs-comment-list {
		flex: none;
		height: auto;
		max-height: none;
		overflow: visible;
	}

	.xs-page-shell .xs-note-detail .xs-note-info .xs-comment-composer {
		position: sticky;
		bottom: 0;
		z-index: 5;
		margin-right: -20px;
		margin-left: -20px;
		padding-right: 20px;
		padding-left: 20px;
		padding-bottom: 10px;
		background: #fff;
	}

	html[dark] .xs-page-shell .xs-note-detail .xs-note-info .xs-comment-composer {
		background: #262626;
	}
}

/*
 * 评论（comments.php，single 详情页内嵌）：小红书评论样式。
 * 列表 = 头像 + 昵称 + 内容 + 时间/回复；底部胶囊输入条 + 游客资料弹窗。
 */
.xs-comments {
	margin-top: 28px;
}

.xs-comments .xs-comments-title {
	font-size: 13px;
	color: var(--color-tertiary-label, rgba(51, 51, 51, 0.6));
	margin-bottom: 16px;
}

.xs-comments .xs-comment-list,
.xs-comments .xs-comment-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.xs-comments .xs-comment-list ul.children {
	margin-left: 44px;
}

.xs-comments .xs-comment-item {
	padding: 12px 0;
}

.xs-comments .xs-comment-row {
	display: flex;
	gap: 12px;
}

.xs-comments .xs-comment-avatar img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: block;
	background: var(--color-active-background, #f5f5f5);
}

.xs-comments .xs-comment-main {
	flex: 1;
	min-width: 0;
}

.xs-comments .xs-comment-author {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-primary-label, #333);
	line-height: 1.5;
	overflow-wrap: break-word;
}

.xs-comments .xs-comment-text {
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-primary-label, #333);
	overflow-wrap: break-word;
}

.xs-comments .xs-comment-text p {
	margin: 2px 0;
}

.xs-comments .xs-comment-meta {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 6px;
	font-size: 12px;
	color: var(--color-tertiary-label, rgba(51, 51, 51, 0.45));
}

.xs-comments .xs-comment-reply a,
.xs-comments .xs-comment-reply {
	font-size: 12px;
	color: var(--color-tertiary-label, rgba(51, 51, 51, 0.45));
	text-decoration: none;
	cursor: pointer;
}

.xs-comments .xs-comment-reply a:hover {
	color: var(--xs-primary, #ff2442);
}

.xs-comments .xs-comments-end {
	text-align: center;
	font-size: 12px;
	color: var(--color-tertiary-label, rgba(51, 51, 51, 0.45));
	margin: 18px 0 8px;
}

.xs-comments .xs-comment-composer {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
}

.xs-comments .xs-composer-avatar {
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--color-primary-label, #333);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	cursor: pointer;
}

.xs-comments .xs-composer-avatar img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	display: block;
}

.xs-comments .xs-composer-dash {
	width: 14px;
	height: 2px;
	border-radius: 1px;
	background: #fff;
	display: block;
}

.xs-comments .xs-composer-form {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 14px;
}

/*
 * 胶囊输入容器：头像与发送图标内嵌其中。
 * 背景圆角在容器上，textarea 透明，头像/按钮绝对定位嵌入；点赞显示在容器右侧外部。
 */
.xs-comments .xs-composer-inputwrap {
	flex: 1;
	min-width: 0;
	position: relative;
	display: flex;
	align-items: center;
	background: var(--color-active-background, #f5f5f5);
	border-radius: 22px;
	padding: 5px 52px 5px 44px;
}

.xs-comments .xs-replying {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--color-tertiary-label, rgba(51, 51, 51, 0.6));
	margin-bottom: 6px;
}

/* display:flex 会覆盖 [hidden] 的 UA display:none，显式恢复隐藏语义 */
.xs-comments .xs-replying[hidden] {
	display: none;
}

.xs-comments .xs-replying button {
	border: 0;
	background: none;
	padding: 0;
	font-size: 12px;
	color: var(--xs-primary, #ff2442);
	cursor: pointer;
}

.xs-comments #xs-comment-content {
	flex: 1;
	min-width: 0;
	box-sizing: border-box;
	border: 0;
	outline: none;
	resize: none;
	background: transparent;
	padding: 6px 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-primary-label, #333);
	font-family: inherit;
	max-height: 96px;
}

.xs-comments #xs-comment-content::placeholder {
	color: var(--color-tertiary-label, rgba(51, 51, 51, 0.45));
}

/* 内嵌头像：点击弹资料弹窗 */
.xs-comments .xs-composer-avatar {
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--color-primary-label, #333);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	cursor: pointer;
	z-index: 2;
}

.xs-comments .xs-composer-avatar img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	display: block;
}

.xs-comments .xs-composer-dash {
	width: 12px;
	height: 2px;
	border-radius: 1px;
	background: #fff;
	display: block;
}

/* 内嵌发送按钮：空内容灰圆、有内容小红书红 */
.xs-comments .xs-composer-send {
	position: absolute;
	right: 7px;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 0;
	padding: 0;
	background: rgba(0, 0, 0, 0.14);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.xs-comments .xs-composer-send:hover {
	background: #e6203b;
}

.xs-comments .xs-composer-inputwrap textarea:not(:placeholder-shown) ~ .xs-composer-send {
	background: var(--xs-primary, #ff2442);
}

/* 点赞：位于输入框右侧外部（与输入框同排） */
.xs-comments .xs-composer-form > .like-wrapper {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	cursor: pointer;
	color: var(--color-tertiary-label, rgba(51, 51, 51, 0.6));
	user-select: none;
}

.xs-comments .xs-composer-form > .like-wrapper .like-icon {
	width: 26px;
	height: 26px;
}

.xs-comments .xs-composer-form > .like-wrapper .count {
	font-size: 14px;
}

/* 游客补充资料弹窗 */
.xs-modal-mask {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 2100;
	display: flex;
	align-items: center;
	justify-content: center;
}

.xs-modal-mask[hidden] {
	display: none;
}

.xs-modal {
	width: 360px;
	max-width: calc(100vw - 48px);
	background: var(--color-background, #fff);
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
}

.xs-modal .xs-modal-title {
	font-size: 17px;
	font-weight: 600;
	color: var(--color-primary-label, #333);
}

.xs-modal .xs-modal-desc {
	font-size: 12px;
	color: var(--color-tertiary-label, rgba(51, 51, 51, 0.6));
	margin: 6px 0 16px;
}

.xs-modal .xs-modal-field {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.xs-modal .xs-modal-field span {
	flex: none;
	width: 34px;
	font-size: 13px;
	color: var(--color-secondary-label, rgba(51, 51, 51, 0.8));
}

.xs-modal .xs-modal-field input {
	flex: 1;
	min-width: 0;
	box-sizing: border-box;
	border: 1px solid var(--color-border, rgba(0, 0, 0, 0.1));
	border-radius: 8px;
	padding: 9px 12px;
	font-size: 14px;
	color: var(--color-primary-label, #333);
	background: var(--color-background, #fff);
	outline: none;
}

.xs-modal .xs-modal-field input:focus {
	border-color: var(--xs-primary, #ff2442);
}

.xs-modal .xs-modal-error {
	font-size: 12px;
	color: var(--xs-primary, #ff2442);
	margin-bottom: 10px;
}

.xs-modal .xs-modal-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 6px;
}

.xs-modal .xs-modal-save {
	border: 0;
	background: var(--xs-primary, #ff2442);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	border-radius: 18px;
	padding: 8px 26px;
	cursor: pointer;
}

.xs-modal .xs-modal-save:hover {
	background: #e6203b;
}

.xs-page-title {
	font-size: 24px;
	line-height: 1.4;
	margin: 0 0 20px;
	color: #333;
}

/* 自定义页面无卡片容器时的内间距（与 .xs-page-content 卡片一致） */
.xs-page-plain {
	padding: 15px 20px;
}

/* 自定义页面标题下方元信息条（作者 / 时间 / 浏览 / 分类，斜杠分隔） */
.xs-page-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: -12px 0 18px;
	font-size: 13px;
	line-height: 1.6;
	color: rgba(51, 51, 51, 0.6);
}

.xs-page-meta .xs-page-meta-item + .xs-page-meta-item::before {
	content: '/';
	margin: 0 10px;
	color: rgba(51, 51, 51, 0.35);
}

.xs-page-meta a {
	color: var(--xs-primary, #ff2442);
	text-decoration: none;
}

.xs-page-meta a:hover {
	opacity: 0.8;
}

.xs-page-body {
	font-size: 15px;
	line-height: 1.8;
	color: #333;
	word-break: break-word;
}

.xs-page-body img {
	max-width: 100%;
	height: auto;
}

.xs-page-body a {
	color: var(--xs-primary, #ff2442);
}

/* 侧边栏小部件区（仅在挂载了小部件时出现，默认无输出，保持与原站一致） */
.xs-side-widgets {
	padding: 16px;
}

.xs-side-widget-title {
	font-size: 14px;
	margin: 0 0 8px;
	color: #333;
}

/*
 * 封面去模糊覆盖：
 * 原站对未登录态的封面施加 backdrop-filter: blur(42.5px)（--0fb5f982 变量），
 * 图片加载完成后由 SPA 添加 .ld 类解除。静态化后 SPA 不会运行，
 * 这里统一解除封面模糊（不影响 .mask:hover::after 的悬停遮罩）。
 */
.note-item .cover::before {
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/*
 * “更多”下拉菜单（复刻原站 SPA 弹出层，样式走原站 CSS 变量，深浅色自适应）：
 * 结构与交互见 sidebar.php / assets/js/theme.js。
 * .multistage-toggle / .toggle-item 复用原站分段控件类（样式已在 index.5de04af2.css 内置），
 * 这里仅补充容器定位、菜单项与开关的兜底规则。
 */
.xs-more-menu {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 0;
	width: 216px;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	padding: 8px 0;
	background: var(--bg0-lighter, #fff);
	border-radius: 12px;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 8px 20px rgba(0, 0, 0, 0.12);
	z-index: 1200;
	color: var(--color-primary-label);
	font-size: 16px;
}

.xs-more-menu[hidden] {
	display: none !important;
}

.xs-menu-item,
.xs-more-menu a.xs-menu-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 40px;
	padding: 0 16px;
	font-size: 16px;
	font-weight: 500;
	line-height: 40px;
	color: var(--color-primary-label);
	text-decoration: none;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	white-space: nowrap;
}

.xs-menu-item:hover {
	background: var(--color-active-background);
}

.xs-menu-item .xs-menu-arrow {
	display: flex;
	align-items: center;
	color: var(--color-quaternary-label);
}

.xs-menu-divider {
	height: 1px;
	margin: 8px 16px;
	background: var(--color-border);
}

.xs-menu-label {
	padding: 4px 16px;
	font-size: 12px;
	line-height: 20px;
	color: var(--color-tertiary-label);
}

.xs-menu-darkmode {
	height: 44px;
	line-height: normal;
}

/* 深色模式三态开关：原站 .multistage-toggle 样式兜底（原规则带 scopeId 选择器）。
 * 用类选择器而非 #xs-theme-toggle：移动端汉堡面板克隆菜单时会移除 id 防重复，id 选择器会漏掉克隆实例 */
.multistage-toggle {
	position: relative;
	display: flex;
	padding: 2px;
	border-radius: 999px;
	cursor: pointer;
	background: var(--color-active-background);
	border: 0;
}

.multistage-toggle .toggle-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--color-tertiary-label);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.multistage-toggle .toggle-item:hover {
	color: var(--color-primary-label);
}

.multistage-toggle .toggle-item.active {
	background: var(--elevation-low-background, #fff);
	box-shadow: var(--elevation-low-shadow, 0 1px 4px rgba(0, 0, 0, 0.1));
	color: var(--color-primary-label);
}

.multistage-toggle .toggle-item .icon-wrapper {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

/*
 * “查看更多”：feed 底部追加加载按钮（AJAX 追加下一页卡片，见 functions.php / theme.js）。
 */
.xs-load-more-wrap {
	display: flex;
	justify-content: center;
	padding: 24px 0 48px;
}

.xs-load-more {
	height: 40px;
	padding: 0 28px;
	border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
	border-radius: 999px;
	background: var(--bg0-lighter, #fff);
	color: var(--color-primary-label);
	font-size: 14px;
	font-weight: 600;
	line-height: 38px;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
	-webkit-user-select: none;
	user-select: none;
}

.xs-load-more:hover {
	color: var(--xs-primary, #ff2442);
	border-color: var(--xs-primary, #ff2442);
}

.xs-load-more.xs-loading {
	opacity: 0.6;
	pointer-events: none;
}

/*
 * 侧边导航图标统一 #333（--color-primary-label），与原站一致。
 * 完整 SVG 粘贴项不带原站 scope 属性、命中不了 .icon-wrapper[data-v-73e69664]，
 * 这里显式补齐，保证 symbol 名与完整 SVG 两种输入方式颜色一致。
 */
.channel-list-content .icon-wrapper {
	color: var(--color-primary-label);
}

/*
 * pjax 页面切换入场动画：复用原站 fadeIn keyframes（index.5de04af2.css 已定义），
 * 内容替换完成后短暂淡入上浮，接近原站 SPA 的页面过渡。
 */
.main-content.xs-page-in {
	animation: fadeIn-2a210922 0.28s ease both;
}

@media (prefers-reduced-motion: reduce) {
	.main-content.xs-page-in {
		animation: none;
	}
}

/*
 * feed 卡片逐个入场动画：错开淡入 + 内层轻微上浮。
 * 卡片外层的 inline transform 用于瀑布流定位，不可被动画覆盖，
 * 故位移动画只作用于内层 div，错开延迟通过 --xs-d 变量由 JS 注入。
 */
@keyframes xsCardRise {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.note-item.xs-card-in > div {
	animation: xsCardRise 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
	animation-delay: var(--xs-d, 0ms);
}

@media (prefers-reduced-motion: reduce) {
	.note-item.xs-card-in > div {
		animation: none;
	}
}

/*
 * 详情弹窗（小红书式）：列表页点卡片弹出笔记详情，URL 同步为详情页地址。
 * 遮罩 + 居中白卡，卡内滚动；弹窗内的详情卡去掉整页卡片的留白与阴影。
 */
#xs-note-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}

#xs-note-modal[hidden] {
	display: none;
}

.xs-note-modal-mask {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	animation: xsModalFade 0.2s ease both;
}

.xs-note-modal-card {
	position: relative;
	z-index: 1;
	width: min(1100px, 94vw);
	max-height: 94vh;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
}

/* 无来源位置时的入场（popstate 前进补开弹窗）：缩放淡入；有来源时走 FLIP，不叠加 */
.xs-note-modal-card.xs-pop {
	animation: xsModalCard 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.xs-note-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.15s;
}

.xs-note-modal-close:hover {
	background: rgba(0, 0, 0, 0.6);
}

.xs-note-modal-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* 弹窗内详情卡：满宽无留白，图片区随视口收缩 */
#xs-note-modal .xs-page-content {
	max-width: none;
	margin: 0;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
}

#xs-note-modal .xs-note-detail {
	min-height: 0;
	max-width: none;
}

#xs-note-modal .xs-note-media {
	height: min(800px, 86vh);
}

/* 弹窗内右栏与弹窗图片区等高，评论区同样内部滚动 */
#xs-note-modal .xs-note-info {
	height: min(800px, 86vh);
}

/* 弹窗加载骨架：左侧直接展示被点击的封面图（黑底与图集加载后一致，避免切换闪变），右侧骨架条 shimmer（随卡片 FLIP 弹出） */
.xs-note-skeleton {
	display: flex;
	align-items: stretch;
	height: min(800px, 86vh);
	background: #fff;
	overflow: hidden;
}

.xs-note-skeleton .xsk-media {
	flex: 0 0 55%;
	background: #0f0f0f;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.xs-note-skeleton .xsk-media img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.xs-note-skeleton .xsk-info {
	flex: 1;
	min-width: 0;
	padding: 24px 20px;
	overflow: hidden;
}

.xs-note-skeleton .xsk-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 26px;
}

.xs-note-skeleton .xsk-row .xsk-line {
	margin-bottom: 0;
}

.xs-note-skeleton .xsk-dot,
.xs-note-skeleton .xsk-line {
	position: relative;
	display: block;
	background: rgba(0, 0, 0, 0.05);
	border-radius: 6px;
	overflow: hidden;
}

.xs-note-skeleton .xsk-dot {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex: none;
}

.xs-note-skeleton .xsk-line {
	height: 15px;
	margin-bottom: 16px;
}

.xs-note-skeleton .xsk-dot::after,
.xs-note-skeleton .xsk-line::after {
	content: '';
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
	animation: xsShimmer 1.1s ease-in-out infinite;
}

@keyframes xsShimmer {
	to { transform: translateX(100%); }
}

html[dark] .xs-note-skeleton {
	background: #262626;
}

html[dark] .xs-note-skeleton .xsk-media {
	background: #0f0f0f;
}

html[dark] .xs-note-skeleton .xsk-dot,
html[dark] .xs-note-skeleton .xsk-line {
	background: rgba(255, 255, 255, 0.08);
}

html[dark] .xs-note-skeleton .xsk-dot::after,
html[dark] .xs-note-skeleton .xsk-line::after {
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
}

/* 弹窗打开时锁定背景滚动 */
body.xs-modal-open {
	overflow: hidden;
}

html[dark] .xs-note-modal-card {
	background: #262626;
}

@media (max-width: 768px) {
	.xs-note-modal-card {
		width: 100vw;
		height: 100vh;
		max-height: none;
		border-radius: 0;
	}

	#xs-note-modal .xs-note-media {
			height: min(480px, 52vh);
		}

	/* 移动端纵向堆叠：媒体在上、信息在下；弹窗 body 整体滚动（图片/正文/评论一起滑），
	 * 评论输入条 sticky 吸附弹窗底边、无底部间距，滚动到评论末尾时随内容归位 */
	.xs-note-modal-card .xs-note-detail {
		flex-direction: column;
		height: auto;
		min-height: 100%;
		overflow: visible;
	}

	.xs-note-modal-card .xs-note-detail .xs-note-media {
		flex: none;
		width: 100%;
	}

	.xs-note-modal-card .xs-note-detail .xs-note-info {
		flex: 1;
		height: auto;
		min-height: 0;
		max-height: none;
		overflow: visible;
		padding-bottom: 0;
	}

	/* 解除桌面端评论区内部滚动，改由弹窗 body 统一滚动 */
	.xs-note-modal-card .xs-note-detail .xs-note-info .xs-comments {
		flex: 1 1 auto;
		min-height: 0;
		overflow: visible;
	}

	.xs-note-modal-card .xs-note-detail .xs-note-info .xs-comment-list {
		flex: none;
		height: auto;
		max-height: none;
		overflow: visible;
	}

	/* 输入条贴底吸附：负外边距抵消 info 左右内边距使横贯全宽，背景遮挡下方滚动内容 */
	.xs-note-modal-card .xs-note-detail .xs-note-info .xs-comment-composer {
		position: sticky;
		bottom: 0;
		z-index: 5;
		margin-right: -20px;
		margin-left: -20px;
		padding-right: 20px;
		padding-left: 20px;
		padding-bottom: 10px;
		background: #fff;
	}

	html[dark] .xs-note-modal-card .xs-note-detail .xs-note-info .xs-comment-composer {
		background: #262626;
	}

	.xs-note-skeleton {
		flex-direction: column;
		height: auto;
		min-height: 62vh;
	}

	.xs-note-skeleton .xsk-media {
		flex: none;
		height: min(480px, 52vh);
	}
	}

@keyframes xsModalFade {
	from { opacity: 0; }
}

@keyframes xsModalCard {
	/* 小红书式入场：轻微放大 + 淡入，无位移 */
	from { opacity: 0; transform: scale(0.92); }
}

/* 关闭：缩小淡出，动画结束由 JS 隐藏 */
#xs-note-modal.xs-closing .xs-note-modal-mask {
	animation: xsModalFadeOut 0.2s ease both;
}

#xs-note-modal.xs-closing .xs-note-modal-card {
	animation: xsModalOut 0.2s cubic-bezier(0.4, 0, 1, 1) both;
}

/* 内容填充不做淡入：骨架屏与首帧图片地址/几何完全一致，直换才能无缝无闪变 */

@keyframes xsModalFadeOut {
	to { opacity: 0; }
}

@keyframes xsModalOut {
	to { opacity: 0; transform: scale(0.95); }
}

@media (prefers-reduced-motion: reduce) {
	.xs-note-modal-mask,
	.xs-note-modal-card,
	.xs-note-modal-card.xs-pop,
	#xs-note-modal.xs-closing .xs-note-modal-mask,
	#xs-note-modal.xs-closing .xs-note-modal-card,
	.xs-note-skeleton .xsk-dot::after,
	.xs-note-skeleton .xsk-line::after {
		animation: none;
	}
}

/* 归档/分类无文章时的空状态（替代原站镜像静态兜底卡片） */
.xs-empty-state {
	padding: 120px 24px 160px;
	text-align: center;
}

.xs-empty-state-title {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 600;
	color: #333;
}

.xs-empty-state-desc {
	margin: 0;
	font-size: 14px;
	color: #999;
}

@media (prefers-color-scheme: dark) {
	.xs-empty-state-title {
		color: rgba(255, 255, 255, 0.85);
	}

	.xs-empty-state-desc {
		color: rgba(255, 255, 255, 0.45);
	}
}

/* 全局字体：HarmonyOS Sans（s1.hdslb.com regular.css，字体名 HarmonyOS_Regular）。
   镜像 CSS 在大量元素上写死 PingFang SC，需 !important 全量覆盖；
   swiper 图标字体声明在 ::after 伪元素上，不受影响。 */
body,
body * {
	font-family: 'HarmonyOS_Regular', 'PingFang SC', sans-serif !important;
}

/* 侧边导航菜单项（发现/发布页面等）：镜像原为 600，HarmonyOS Sans 下视觉过粗，降为常规 */
.channel-list .channel {
	font-weight: 400;
}

/* ===== 网址导航页（page-sites.php，参考 hao.uisdc.com：左侧分类 + 右侧分组；顶部搜索与页头共用） ===== */

/* 网址导航页外壳：覆盖通用 .xs-page-shell 的 90px 上下内边距，收紧为 72px */
.xs-page-shell.xs-sites-shell {
	padding-top: 72px;
	padding-bottom: 72px;
}

/* 窄屏专用横向分类条：宽屏隐藏（宽屏分类在左侧边栏"分类"模式切换显示）。
 * 双类名提高特异性：镜像 .channel-scroll-container[data-v-61702c16] 自带 display:flex，单类名压不过 */
.xs-sites-mobile-cats.channel-scroll-container {
	display: none;
}

/* 侧栏"菜单 / 分类"切换（Apple 分段控件风格：大胶囊容器 + 白色滑块） */
.xs-side-switch {
	display: flex;
	gap: 2px;
	margin: 0 0 10px;
	padding: 3px;
	background: rgba(120, 120, 128, 0.12);
	border-radius: 999px;
}

/* 全站常驻输出，非网址导航页由 JS/PHP 置 hidden 隐藏（display:flex 会压过 UA 的 hidden 规则） */
.xs-side-switch[hidden] {
	display: none;
}

.xs-side-switch-btn {
	flex: 1;
	padding: 7px 0;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: rgba(60, 60, 67, 0.6);
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.xs-side-switch-btn:hover {
	color: rgba(60, 60, 67, 0.85);
}

.xs-side-switch-btn.xs-current {
	background: #fff;
	color: #1d1d1f;
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}

/* 侧栏分类列表：切换到"分类"模式时显示 */
.xs-sites-side-cats {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.xs-sites-side-cats[hidden] {
	display: none;
}

/* 侧栏高度按内容收缩：原站给 .channel-list-content 写死 min-height: calc(100vh-68px-68px-16px-72px)
   （内容少时被撑到近整屏，底部留白；且与 ul.channel-list 的定高+overflow-y:scroll 叠加会产生 9px 空滚动）。
   这里覆盖为 0，让内容区真正 auto：分隔线紧贴列表末尾，内容不足时侧栏不再可滚，
   分类项多到超出屏高时 ul 仍可正常滚动。 */
.side-bar ul.channel-list > .channel-list-content[data-v-73e69664] {
	min-height: 0;
}

/* 内容区改 auto 收缩后，列表末尾的分隔线紧贴菜单/分类项、悬在空白区显得突兀，隐藏之 */
.side-bar ul.channel-list > .divider[data-v-39ecb380] {
	display: none;
}

/* 侧栏底部版权文案：原站 4 个 <p> 逐行块级显示，改为行内连成一段、自动换行 */
.side-bar .corp-info p {
	display: inline;
}

/* "关于我们"与下方版权块的间距：原站 20px 偏大，收小 */
.side-bar .about-us-block[data-v-083711ee] {
	margin-bottom: 2px;
}

/* "关于我们"菜单项（about_menu 以 <a> 输出）对齐原站 <div> 视觉：
 * 抵消镜像 CSS [data-v-73e69664] a 的 12px 灰字（原站此项为 div 不受影响） */
.side-bar .information-container a.information-wrapper[data-v-083711ee] {
	color: var(--color-primary-label);
	font-size: 16px;
	text-decoration: none;
}

/* 侧栏"分类"模式：隐藏原菜单项与底部菜单组件 */
.channel-list-content.xs-cats-mode > li {
	display: none;
}

.channel-list-content.xs-cats-mode .bottom-channel {
	display: none;
}

/* 布局与原站菜单项对齐：li 提供左距 16px，按钮自身无 padding/间距（文字间距由原站 .channel 的 margin-left:12px 生效） */
.xs-sites-cat-btn {
	display: flex;
	align-items: center;
	width: 100%;
	height: 48px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font-size: 16px;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

/* 分类 SVG 图标统一约束尺寸并跟随文字颜色（覆盖后台粘贴代码里写死的颜色） */
.xs-sites-cat-btn svg {
	width: 24px;
	height: 24px;
	flex: none;
}

.xs-sites-cat-btn svg :where(path, circle, rect, polygon, line, ellipse) {
	fill: currentColor;
}

.xs-sites-cat-btn span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.xs-sites-cat-btn:hover {
	background: rgba(0, 0, 0, 0.04);
}

/* 侧栏分类项：悬浮背景交给原站 li:hover 的大胶囊（999px），按钮自身不再叠加第二层背景 */
.channel-list .xs-sites-cat-btn:hover {
	background: transparent;
}

/* 选中态：胶囊背景由 li 的 active-channel 类提供（原站同款大胶囊，theme.js 维护），按钮自身不放背景 */
.xs-sites-cat-btn.xs-current {
	color: var(--xs-primary, #ff2442);
	font-weight: 600;
}

.xs-side-cat-item .xs-sites-cat-btn.xs-current span.channel {
	color: var(--xs-primary, #ff2442);
}

.xs-sites-main {
	flex: 1;
	min-width: 0;
	padding-top: 16px;
	padding-bottom: 16px;
}

/* 网址卡片逐个浮现（含推荐组胶囊，由 JS 按进入视口顺序设置 animation-delay） */
@keyframes xs-card-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.xs-site-card.xs-card-in {
	animation: xs-card-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
	.xs-site-card.xs-card-in {
		animation: none;
	}
}

.xs-sites-group {
	margin-bottom: 26px;
	scroll-margin-top: 130px;
}

.xs-sites-group-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 600;
	color: #333;
}

.xs-sites-group-title::before {
	content: "";
	width: 4px;
	height: 16px;
	border-radius: 2px;
	background: var(--xs-primary, #ff2442);
}

.xs-sites-count {
	font-size: 12px;
	font-weight: 400;
	color: rgba(51, 51, 51, 0.45);
}

.xs-site-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
}

.xs-site-card {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px;
	/* 固定高度：以"名称 1 行 + 介绍 2 行 + 域名 1 行"为基准，保证网格行高一致 */
	height: 112px;
	overflow: hidden;
	border: 1px solid rgba(51, 51, 51, 0.08);
	border-radius: 12px;
	background: #fafafa;
	text-decoration: none;
	color: #333;
	transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.xs-site-card:hover {
	border-color: rgba(var(--xs-primary-rgb, 255, 36, 66), 0.45);
}

.xs-site-icon {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid rgba(51, 51, 51, 0.08);
}

.xs-site-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.xs-site-initial {
	font-size: 20px;
	font-weight: 600;
	color: var(--xs-primary, #ff2442);
	line-height: 1;
	transform: translateY(-0.05em); /* 中文字形在行框内视觉偏下，按字号比例微调回中 */
}

.xs-site-main {
	min-width: 0;
}

.xs-site-name {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: #333;
	/* 长标题单行截断，避免换行撑破固定高度 */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.xs-site-desc {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.5;
	color: rgba(51, 51, 51, 0.6);
}

.xs-site-domain {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: rgba(51, 51, 51, 0.45);
	/* 长域名同样单行截断 */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*
 * 推荐分组：热门推荐横幅（对照参考稿）。
 * 浅灰圆角面板 + 左侧渐变徽章/标题副文案 + 右侧"换一批"，下方白色胶囊（图标 + 名称 + 箭头），
 * 右下角淡紫装饰，无推荐角标。
 */
.xs-sites-featured {
	margin-bottom: 26px;
}

.xs-featured-panel {
	position: relative;
	overflow: hidden;
	padding: 20px 24px;
	border-radius: 18px;
	background: #f6f6f8;
}

/* 右下角淡紫装饰光影 */
.xs-featured-panel::after {
	content: "";
	position: absolute;
	right: -36px;
	bottom: -48px;
	width: 240px;
	height: 170px;
	background:
		radial-gradient(closest-side at 32% 40%, rgba(139, 132, 242, 0.16), transparent 72%),
		radial-gradient(closest-side at 72% 72%, rgba(139, 132, 242, 0.10), transparent 72%);
	transform: rotate(-14deg);
	pointer-events: none;
}

.xs-featured-head,
.xs-pill-grid {
	position: relative;
	z-index: 1;
}

/* 头部：徽章 + 标题副文案 + 换一批 */
.xs-featured-head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.xs-featured-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: linear-gradient(135deg, #b7b1f9, #8d84f2);
	color: #fff;
	flex: none;
	box-shadow: 0 2px 6px rgba(141, 132, 242, 0.35);
}

.xs-featured-headings {
	min-width: 0;
	flex: 1;
}

.xs-featured-title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #1d1d1f;
}

.xs-featured-sub {
	margin: 3px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: rgba(60, 60, 67, 0.55);
}

.xs-featured-shuffle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 2px 0 0;
	padding: 5px 10px;
	border: none;
	border-radius: 999px;
	background: transparent;
	font-size: 13px;
	font-weight: 500;
	color: rgba(29, 29, 31, 0.75);
	cursor: pointer;
	flex: none;
	transition: background 0.15s, color 0.15s;
}

.xs-featured-shuffle:hover {
	background: rgba(29, 29, 31, 0.06);
	color: #1d1d1f;
}

.xs-featured-shuffle:active svg {
	animation: xs-shuffle-spin 0.4s ease;
}

@keyframes xs-shuffle-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* 胶囊：flex 流式换行，宽度随内容 */
.xs-pill-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

.xs-site-card.xs-site-pill {
	/* 胶囊卡片恢复自适应高度（固定 112px 仅适用于普通组卡片） */
	height: auto;
	overflow: visible;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 9px 6px 7px;
	border: none;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.04);
	color: #1d1d1f;
	transform: none;
	transition: box-shadow 0.15s, color 0.15s;
}

.xs-site-card.xs-site-pill:hover {
	color: var(--xs-primary, #ff2442);
	box-shadow: 0 0 0 1px rgba(var(--xs-primary-rgb, 255, 36, 66), 0.35);
}

.xs-pill-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	overflow: hidden;
	background: #f0f0f2;
	flex: none;
}

.xs-pill-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.xs-pill-initial {
	font-size: 11px;
	font-weight: 600;
	color: var(--xs-primary, #ff2442);
	line-height: 1;
	transform: translateY(-0.05em); /* 同 xs-site-initial：修正中文字形视觉偏下 */
}

.xs-pill-name {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
}

.xs-pill-arrow {
	color: rgba(60, 60, 67, 0.35);
	flex: none;
	transition: transform 0.15s, color 0.15s;
}

.xs-site-card.xs-site-pill:hover .xs-pill-arrow {
	color: var(--xs-primary, #ff2442);
	transform: translateX(1px);
}

html[dark] .xs-featured-panel {
	background: #1c1c1e;
}

html[dark] .xs-featured-title {
	color: #f5f5f7;
}

html[dark] .xs-featured-sub {
	color: rgba(235, 235, 245, 0.5);
}

html[dark] .xs-featured-shuffle {
	color: rgba(245, 245, 247, 0.7);
}

html[dark] .xs-featured-shuffle:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #f5f5f7;
}

html[dark] .xs-site-card.xs-site-pill {
	background: #2c2c2e;
	box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.06);
	color: #f5f5f7;
}

html[dark] .xs-site-card.xs-site-pill:hover {
	color: var(--xs-primary, #ff2442);
	box-shadow: 0 0 0 1px rgba(var(--xs-primary-rgb, 255, 36, 66), 0.45);
}

html[dark] .xs-pill-icon {
	background: rgba(255, 255, 255, 0.1);
}

html[dark] .xs-pill-arrow {
	color: rgba(235, 235, 245, 0.35);
}

.xs-sites-empty {
	margin: 40px 0;
	text-align: center;
	font-size: 14px;
	color: rgba(51, 51, 51, 0.45);
}

/* 推荐网址角标（后台"设为推荐"勾选的卡片，右上角主题色标签，同分类内置顶展示） */
.xs-site-card.xs-featured {
	position: relative;
}

.xs-site-card .xs-site-feat {
	position: absolute;
	top: -1px;
	right: -1px;
	padding: 4px 10px;
	border-radius: 0 12px 0 12px;
	background: var(--xs-primary, #ff2442);
	color: #fff;
	font-size: 11px;
	line-height: 1;
	font-weight: 600;
	pointer-events: none;
}

/* 暗色模式适配 */
/* 分段控件暗色：容器深灰半透明，选中滑块 iOS 深灰 */
html[dark] .xs-side-switch {
	background: rgba(120, 120, 128, 0.24);
}

html[dark] .xs-side-switch-btn {
	color: rgba(235, 235, 245, 0.6);
}

html[dark] .xs-side-switch-btn:hover {
	color: rgba(235, 235, 245, 0.85);
}

html[dark] .xs-side-switch-btn.xs-current {
	background: #636366;
	color: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

html[dark] .xs-sites-cat-btn {
	color: rgba(245, 245, 245, 0.85);
}

html[dark] .xs-sites-cat-btn:hover {
	background: rgba(255, 255, 255, 0.08);
}

html[dark] .channel-list .xs-sites-cat-btn:hover {
	background: transparent;
}

html[dark] .xs-sites-cat-btn.xs-current {
	color: var(--xs-primary, #ff2442);
}

html[dark] .xs-sites-group-title {
	color: #f5f5f5;
}

html[dark] .xs-sites-count {
	color: rgba(245, 245, 245, 0.45);
}

html[dark] .xs-site-card {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.1);
	color: #f5f5f5;
}

html[dark] .xs-site-card:hover {
	border-color: rgba(var(--xs-primary-rgb, 255, 36, 66), 0.5);
}

html[dark] .xs-site-icon {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.1);
}

html[dark] .xs-site-name {
	color: #f5f5f5;
}

html[dark] .xs-site-desc {
	color: rgba(245, 245, 245, 0.6);
}

html[dark] .xs-site-domain {
	color: rgba(245, 245, 245, 0.45);
}

html[dark] .xs-sites-empty {
	color: rgba(245, 245, 245, 0.45);
}

/* ===== 暗色模式补充适配：通用页面 / 面包屑 / 详情页 / 空状态 ===== */
/* 通用页面内容卡（page.php）与详情弹窗内卡片共用，亮色 #fff → 暗色卡片色 */
html[dark] .xs-page-content {
	background: #262626;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* 面包屑导航 */
html[dark] .xs-breadcrumb,
html[dark] .xs-breadcrumb a {
	color: rgba(245, 245, 245, 0.6);
}

html[dark] .xs-breadcrumb a:hover,
html[dark] .xs-breadcrumb .xs-crumb-current {
	color: var(--color-primary-label, #f5f5f5);
}

html[dark] .xs-breadcrumb .xs-crumb-sep {
	color: rgba(245, 245, 245, 0.35);
}

/* 详情页 AI 提示词容器 */
html[dark] .xs-ai-prompt {
	border-color: rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.06);
}

html[dark] .xs-ai-prompt-head {
	border-bottom-color: rgba(255, 255, 255, 0.1);
}

html[dark] .xs-ai-toggle {
	color: rgba(245, 245, 245, 0.6);
}

html[dark] .xs-ai-toggle:hover {
	color: #f5f5f5;
}

html[dark] .xs-ai-prompt-body {
	color: rgba(245, 245, 245, 0.8);
}

/* 收起态底部渐隐蒙层：跟随暗色容器背景（6% 白叠在 #262626 上 ≈ #333） */
html[dark] .xs-ai-prompt:not(.xs-expanded) .xs-ai-prompt-body::after {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0), #333);
}

/* 评论输入条：头像占位横杠反色，发送按钮灰圆在深底上不可见 */
html[dark] .xs-comments .xs-composer-dash {
	background: #262626;
}

html[dark] .xs-comments .xs-composer-send {
	background: rgba(255, 255, 255, 0.14);
}

/* 详情页右栏评论列表与正文细滚动条 */
html[dark] .xs-note-detail .xs-note-info .xs-comment-list::-webkit-scrollbar-thumb,
html[dark] .xs-note-detail .xs-note-body::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.15);
}

/* 通用页面标题与正文、侧边栏小部件标题 */
html[dark] .xs-page-title,
html[dark] .xs-page-body,
html[dark] .xs-side-widget-title {
	color: #f5f5f5;
}

/* 自定义页面元信息条暗色 */
html[dark] .xs-page-meta {
	color: rgba(255, 255, 255, 0.6);
}

html[dark] .xs-page-meta .xs-page-meta-item + .xs-page-meta-item::before {
	color: rgba(255, 255, 255, 0.35);
}

/* 归档/分类空状态（补 html[dark] 覆盖，手动切换深色时 prefers-color-scheme 不生效） */
html[dark] .xs-empty-state-title {
	color: rgba(255, 255, 255, 0.85);
}

html[dark] .xs-empty-state-desc {
	color: rgba(255, 255, 255, 0.45);
}

/* 暗色下"暂无封面"默认占位图反色：浅灰底变深底、红标色相经 hue-rotate 保留，避免搜索/归档页整版白卡刺眼；
   仅对内置默认图生效（.xs-placeholder-default），后台自定义占位图不反色 */
html[dark] .note-item .cover img.xs-placeholder-default {
	filter: invert(1) hue-rotate(180deg);
}

/* 窄屏：内容区顶部横向分类频道条（首页同款 .channel 胶囊样式，宽屏时隐藏）。
 * 胶囊高亮/hover 由镜像规则 .channel[data-v-61702c16] 提供，这里只做吸顶与贴合。
 * z-index 必须低于顶栏(.header-container fixed z-index:10)，否则吸顶条会盖住顶栏弹出的汉堡菜单面板 */
@media (max-width: 900px) {
	.xs-sites-mobile-cats.channel-scroll-container {
		position: sticky;
		top: 60px;
		z-index: 8;
		display: flex;
		height: 48px; /* 镜像默认 72px，压缩上下留白 */
		margin: 0 0 2px;
		background: rgba(255, 255, 255, 0.92);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}

	.xs-sites-mobile-cats .content-container {
		flex: 1;
		padding: 0 8px;
	}

	.xs-sites-mobile-cats .channel {
		flex: none;
		height: 34px;
		padding: 0 12px; /* 内间距同步收紧 */
		color: var(--color-secondary-label);
	}

	.xs-sites-mobile-cats .channel svg {
		width: 20px;
		height: 20px;
		margin-right: 4px;
		flex: none;
	}
}

html[dark] .xs-sites-mobile-cats {
	background: rgba(10, 10, 10, 0.92);
}

@media (max-width: 600px) {
	.xs-site-grid {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	}
}

/* 移动端头部汉堡按钮下拉面板：克隆自侧栏"更多"菜单（复用其全部菜单样式），
 * 按原站 information-pad 规则重定位到按钮下方右侧（对齐 index.5de04af2.css） */
#small-more-info .information-pad {
	position: absolute;
	bottom: auto;
	top: calc(100% + 4px);
	left: auto;
	right: 0;
	width: 223px;
	z-index: 16;
	margin: 0;
	padding: 8px 0;
	background: var(--bg0-lighter, #fff);
	border-radius: 12px;
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 8px 20px rgba(0, 0, 0, 0.12);
	overflow: hidden;
}
#small-more-info .information-pad[hidden] {
	display: none !important;
}
/* 面板内的克隆菜单重置为静态流式布局：定位、卡片视觉由外层 pad 承担 */
#small-more-info .information-pad .xs-more-menu {
	position: static;
	width: auto;
	max-height: none;
	bottom: auto;
	left: auto;
	z-index: auto;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	overflow: visible;
}