@charset "UTF-8";
/**
 * 教学链 Nav — 前台样式
 *
 * 教育类网址导航配色：淡天蓝主色，清亮舒展。
 *   主色 #6aabe0（天蓝，白底 2.47:1，仅用于大面积色块与图标底）
 *   深色档 #237ac1（白底 4.54:1，链接 / 强调文字 / 按钮悬停）
 *   主文字 #2f3a42 / 次要 #6b7780
 *   页面底色 #f5f8fc / 卡片 #fff + #e3ebf4 边框 / 圆角 12px
 *
 * 配色设计要点：
 *   1. 主色偏淡，所以深色文字**不直接用主色**，而是用 --theme-deep（加深版），
 *      保证链接、强调文字在白底上仍然看得清。
 *   2. 横幅渐变的两端不用写死的颜色，改由 --theme-deep 与 --theme-light 派生，
 *      这样后台换任何主色，横幅都跟着变，不会剩下旧的青绿。
 *   3. 页面底色、边框、浅底这些都带一点点主色的蓝调，整站看起来是一套的，
 *      而不是「蓝色主题 + 灰绿底色」。
 *
 * 目录
 *  01 变量与重置
 *  02 通用工具类与容器
 *  03 页头导航
 *  04 首页搜索横幅
 *  05 分类内容卡与二级 Tab
 *  06 站点卡片与网格
 *  07 归档页 / 面包屑 / 分页
 *  08 文章与页面（含侧边栏）
 *  09 评论
 *  10 页脚 / 底部 Dock / 返回顶部
 *  11 移动端抽屉
 *  12 暗色模式
 *  13 响应式
 */

/* ============================================================
   01 变量与重置
   ============================================================ */
:root {
	--theme-color: #6aabe0;
	--theme-color-rgb: 106, 171, 224;
	--theme-color-bg: rgba(106, 171, 224, .12);

	/*
	 * 主色的三个派生档。
	 * 由 PHP 按 --theme-color 算好注入（见 setup.php），这里给默认值做兜底。
	 *   --theme-deep  加深，用于链接、强调文字、按钮悬停（保证白底可读）
	 *   --theme-light 提亮，用于渐变末端、浅色高亮
	 *   --hover-color 命中态，等同 deep
	 *
	 * deep 的深度是自适应的 —— PHP 会一直加深直到白底对比度达到 4.5:1
	 * （WCAG AA 正文标准）。天蓝这组算下来是 4.54:1。
	 */
	--theme-deep: #237ac1;
	--theme-light: #a8cce9;
	--hover-color: #237ac1;
	--accent-blue: #237ac1;
	--accent-soft: #bfdaf1;

	--main-color: #2f3a42;
	--main-color-strong: #16212a;
	--muted-color: #8a959d;
	--muted-color2: #6b7780;
	--muted-color3: #9fa9b0;

	--main-bg-color: #fff;
	--body-bg-color: #f5f8fc;
	--muted-bg-color: #e6edf6;
	--muted-bg-color-l: #f2f6fb;
	--input-bg-color: #f5f8fc;
	--main-border-color: #e3ebf4;
	--main-border-hover: #ccd9e8;


	--main-radius: 12px;
	--radius-sm: 8px;
	--radius-xs: 6px;
	--radius-pill: 999px;

	--main-max-width: 1260px;
	--home-max-width: 1900px;
	--main-nav-hight: 64px;
	--main-aside-basis-width: 218px;
	/* 侧边栏，由自定义器「⑦ 侧边栏设置」注入覆盖 */
	--aside-radius: 12px;
	--aside-padding: 16px;
	--aside-gap: 16px;
	/* 卡片与网格，由「外观 → 卡片与布局」注入覆盖 */
	--card-padding: 8px 10px;
	--card-icon: 36px;
	--card-icon-radius: 10px;
	/*
	 * 卡片与网格尺寸。
	 * 默认值集中放在这里（方便统一维护），实际取值由 setup.php 的
	 * jzpix_inline_vars() 注入的 #jzpix-inline-vars 规则覆盖。
	 *
	 * 必须是 `html:root` 而不是 `:root` —— 内联 <style> 与主题样式表同为
	 * 作者样式，谁在后面谁赢；`html:root` 多一个类型选择器，靠特异性压过
	 * 内联块，不依赖 wp_head 与样式表的加载顺序。
	 */
	html:root {
		--card-padding: 8px 10px;
		--card-icon: 36px;
		--card-icon-radius: 10px;
		--card-icon-inner: 26px;
		--card-gap: 10px;
	}
	--jzpix-gutter: 12px;

	--shadow-sm: 0 1px 2px rgba(16, 24, 40, .04);
	--shadow-md: 0 6px 20px rgba(16, 24, 40, .08);
	--shadow-lg: 0 12px 32px rgba(16, 24, 40, .12);

	/* 网格列数，默认值；同样由 setup.php 注入覆盖，见上方 html:root 的说明 */
	html:root {
		--jzpix-cols-xxl: 7;
		--jzpix-cols-xl: 6;
		--jzpix-cols-lg: 5;
		--jzpix-cols-md: 4;
	}

	/*
	 * 搜索区（首页横幅），默认值；由 setup.php 注入覆盖，写法同上。
	 * --search-bg-position 是纯数字（0-100），模板拼成百分比；
	 * --search-overlay 是 0-1 的小数，直接给 rgba 当 alpha 用。
	 */
	html:root {
		--search-min-height: 210px;
		--search-blur: 0px;
		--search-overlay: 0;
		--search-bg-position: 50%;
	}

	--font-sans: "MiSans", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
		"Helvetica Neue", Helvetica, Arial, "Noto Sans SC", sans-serif;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--body-bg-color);
	color: var(--main-color);
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5em;
	color: var(--main-color-strong);
	font-weight: 700;
	line-height: 1.35;
}

p { margin: 0 0 1em; }

a {
	color: var(--main-color);
	text-decoration: none;
	transition: color .2s ease;
}
a:hover { color: var(--theme-color); }

img { max-width: 100%; height: auto; border: 0; }

ul, ol { margin: 0 0 1em; padding-left: 1.4em; }
li > ul, li > ol { margin-bottom: 0; }

button, input, select, textarea {
	font: inherit;
	color: inherit;
}

input, textarea, select {
	max-width: 100%;
	padding: 8px 12px;
	background: var(--main-bg-color);
	border: 1px solid var(--main-border-color);
	border-radius: var(--radius-sm);
	transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus, textarea:focus, select:focus {
	outline: 0;
	border-color: var(--theme-color);
	box-shadow: 0 0 0 3px var(--theme-color-bg);
}

button { cursor: pointer; }

mark {
	background: var(--theme-color-bg);
	color: var(--theme-color);
	padding: 0 2px;
	border-radius: 3px;
}

/* 屏幕阅读器专用 */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ============================================================
   02 通用工具类与容器
   ============================================================ */
.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.flex-fill { flex: 1 1 auto; }
.align-items-center { align-items: center; }
.justify-content-between { justify-content: space-between; }
.text-center { text-align: center; }
.text-muted { color: var(--muted-color); }
.text-xs { font-size: 12px; }
.text-sm { font-size: 13px; }
.m-0 { margin: 0; }
.mr-1 { margin-right: 4px; }
.mr-2 { margin-right: 8px; }
.mr-3 { margin-right: 12px; }
.mr-4 { margin-right: 16px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.my-4 { margin-top: 16px; margin-bottom: 16px; }
.ml-auto { margin-left: auto; }
.d-none { display: none !important; }
.position-relative { position: relative; }
.overflow-hidden { overflow: hidden; }

/* 单行 / 两行截断 */
.line1 {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.line2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/*
 * 响应式方向类
 * 模板里用的是 d-flex flex-column flex-md-row 这类写法，
 * 单独定义 .d-flex 是不够的，必须把 md 断点的覆盖规则补齐，
 * 否则容器会一直停留在 column，配合 align-items 变成整体居中。
 */
.flex-wrap { flex-wrap: wrap; }
.align-items-md-center { align-items: stretch; }

@media (min-width: 768px) {
	.d-md-flex { display: flex !important; }
	.d-md-block { display: block !important; }
	.d-md-none { display: none !important; }
	.flex-md-row { flex-direction: row !important; }
	.align-items-md-center { align-items: center !important; }
	.overflow-x-md-visible { overflow-x: visible; }
}

.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

.switch-container {
	width: 100%;
	max-width: var(--home-max-width);
	margin: 0 auto;
	padding: 0 var(--jzpix-gutter);
}

/* 内页容器窄一些，阅读更舒服 */
.has-sidebar .switch-container.content,
.jzpix-page-wrap .switch-container {
	max-width: var(--main-max-width);
}

.site { min-height: 100vh; display: flex; flex-direction: column; }
.site-main { flex: 1 1 auto; }

/* 隐藏元素（tab 面板用） */
.is-hidden { display: none !important; }

/* ============================================================
   03 页头导航
   ============================================================ */
.main-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	width: 100%;
}

.header-nav {
	height: var(--main-nav-hight);
	background: var(--main-bg-color);
	border-bottom: 1px solid transparent;
	transition: box-shadow .25s ease, border-color .25s ease;
}

.main-header.is-stuck .header-nav {
	border-bottom-color: var(--main-border-color);
	box-shadow: var(--shadow-sm);
}

.container-header {
	height: 100%;
	max-width: var(--home-max-width);
	margin: 0 auto;
	padding: 0 var(--jzpix-gutter);
}

.navbar-logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
.navbar-logo img {
	height: 34px;
	width: auto;
	max-width: 220px;
	object-fit: contain;
	display: block;
}
.navbar-logo .logo-text {
	font-size: 20px;
	font-weight: 800;
	color: var(--main-color-strong);
	letter-spacing: .01em;
}
.navbar-logo .logo-text em {
	font-style: normal;
	color: var(--theme-color);
}

/* 主导航 */
.navbar-header-menu { margin-left: 18px; }
.navbar-header {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
}
.navbar-header > li {
	position: relative;
	list-style: none;
}
.navbar-header > li > a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 4px;
	height: var(--main-nav-hight);
	padding: 0 12px;
	color: var(--main-color);
	font-weight: 500;
	white-space: nowrap;
}
.navbar-header > li > a::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 14px;
	height: 3px;
	border-radius: 3px;
	background: transparent;
	transition: background .22s ease;
}
.navbar-header > li > a:hover,
.navbar-header > li.current-menu-item > a,
.navbar-header > li.current_page_item > a,
.navbar-header > li.active > a {
	color: var(--theme-color);
}
.navbar-header > li.current-menu-item > a::after,
.navbar-header > li.current_page_item > a::after,
.navbar-header > li.active > a::after {
	background: var(--theme-color);
}
.navbar-header .hot {
	display: inline-block;
	margin-left: 4px;
	padding: 0 5px;
	background: var(--theme-color);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	line-height: 15px;
	border-radius: 4px;
	transform: translateY(-1px);
}

/* 下拉箭头 */
.jzpix-arrow {
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 2px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: rotate(45deg) translateY(-1px);
	opacity: .55;
}

/* 子菜单 */
.navbar-header .sub-menu {
	position: absolute;
	top: 100%;
	left: 8px;
	min-width: 168px;
	padding: 8px;
	margin: 0;
	list-style: none;
	background: var(--main-bg-color);
	border: 1px solid var(--main-border-color);
	border-radius: var(--main-radius);
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.navbar-header > li:hover > .sub-menu,
.navbar-header > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.navbar-header .sub-menu li { list-style: none; }
.navbar-header .sub-menu a {
	display: block;
	padding: 8px 12px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	color: var(--main-color);
}
.navbar-header .sub-menu a:hover {
	background: var(--muted-bg-color-l);
	color: var(--theme-color);
}

/* 页头右侧工具 */
.header-tools {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}
.btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: var(--muted-color2);
	transition: background .2s ease, color .2s ease;
}
.btn-icon:hover {
	background: var(--muted-bg-color-l);
	color: var(--theme-color);
}
.btn-icon svg { width: 19px; height: 19px; }

.navbar-toggler { display: none; }

/* ============================================================
   04 首页搜索横幅
   ============================================================ */
.header-banner {
	position: relative;
	margin-bottom: 16px;
	border-radius: var(--main-radius);
	overflow: hidden;
	background:
		radial-gradient(120% 160% at 12% 8%, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, 0) 55%),
		linear-gradient(128deg, var(--theme-deep) 0%, var(--theme-color) 46%, var(--theme-light) 100%);
	background-size: cover;
	background-position: center;
	isolation: isolate;
}

/* 背景图上加一层柔化，保证文字可读 */
.header-banner.has-image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .30) 100%);
	z-index: 0;
}

/* ============================================================
   04.1 搜索区可调项（外观 → 搜索区设置）
   ============================================================ */

/*
 * 自定义背景图
 * 由后台开关决定要不要带 .has-custom-bg。带的时候把默认那层青绿渐变
 * 整个换成图片，并套用「背景位置 / 模糊 / 遮罩」三项。
 */
.header-banner.has-custom-bg {
	background-image: var(--search-bg-image);
	background-size: cover;
	background-position: center var(--search-bg-position);
}

/*
 * 模糊只能作用在背景层，不能加在 .header-banner 上 ——
 * 那会把里面的文字和搜索框一起糊掉。所以用一个独立伪元素承载图片，
 * 在它自己身上 filter: blur()，父级的 overflow:hidden 负责裁掉边缘溢出。
 */
.header-banner.has-custom-bg.has-blur::before {
	content: "";
	position: absolute;
	inset: -20px;              /* 往外扩，避免模糊后四周露出白边 */
	z-index: 0;
	background-image: var(--search-bg-image);
	background-size: cover;
	background-position: center var(--search-bg-position);
	filter: blur(var(--search-blur));
}

/* 遮罩层：压在背景之上、内容之下，用来压暗背景让文字读得清 */
.header-banner.has-overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgba(8, 15, 25, var(--search-overlay));
	pointer-events: none;
}

/* 有模糊或遮罩时，正文与搜索框要抬到这两层之上 */
.header-banner.has-blur .search-container,
.header-banner.has-overlay .search-container { position: relative; z-index: 2; }

	.header-banner .search-container {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		/*
		 * 高度百分比已经在 setup.php 里折算成像素写进 --search-min-height，
		 * 这里不要再乘一个 scale —— 那是多余的中间变量，一旦某一侧没声明
		 * 就会让整条 calc() 在计算值阶段失效，min-height 直接掉回 0。
		 */
		min-height: var(--search-min-height);
		padding: 24px 16px 28px;
	}

.banner-copy {
	margin-bottom: 14px;
	color: #fff;
	text-align: center;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .22);
}
.banner-copy h2 {
	margin: 0 0 6px;
	color: #fff;
	font-size: 26px;
	font-weight: 800;
	letter-spacing: .02em;
}
.banner-copy p {
	margin: 0;
	font-size: 14px;
	opacity: .92;
}

.big-search {
	width: 100%;
	max-width: 620px;
}

/* 搜索分组 tab */
.search-list-menu {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-bottom: 12px;
	overflow-x: auto;
}
.search-menu {
	position: relative;
	padding: 5px 16px;
	color: rgba(255, 255, 255, .86);
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .18);
	transition: color .2s ease;
}
.search-menu:hover { color: #fff; }
.search-menu::after {
	content: "";
	position: absolute;
	left: 10%;
	right: 10%;
	bottom: 1px;
	height: 8px;
	border-radius: 3px;
	background: linear-gradient(270deg, rgba(255, 225, 107, .85), rgba(255, 225, 107, .5) 48%, rgba(255, 225, 107, .05));
	clip-path: polygon(10px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
	opacity: 0;
	transition: opacity .2s ease;
}
.search-menu.active {
	color: #fff;
	font-weight: 700;
}
.search-menu.active::after { opacity: 1; }

/* 搜索表单 */
.search-form {
	position: relative;
	display: flex;
	align-items: center;
	background: #fff;
	border-radius: var(--main-radius);
	box-shadow: 0 6px 22px rgba(0, 0, 0, .13);
	overflow: hidden;
}
.search-form .search-key {
	flex: 1 1 auto;
	height: 50px;
	padding: 0 16px;
	background: transparent;
	border: 0;
	border-radius: 0;
	font-size: 15px;
	box-shadow: none;
}
.search-form .search-key:focus { box-shadow: none; }
.search-form .search-key::placeholder { color: var(--muted-color3); }

.search-submit-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 38px;
	margin-right: 6px;
	background: var(--theme-color);
	color: #fff;
	border-radius: var(--radius-sm);
	flex-shrink: 0;
	transition: filter .2s ease, transform .2s ease;
}
.search-submit-btn:hover { filter: brightness(1.06); color: #fff; }
.search-submit-btn:active { transform: scale(.96); }
.search-submit-btn svg { width: 19px; height: 19px; }

/* 关掉「显示图标」时，搜索按钮仍要在，只是不放放大镜 —— 否则没法提交 */
.jzpix-no-search-icon .search-submit-btn svg { display: none; }
.jzpix-no-search-icon .search-submit-btn {
	width: 34px;
	margin-right: 8px;
	background: transparent;
	color: var(--theme-color);
}
.jzpix-no-search-icon .search-submit-btn::after {
	content: "";
	width: 0;
	height: 0;
	border-left: 8px solid currentColor;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
}

/*
 * 「搜索框盒子布局」关掉时，把白底盒子拆成「输入框 + 独立按钮」两段，
 * 视觉上更轻。默认是开着的（一整条贴合的白盒子）。
 */
.jzpix-no-box-layout .search-form {
	background: transparent;
	box-shadow: none;
	overflow: visible;
	gap: 8px;
}
.jzpix-no-box-layout .search-form .search-key {
	background: #fff;
	border-radius: var(--main-radius);
	box-shadow: 0 6px 22px rgba(0, 0, 0, .13);
}
.jzpix-no-box-layout .search-form .search-submit-btn {
	width: 50px;
	height: 50px;
	margin-right: 0;
	border-radius: var(--main-radius);
}

/*
 * 「Footer 盒子布局」关掉时，页脚各栏之间不画分隔与盒子边框，
 * 退回成一条通栏的文字排布。
 */
.jzpix-no-footer-box .footer-widgets .widget {
	background: transparent;
	border: 0;
	padding: 0;
}
.jzpix-no-footer-box .footer-widgets { gap: 28px; }

/* 内联搜索框（搜索页 / 空状态使用） */
.jzpix-search-inline {
	border: 1px solid var(--main-border-color);
	box-shadow: none;
}
.jzpix-search-inline .search-key { height: 44px; }

/* 具体搜索引擎 chip */
.search-list-group { margin-top: 12px; }
.search-group {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	flex-wrap: nowrap;
	overflow-x: auto;
}
.search-group.active { display: flex; }
.search-term {
	padding: 4px 14px;
	background: rgba(255, 255, 255, .22);
	color: #fff;
	font-size: 13px;
	border-radius: var(--radius-pill);
	white-space: nowrap;
	cursor: pointer;
	backdrop-filter: blur(4px);
	transition: background .2s ease, color .2s ease;
}
.search-term:hover { background: rgba(255, 255, 255, .34); }
.search-term.active {
	background: #fff;
	color: var(--theme-color);
	font-weight: 600;
}

/* ============================================================
   05 分类内容卡与二级 Tab
   ============================================================ */
.ioui-content {
	max-width: var(--home-max-width);
	margin: 0 auto;
	padding: 0 var(--jzpix-gutter);
}
.ioui-main { width: 100%; min-width: 0; }
.content-wrap { width: 100%; min-width: 0; }

.content-layout { display: block; }

.content-card {
	padding: 16px;
	background: var(--main-bg-color);
	border: 1px solid var(--main-border-color);
	border-radius: var(--main-radius);
	box-shadow: none;
}
.content-card + .content-card { margin-top: 16px; }

/* 分类标题行：标题 + 二级 Tab 紧跟其后，最右侧放「查看更多」 */
.io-slider-tab {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
	gap: 4px;
	margin-bottom: 12px;
	padding-right: 92px;
}

.tab-title {
	display: inline-flex;
	align-items: center;
	margin: 0 16px 0 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--main-color-strong);
	letter-spacing: .02em;
	white-space: nowrap;
	flex-shrink: 0;
}
.tab-title .site-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-right: 8px;
	/*
	 * 用深色档而不是主色：内置图标是线性描边风格，笔画细，
	 * 淡主色在白底上会糊掉看不清。
	 */
	color: var(--theme-deep);
}
.tab-title .site-tag svg { width: 100%; height: 100%; }
.tab-title::after {
	content: "|";
	display: inline-block;
	margin-left: .9rem;
	color: #9ca3af;
	font-weight: 400;
}

/* 二级分类 tab */
.slider-tab {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
}
.slider-tab .slider-li {
	position: relative;
	padding: 6px 14px;
	color: var(--muted-color2);
	font-size: 14px;
	white-space: nowrap;
	cursor: pointer;
	border: 0;
	border-radius: 0;
	background: transparent;
	transition: color .2s ease;
	z-index: 2;
}
/* 悬停斜切高亮块：clip-path 右侧向内收 8px，
   右上角因此露出一块直角三角空区，即「右上角小三角」 */
.slider-tab .slider-li::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	background: linear-gradient(
		270deg,
		rgba(var(--theme-color-rgb), .20),
		rgba(var(--theme-color-rgb), .09) 45%,
		rgba(var(--theme-color-rgb), 0)
	);
	clip-path: polygon(8px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
	transition: opacity .2s ease;
}
.slider-tab .slider-li:hover {
	color: var(--theme-color);
}
.slider-tab .slider-li:hover::before {
	opacity: 1;
}
.slider-tab .slider-li.active {
	color: var(--theme-color);
	font-weight: 600;
}
.slider-tab .slider-li.active::before {
	opacity: 1;
}
.slider-tab .slider-li:focus-visible {
	outline: 2px solid var(--theme-color);
	outline-offset: 2px;
}
.slider-tab .slider-li.active::after {
	content: "";
	position: absolute;
	left: 10px;
	right: 12px;
	bottom: 0;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(
		270deg,
		var(--theme-color),
		rgba(var(--theme-color-rgb), .35)
	);
	clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}

/* 查看更多 */
.tab-more {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	padding: 5px 13px;
	background: var(--accent-blue);
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	border-radius: var(--radius-xs);
	white-space: nowrap;
	transition: filter .2s ease, box-shadow .2s ease;
}
.tab-more:hover {
	color: #fff;
	filter: brightness(1.06);
	box-shadow: 0 4px 12px rgba(64, 134, 241, .32);
}

/* Tab 面板 */
.tab-content { position: relative; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

.tab-pane.is-loading {
	min-height: 120px;
	opacity: .45;
	pointer-events: none;
}

/* 空状态 */
.jzpix-empty {
	padding: 36px 16px;
	color: var(--muted-color);
	font-size: 14px;
	text-align: center;
	background: var(--muted-bg-color-l);
	border-radius: var(--radius-sm);
}

/* ============================================================
   06 站点卡片与网格
   ============================================================ */
.jzpix-sites-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--card-gap);
}

.posts-item.sites-item {
	position: relative;
	display: flex;
	align-items: center;
	background: var(--main-bg-color);
	border: 1px solid var(--main-border-color);
	border-radius: var(--main-radius);
	overflow: hidden;
}
.jzpix-lift .posts-item.sites-item:hover {
	border-color: var(--main-border-hover);
	transform: translateY(-2px);
	transition: all .2s ease;
	box-shadow: var(--shadow-sm);
}

/*
 * 3D 悬浮效果（后台上可开关）
 *
 * transform 里带 rotateX 就必须给父级 perspective，否则是正交投影、
 * 看起来只是轻微斜切没有纵深。用 ::after 铺一层高光，
 * 模拟光标扫过时卡片表面的反光 —— 纯 2D 属性做立体感，不用 WebGL。
 */
.jzpix-3d .jzpix-sites-grid { perspective: 900px; }
.jzpix-3d .posts-item.sites-item {
	transform-style: preserve-3d;
	transition: transform .28s cubic-bezier(.2, .8, .3, 1), box-shadow .28s ease, border-color .2s ease;
}
.jzpix-3d .posts-item.sites-item::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(
		115deg,
		rgba(255, 255, 255, .38) 0%,
		rgba(255, 255, 255, .06) 38%,
		rgba(var(--theme-color-rgb), .10) 100%
	);
	transition: opacity .28s ease;
}
.jzpix-3d .posts-item.sites-item:hover {
	border-color: var(--main-border-hover);
	transform: translateY(-4px) rotateX(6deg) scale(1.03);
	box-shadow: 0 18px 32px -12px rgba(16, 24, 40, .26), var(--shadow-md);
}
.jzpix-3d .posts-item.sites-item:hover::after { opacity: 1; }
/* 暗色下高光要压暗，否则白花花一片 */
.io-black-mode.jzpix-3d .posts-item.sites-item::after {
	background: linear-gradient(
		115deg,
		rgba(255, 255, 255, .14) 0%,
		rgba(255, 255, 255, .03) 38%,
		rgba(var(--theme-color-rgb), .16) 100%
	);
}
.io-black-mode.jzpix-3d .posts-item.sites-item:hover {
	box-shadow: 0 18px 32px -12px rgba(0, 0, 0, .62), var(--shadow-md);
}
/* 尊重系统的「减少动态效果」偏好：立体感保留，位移与过渡去掉 */
@media (prefers-reduced-motion: reduce) {
	.jzpix-3d .posts-item.sites-item,
	.jzpix-3d .posts-item.sites-item:hover { transform: none; transition: none; }
}

.sites-item .sites-body {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	min-width: 0;
	padding: var(--card-padding);
	color: inherit;
}
.sites-item .sites-body:hover { color: inherit; }

.sites-item .item-header {
	flex-shrink: 0;
	margin-right: 9px;
}
.sites-item .item-media {
	position: relative;
	width: var(--card-icon);
	height: var(--card-icon);
	border-radius: var(--card-icon-radius);
	overflow: hidden;
	background: var(--muted-bg-color-l);
}
.sites-item .blur-img-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	filter: blur(8px) saturate(1.4);
	opacity: .55;
	transform: scale(1.35);
}
.sites-item .item-image {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: inherit;
}
.sites-item .sites-icon {
	width: var(--card-icon-inner);
	height: var(--card-icon-inner);
	object-fit: contain;
	border-radius: 6px;
	background: transparent;
}
/*
 * 内置图标走 SVG（没有图片文件），尺寸跟图片图标对齐即可。
 * 颜色用主色，跟卡片上的其他强调元素是一套。
 */
.sites-item .sites-icon-svg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 0;
	color: var(--theme-deep);
}
.sites-item .sites-icon-svg svg {
	width: 100%;
	height: 100%;
	display: block;
}

.sites-item .item-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	flex: 1 1 auto;
	overflow: hidden;
}
.sites-item .item-title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--main-color-strong);
	display: flex;
	align-items: center;
	gap: 4px;
}
.sites-item .item-title b {
	font-weight: 700;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	min-width: 0;
}
.jzpix-hot {
	flex-shrink: 0;
	padding: 0 4px;
	background: var(--theme-color-bg);
	color: var(--theme-color);
	font-size: 10px;
	font-weight: 600;
	line-height: 14px;
	border-radius: 3px;
}
.sites-item .item-desc {
	margin-top: 1px;
	color: var(--muted-color);
	font-size: 12px;
	line-height: 1.4;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* 直达按钮：默认隐藏，悬停出现 */
.sites-item .sites-tags {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	padding-right: 8px;
	opacity: 0;
	transition: opacity .2s ease;
}
.sites-item:hover .sites-tags { opacity: 1; }
.sites-item .togo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	background: var(--theme-color-bg);
	color: var(--theme-color);
	border-radius: var(--radius-xs);
}
.sites-item .togo:hover {
	background: var(--theme-color);
	color: #fff;
}

/* 悬停时给文字让出位置 */
.sites-item:hover .item-desc { padding-right: 30px; }

/*
 * 卡片尺寸档位
 *
 * 后台上「卡片尺寸」选的是「中 / 小」这种语义档位，
 * 具体数值仍走 CSS 变量，从而与「内边距 / 图标大小」两个滑块叠加生效：
 * 档位负责整套比例的起点，滑块负责在起点上微调。
 *
 * 这里**不重新声明** --card-* 变量，只切换档位类名。
 * 曾经的写法是 `.jzpix-size-md { --card-icon: 36px }`，档位类挂在 <body> 上，
 * 于是整棵子树（含 body 自身）都被赋了值 —— 自定义属性按最近的祖先取胜，
 * 结果 setup.php 注入到 :root 的滑块数值永远被档位值盖掉，
 * 「卡片图标大小」拖到多少都看不出变化。
 *
 * 真正的档位默认值放在 :root 的 `html:root` 规则里（见文件上方），
 * setup.php 注入的 #jzpix-inline-vars 用同样的特异性覆盖它。
 * 档位类只用来给自定义器实时预览做无刷新切换，实际数值仍以注入为准。
 */
.jzpix-size-md,
.jzpix-size-sm { /* 数值由 jzpix_resolve_card_metrics() 统一计算并注入 */ }

/* 兼容旧版遗留的 compact 类（1.4.0 之前的设置值） */
.jzpix-style-compact .content-card { padding: 12px; }

/* 收藏提示条 */
.ctrld {
	padding: 14px 16px;
	background: var(--main-bg-color);
	border: 1px solid var(--main-border-color);
	border-radius: var(--main-radius);
	color: var(--muted-color2);
	font-size: 14px;
	text-align: center;
}
.ctrld a { color: var(--theme-color); font-weight: 600; }
.ctrld kbd,
.ctrld span {
	display: inline-block;
	margin: 0 2px;
	padding: 1px 7px;
	background: var(--muted-bg-color-l);
	border: 1px solid var(--main-border-color);
	border-bottom-width: 2px;
	border-radius: var(--radius-xs);
	color: var(--main-color);
	font-size: 12px;
	font-family: inherit;
}
.ctrld em { font-style: normal; margin: 0 2px; color: var(--muted-color); }

/* ============================================================
   06+ 内容板块（书籍 / 电影 / 音乐 / 软件下载 / 小程序导航，海报卡）
   ============================================================ */

/*
 * 海报网格：竖版卡片，与站点网格共用 --card-gap。
 * 列数走断点递进：3 → 4 → 5 → 6 → 7（见第 13 节响应式）。
 */
.rec-poster-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--card-gap);
}

.rec-item {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/*
 * 海报主体：2:3 竖版。占位 SVG 与真实图片都以绝对定位铺满，
 * 尺寸完全由容器约束。
 */
.rec-poster {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	background: var(--muted-bg-color-l);
	border: 1px solid var(--main-border-color);
	border-radius: var(--radius-sm);
	transition: transform .22s ease, box-shadow .22s ease, border-color .2s ease;
}
.rec-poster img,
.rec-poster .rec-poster-ph {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s ease;
}
.rec-poster .rec-poster-ph { font-family: inherit; }

/* 底部压暗渐层：保证标题与徽标在浅色海报上也读得清 */
.rec-poster-mask {
	position: absolute;
	inset: auto 0 0 0;
	height: 46%;
	background: linear-gradient(to top, rgba(9, 14, 22, .42), rgba(9, 14, 22, 0));
	pointer-events: none;
}

.jzpix-lift .rec-poster:hover {
	border-color: var(--main-border-hover);
	transform: translateY(-3px);
	box-shadow: var(--shadow-sm);
}
.jzpix-lift .rec-poster:hover img { transform: scale(1.05); }

/* 豆瓣评分徽标：黄星 + 绿色数字，沿用豆瓣的辨识配色 */
.rec-score-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 8px 2px 6px;
	background: rgba(255, 255, 255, .93);
	border-radius: 20px;
	font-size: 12px;
	line-height: 1.5;
	box-shadow: 0 1px 4px rgba(9, 14, 22, .18);
	transition: transform .18s ease, background-color .18s ease;
}
.rec-score-badge svg {
	width: 11px;
	height: 11px;
	color: #f5c518;
	flex-shrink: 0;
}
.rec-score-num {
	color: #00b51d;
	font-weight: 800;
	font-size: 13px;
	letter-spacing: .2px;
}
a.rec-score-badge:hover { background: #fff; transform: scale(1.05); }

/* 详情页的大号徽标（不在海报上，信息行内） */
.rec-score-badge.size-single {
	position: static;
	padding: 3px 12px 3px 9px;
	box-shadow: none;
	border: 1px solid rgba(0, 181, 29, .28);
}
.rec-score-badge.size-single svg { width: 15px; height: 15px; }
.rec-score-badge.size-single .rec-score-num { font-size: 18px; }

/* 卡片文字区 */
.rec-meta { padding: 6px 2px 0; min-width: 0; }
.rec-title {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--main-color-strong);
}
.rec-title a { color: inherit; }
.rec-sub {
	margin: 2px 0 0;
	color: var(--muted-color);
	font-size: 12px;
	line-height: 1.4;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* 板块头部的图标对齐分类板块：描边细，取加深档 */
.rec-section .tab-title .site-tag svg,
.rec-header-icon svg { color: var(--theme-deep); }

/* 类型归档页头：图标 + 三个类型胶囊切换 */
.rec-header-card h1 {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.rec-header-icon {
	display: inline-flex;
	align-items: center;
}
.rec-type-nav a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.rec-type-nav .site-tag svg {
	width: 14px;
	height: 14px;
	color: var(--theme-deep);
}

/* 详情页：海报 + 信息横幅 */
.rec-hero {
	display: flex;
	gap: 22px;
	align-items: flex-start;
	padding: 4px 0 8px;
}
.rec-hero-poster {
	flex: 0 0 auto;
	width: 176px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	border: 1px solid var(--main-border-color);
	background: var(--muted-bg-color-l);
	box-shadow: var(--shadow-sm);
}
.rec-hero-poster img,
.rec-hero-poster .rec-poster-ph {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
}
.rec-hero-info {
	flex: 1 1 auto;
	min-width: 0;
	padding-top: 2px;
}
.rec-hero-info .entry-title { margin-bottom: 10px; }
.rec-hero-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}
.rec-douban-line {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.rec-douban-label {
	color: var(--muted-color);
	font-size: 13px;
}
.rec-hero-chip {
	display: inline-flex;
	align-items: center;
	padding: 2px 11px;
	background: var(--muted-bg-color-l);
	border: 1px solid var(--main-border-color);
	border-radius: 20px;
	font-size: 12px;
	color: var(--muted-color2);
}
.rec-hero-chip a { color: var(--theme-deep); font-weight: 600; }
.rec-hero-excerpt {
	margin: 10px 0 0;
	color: var(--muted-color);
	font-size: 13px;
	line-height: 1.7;
}
.btn-douban {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	padding: 8px 18px;
	background: #00b51d;
	color: #fff;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 500;
}
.btn-douban svg { width: 15px; height: 15px; }
.btn-douban:hover { color: #fff; filter: brightness(1.06); }

/* 入口按钮组：在线阅读 / 去豆瓣 / 下载 / 看评论 */
.rec-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}
.rec-actions .btn-visit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 0;
	padding: 8px 16px;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 500;
	border: 1px solid var(--main-border-color);
	background: var(--main-bg-color);
	color: var(--main-color);
}
.rec-actions .btn-visit svg { width: 15px; height: 15px; }
.rec-actions .btn-visit:hover {
	border-color: var(--theme-color);
	color: var(--theme-color);
}
/* 「在线阅读」是首选动作，给主题色实底，视觉权重高于另外两个 */
.rec-actions .rec-btn-read {
	background: var(--theme-color);
	border-color: var(--theme-color);
	color: #fff;
}
.rec-actions .rec-btn-read:hover {
	background: var(--theme-color);
	border-color: var(--theme-color);
	color: #fff;
	filter: brightness(1.06);
}

/* 简介与目录 */
.rec-block-title {
	margin: 26px 0 10px;
	font-size: 16px;
	font-weight: 600;
}
.rec-intro {
	margin-top: 22px;
	padding: 18px 20px;
	background: var(--main-bg-color);
	border: 1px solid var(--main-border-color);
	border-radius: var(--main-radius);
}
.rec-intro .rec-block-title { margin-top: 0; }
.rec-intro p {
	margin: 0;
	color: var(--muted-color);
	font-size: 14px;
	line-height: 1.85;
	white-space: pre-line;
}

.rec-toc {
	margin-top: 22px;
	padding: 18px 20px;
	background: var(--main-bg-color);
	border: 1px solid var(--main-border-color);
	border-radius: var(--main-radius);
}
.rec-toc .rec-block-title { margin-top: 0; }
.rec-toc-fold summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	padding: 8px 0;
	color: var(--muted-color);
	font-size: 13px;
	list-style: none;
}
.rec-toc-fold summary::-webkit-details-marker { display: none; }
/* 三角指示器：展开时旋转 90°，不依赖外部图标 */
.rec-toc-toggle {
	width: 0;
	height: 0;
	border-left: 5px solid var(--muted-color3);
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	transition: transform .2s ease;
}
.rec-toc-fold[open] .rec-toc-toggle { transform: rotate(90deg); }
.rec-toc-fold summary:hover { color: var(--theme-color); }
.rec-toc-list {
	margin: 6px 0 0;
	padding-left: 22px;
	max-height: 420px;
	overflow-y: auto;
}
.rec-toc-list li {
	padding: 5px 0;
	color: var(--muted-color);
	font-size: 13px;
	line-height: 1.7;
	border-bottom: 1px dashed var(--main-border-color);
}
.rec-toc-list li:last-child { border-bottom: 0; }

/* 暗色：徽标底转深、绿色提亮，黄星不变 */
.io-black-mode .rec-poster { background: #1b222b; }
.io-black-mode .rec-score-badge {
	background: rgba(17, 23, 31, .88);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
.io-black-mode a.rec-score-badge:hover { background: #131a22; }
.io-black-mode .rec-score-badge.size-single { border-color: rgba(63, 191, 95, .36); }
.io-black-mode .rec-score-num { color: #3fbf5f; }
.io-black-mode .rec-hero-poster { background: #1b222b; }
.io-black-mode .btn-douban { background: #0a9c30; }
.io-black-mode .rec-actions .btn-visit {
	background: #1b222b;
	border-color: #2a3441;
	color: #cdd6e0;
}
.io-black-mode .rec-actions .rec-btn-read {
	background: #0a9c30;
	border-color: #0a9c30;
	color: #fff;
}
.io-black-mode .rec-intro,
.io-black-mode .rec-toc {
	background: #151b23;
	border-color: #2a3441;
}

/* ============================================================
   07 归档页 / 面包屑 / 分页
   ============================================================ */
.jzpix-page-wrap {
	max-width: var(--main-max-width);
	margin: 0 auto;
	padding: 16px var(--jzpix-gutter) 40px;
}
.jzpix-page-wrap.is-wide { max-width: var(--home-max-width); }

.jzpix-breadcrumb {
	margin-bottom: 12px;
	padding: 0 2px;
	color: var(--muted-color);
	font-size: 13px;
}
.jzpix-breadcrumb a { color: var(--muted-color); }
.jzpix-breadcrumb a:hover { color: var(--theme-color); }
.jzpix-breadcrumb .sep { margin: 0 6px; color: var(--muted-color3); }
.jzpix-breadcrumb .current { color: var(--main-color); }

.page-header-card {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
	padding: 18px 20px;
	background: var(--main-bg-color);
	border: 1px solid var(--main-border-color);
	border-radius: var(--main-radius);
}
.page-header-card h1 {
	margin: 0;
	font-size: 20px;
}
.page-header-card .count {
	padding: 2px 9px;
	background: var(--theme-color-bg);
	color: var(--theme-color);
	font-size: 12px;
	border-radius: var(--radius-pill);
}
.page-header-card .desc {
	width: 100%;
	margin: 0;
	color: var(--muted-color);
	font-size: 13px;
}

/* 子分类胶囊导航 */
.jzpix-subcat-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}
.jzpix-subcat-nav a {
	display: inline-block;
	padding: 5px 14px;
	background: var(--main-bg-color);
	border: 1px solid var(--main-border-color);
	border-radius: var(--radius-pill);
	color: var(--muted-color2);
	font-size: 13px;
}
.jzpix-subcat-nav a:hover,
.jzpix-subcat-nav .active > a {
	background: var(--theme-color);
	border-color: var(--theme-color);
	color: #fff;
}

.jzpix-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 22px;
}
.jzpix-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 12px;
	background: var(--main-bg-color);
	border: 1px solid var(--main-border-color);
	border-radius: var(--radius-sm);
	color: var(--main-color);
	font-size: 14px;
}
.jzpix-pagination .page-numbers:hover {
	border-color: var(--theme-color);
	color: var(--theme-color);
}
.jzpix-pagination .page-numbers.current {
	background: var(--theme-color);
	border-color: var(--theme-color);
	color: #fff;
	font-weight: 600;
}
.jzpix-pagination .dots { border: 0; background: transparent; }

/* 搜索结果里的文章命中项：给一张和站点卡片同语言的外壳
   （search.php 里文章用的是 content-post.php，不带 .posts-list 容器） */
.search-post-hit {
	grid-column: 1 / -1;
	padding: 16px;
	background: var(--main-bg-color);
	border: 1px solid var(--main-border-color);
	border-radius: var(--main-radius);
}
.search-post-hit .posts-item { background: none; border: 0; padding: 0; }
.search-post-hit .item-title { font-size: 16px; }
.search-post-hit .item-title a { color: var(--main-color-strong); }

/* 加载更多 */
.jzpix-loadmore-wrap { margin-top: 16px; text-align: center; }
.jzpix-loadmore {
	padding: 8px 26px;
	background: var(--main-bg-color);
	border: 1px solid var(--main-border-color);
	border-radius: var(--radius-pill);
	color: var(--main-color);
	font-size: 14px;
}
.jzpix-loadmore:hover {
	border-color: var(--theme-color);
	color: var(--theme-color);
}
.jzpix-loadmore[disabled] { opacity: .6; cursor: default; }

/* ============================================================
   08 文章与页面（含侧边栏）
   ============================================================ */
.jzpix-layout {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	max-width: var(--main-max-width);
	margin: 0 auto;
	padding: 16px var(--jzpix-gutter) 40px;
}
.jzpix-layout-main { flex: 1 1 auto; min-width: 0; }

/* 已在外层容器内使用时去掉重复的内边距与限宽 */
.jzpix-layout.is-embedded {
	max-width: none;
	padding: 0;
}
.jzpix-layout-aside {
	flex: 0 0 var(--main-aside-basis-width);
	width: var(--main-aside-basis-width);
	max-width: 100%;
}

/*
 * 跟随滚动
 *
 * 必须用 min-width 而不是 max-width：窄屏那条 `.jzpix-layout-aside { position: static }`
 * 写在文件更后面的响应式区，同优先级下靠后者胜出，能正确取消粘性；
 * 但反过来桌面这里要是也写 max-width，就没法压过移动端那条规则。
 * 另外这条要和 `.jzpix-layout-aside` 同优先级且更靠后，否则 flex 覆盖不回来。
 */
@media (min-width: 992px) {
	.aside-sticky .jzpix-layout-aside,
	.jzpix-layout-aside.is-sticky {
		position: sticky;
		top: calc(var(--main-nav-hight) + 16px);
		align-self: flex-start;
	}
}

/*
 * 侧边栏在左侧：用 order 把 aside 排到 main 前面，
 * 而不是靠 flex-direction: row-reverse —— 反向后 tabindex 与视觉顺序会错位，
 * 键盘用户按 Tab 会先跳到正文再跳到侧边栏，跟看到的顺序相反。
 */
.sidebar-left .jzpix-layout-aside { order: -1; }

.sidebar_no .jzpix-layout { max-width: var(--home-max-width); }

.post-single,
.page-single {
	padding: 24px;
	background: var(--main-bg-color);
	border: 1px solid var(--main-border-color);
	border-radius: var(--main-radius);
}
.entry-header { margin-bottom: 18px; }
.entry-title {
	margin: 0 0 10px;
	font-size: 26px;
	line-height: 1.35;
}
.entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	color: var(--muted-color);
	font-size: 13px;
}
.entry-meta a { color: var(--muted-color); }
.entry-meta a:hover { color: var(--theme-color); }

.entry-thumbnail {
	margin-bottom: 20px;
	border-radius: var(--main-radius);
	overflow: hidden;
}
.entry-thumbnail img { display: block; width: 100%; }
/*
 * 外链缩略图（2.2.0 起）
 * 图来自站外，对方防盗链、图片被删都可能加载失败。垫一块主题自带的
 * 浅底（深色模式自动换深），失败了也不至于是刺眼的白块或破图占位。
 */
.jzpix-external-thumb {
	background: var(--muted-bg-color-l);
}

.entry-content {
	font-size: 15px;
	line-height: 1.85;
	color: var(--main-color);
	word-break: break-word;
}
.entry-content h2 { margin-top: 1.6em; font-size: 20px; }
.entry-content h3 { margin-top: 1.4em; font-size: 17px; }
.entry-content a { color: var(--theme-color); text-decoration: underline; text-underline-offset: 3px; }
.entry-content img { border-radius: var(--radius-sm); }
.entry-content blockquote {
	margin: 1.4em 0;
	padding: 12px 18px;
	background: var(--muted-bg-color-l);
	border-left: 3px solid var(--theme-color);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	color: var(--muted-color2);
}
.entry-content code {
	padding: 2px 6px;
	background: var(--muted-bg-color-l);
	border-radius: 4px;
	font-family: "JetBrains Mono", Consolas, Monaco, monospace;
	font-size: .92em;
	color: #b83280;
}
.entry-content pre {
	padding: 16px;
	background: #16212a;
	color: #e4eaea;
	border-radius: var(--radius-sm);
	overflow: auto;
}
.entry-content pre code { background: transparent; color: inherit; padding: 0; }
.entry-content table {
	width: 100%;
	margin: 1.2em 0;
	border-collapse: collapse;
	font-size: 14px;
}
.entry-content th,
.entry-content td {
	padding: 9px 12px;
	border: 1px solid var(--main-border-color);
}
.entry-content th { background: var(--muted-bg-color-l); font-weight: 600; }

/* 文章页底的链接卡片 */
.entry-site-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
	padding: 16px;
	background: var(--muted-bg-color-l);
	border-radius: var(--main-radius);
}
.entry-site-bar .site-logo {
	width: 52px;
	height: 52px;
	border-radius: 13px;
	overflow: hidden;
	background: #fff;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.entry-site-bar .site-logo img { width: 34px; height: 34px; object-fit: contain; }
/* 内置图标（SVG）在详情页也占同样的位置，颜色跟主色一致。 */
.entry-site-bar .site-logo .sites-icon-svg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: var(--theme-deep);
}
.entry-site-bar .site-logo .sites-icon-svg svg { width: 100%; height: 100%; display: block; }
.entry-site-bar .site-meta { min-width: 0; flex: 1 1 auto; }
.entry-site-bar .site-meta strong { display: block; font-size: 15px; }
.entry-site-bar .site-meta span { color: var(--muted-color); font-size: 12px; }
.entry-site-bar .btn-visit {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 18px;
	background: var(--theme-color);
	color: #fff;
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 500;
}
.entry-site-bar .btn-visit:hover { color: #fff; filter: brightness(1.06); }

/* 标签 */
.entry-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid var(--main-border-color);
}
.entry-tags a {
	padding: 3px 12px;
	background: var(--muted-bg-color-l);
	border-radius: var(--radius-pill);
	color: var(--muted-color2);
	font-size: 12px;
}
.entry-tags a:hover { background: var(--theme-color-bg); color: var(--theme-color); }

/* 上下篇 */
.post-nav {
	display: flex;
	gap: 12px;
	margin-top: 16px;
}
/* 只有上一篇或只有下一篇时，让它占满整行，不要留半张空卡片 */
.post-nav > a {
	flex: 1 1 0;
	min-width: 0;
}
.post-nav > span:empty { display: none; }
.post-nav a {
	display: block;
	padding: 14px 16px;
	background: var(--main-bg-color);
	border: 1px solid var(--main-border-color);
	border-radius: var(--main-radius);
}
.post-nav a:hover { border-color: var(--theme-color); }
.post-nav .label {
	display: block;
	margin-bottom: 4px;
	color: var(--muted-color);
	font-size: 12px;
}
.post-nav .title { font-size: 14px; font-weight: 600; }
.post-nav .next { text-align: right; }

/* 侧边栏小工具 */
.jzpix-layout-aside .widget {
	margin-bottom: var(--aside-gap);
	padding: var(--aside-padding);
	background: var(--main-bg-color);
	border: 1px solid var(--main-border-color);
	border-radius: var(--aside-radius);
}
.jzpix-layout-aside .widget:last-child { margin-bottom: 0; }

.widget-title {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.4;
	color: var(--main-color-strong);
}

/*
 * 标题三种样式。用 body 上的 aside-title-* 类切换，
 * 这样「外观 → 侧边栏设置」里换样式不用改 DOM。
 * 默认（无类）走底部细线，与旧版保持一致。
 */
.widget-title {
	padding-bottom: 10px;
	border-bottom: 1px solid var(--main-border-color);
}
.aside-title-bar .jzpix-layout-aside .widget-title {
	position: relative;
	padding: 0 0 0 11px;
	border-bottom: 0;
}
.aside-title-bar .jzpix-layout-aside .widget-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 15px;
	border-radius: 2px;
	background: var(--theme-color);
}
.aside-title-plain .jzpix-layout-aside .widget-title {
	margin-bottom: 10px;
	padding-bottom: 0;
	border-bottom: 0;
}

/* 小工具区里被拖进来的第三方小工具，标题带 <span> 包裹，统一压平内边距 */
.widget-title span { display: inline; }

.widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.widget ul li {
	padding: 7px 0;
	border-bottom: 1px dashed var(--main-border-color);
	font-size: 14px;
}
.widget ul li:last-child { border-bottom: 0; }
.widget ul li a { display: flex; justify-content: space-between; gap: 10px; }
.widget .count { color: var(--muted-color3); font-size: 12px; }

/* 侧边栏里的图片、表格一类宽内容不许把栏撑破 */
.jzpix-layout-aside .widget img,
.jzpix-layout-aside .widget iframe,
.jzpix-layout-aside .widget table { max-width: 100%; }
.jzpix-layout-aside .widget iframe { display: block; }

/* 文章列表 */
.posts-list .posts-item {
	display: flex;
	gap: 14px;
	padding: 16px;
	background: var(--main-bg-color);
	border: 1px solid var(--main-border-color);
	border-radius: var(--main-radius);
}
.posts-list .posts-item + .posts-item { margin-top: 12px; }
.posts-list .item-media {
	width: 168px;
	height: 106px;
	flex-shrink: 0;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--muted-bg-color-l);
}
.posts-list .item-media img { width: 100%; height: 100%; object-fit: cover; }
.posts-list .item-body { min-width: 0; flex: 1 1 auto; }
.posts-list .item-title {
	margin: 0 0 6px;
	font-size: 16px;
	line-height: 1.45;
}
.posts-list .item-desc {
	margin: 0 0 8px;
	color: var(--muted-color2);
	font-size: 13px;
	line-height: 1.6;
}
.posts-list .item-meta {
	display: flex;
	gap: 12px;
	color: var(--muted-color3);
	font-size: 12px;
}

/* ============================================================
   09 评论
   ============================================================ */
.comments-area {
	margin-top: 16px;
	padding: 24px;
	background: var(--main-bg-color);
	border: 1px solid var(--main-border-color);
	border-radius: var(--main-radius);
}
.comments-title,
.comment-reply-title {
	margin: 0 0 16px;
	font-size: 17px;
}
.comment-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.comment-list .children {
	margin: 0;
	padding-left: 22px;
	list-style: none;
}
.comment-body {
	padding: 16px 0;
	border-top: 1px solid var(--main-border-color);
}
.comment-list > li:first-child > .comment-body { border-top: 0; }
.comment-author {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
}
.comment-author img { border-radius: 50%; }
.comment-metadata { margin-bottom: 8px; color: var(--muted-color3); font-size: 12px; }
.comment-metadata a { color: var(--muted-color3); }
.comment-content { font-size: 14px; line-height: 1.75; }
.reply { margin-top: 6px; font-size: 13px; }
.comment-form p { margin-bottom: 12px; }
.comment-form label { display: block; margin-bottom: 5px; font-size: 13px; }
.comment-form input[type=text],
.comment-form input[type=email],
.comment-form input[type=url],
.comment-form textarea { width: 100%; }
.comment-form .submit {
	padding: 9px 26px;
	background: var(--theme-color);
	border: 0;
	border-radius: var(--radius-sm);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
}
.comment-form .submit:hover { filter: brightness(1.06); }

/* ============================================================
   10 页脚 / 底部 Dock / 返回顶部
   ============================================================ */
.main-footer {
	margin-top: 24px;
	background: var(--main-bg-color);
	border-top: 1px solid var(--main-border-color);
}
.container-footer {
	max-width: var(--home-max-width);
	margin: 0 auto;
	padding: 0 var(--jzpix-gutter);
}
.footer-widgets {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	padding: 28px 0;
	border-bottom: 1px solid var(--main-border-color);
}

/*
 * 「Footer 盒子布局」开（默认）时，页脚每个小工具是一个独立盒子：
 * 有浅底、有描边、有内边距。关掉时由 04.1 那段的
 * .jzpix-no-footer-box 规则整组撤销，退回通栏文字。
 */
.footer-widgets .widget {
	padding: 16px 18px;
	background: var(--muted-bg-color-l);
	border: 1px solid var(--main-border-color);
	border-radius: var(--main-radius);
}

.footer-widgets .widget-title { font-size: 14px; border-bottom: 0; padding-bottom: 0; }

.footer-copyright {
	padding: 20px 0 24px;
	color: var(--muted-color);
	font-size: 13px;
	line-height: 1.9;
}
.footer-copyright a { color: var(--muted-color2); }
.footer-copyright a:hover { color: var(--theme-color); }

.friend-link-title {
	margin: 0 0 8px;
	color: var(--main-color);
	font-size: 13px;
	font-weight: 600;
}
.friend-link {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin-bottom: 14px;
}
.footer-tools {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 10px;
	font-size: 13px;
}
.footer-icp { color: var(--muted-color3); }

/* 返回顶部 —— 桌面端要避开底部 Dock，所以抬到 Dock 上方 */
.jzpix-gotop {
	position: fixed;
	right: 22px;
	bottom: 108px;
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	background: var(--main-bg-color);
	border: 1px solid var(--main-border-color);
	border-radius: 50%;
	color: var(--muted-color2);
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all .25s ease;
}
.jzpix-gotop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.jzpix-gotop:hover {
	background: var(--theme-color);
	border-color: var(--theme-color);
	color: #fff;
}
.jzpix-gotop svg { width: 18px; height: 18px; }

/* Dock —— 底部横向居中，圆角方形图标平铺（参考 macOS Launchpad） */
.jzpix-dock {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 18px;
	z-index: 900;
	display: flex;
	justify-content: center;
	/* 整条 fixed 通栏，但只有内部长条可点，避免挡住页面下方的内容 */
	pointer-events: none;
	transition: transform .3s cubic-bezier(.2, .8, .3, 1), opacity .3s ease;
}
.jzpix-dock.is-left { justify-content: flex-start; padding-left: 24px; }
.jzpix-dock.is-right { justify-content: flex-end; padding-right: 24px; }

/*
 * 滚动隐藏：向下滑时收起，向上滑时回来。
 * is-dock-hidden 由 assets/js/main.js 的 initDock() 按滚动方向切换。
 * 收起时保留一条窄边可点，避免用户「找不到它了」——
 * 鼠标移到窗口底部会自动唤出（见下面 :hover 那条兜底）。
 */
.jzpix-dock-display-scroll .jzpix-dock.is-dock-hidden {
	transform: translateY(calc(100% + 24px));
	opacity: 0;
}
.jzpix-dock-display-scroll .jzpix-dock.is-dock-hidden:hover,
.jzpix-dock-display-scroll .jzpix-dock.is-dock-hidden:focus-within {
	transform: translateY(0);
	opacity: 1;
}
/* 已经在页面最底部时不隐藏，否则用户看不到任何东西 */
.jzpix-dock-display-scroll .jzpix-dock.is-dock-hidden.at-bottom {
	transform: translateY(0);
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.jzpix-dock { transition: none; }
}

.jzpix-dock-inner {
	display: flex;
	align-items: center;
	gap: var(--dock-gap, 12px);
	padding: 10px var(--dock-pad, 14px);
	pointer-events: auto;

	/* 毛玻璃长条：半透明底 + 模糊 + 细描边，图标浮在上面 */
	background: var(--dock-bg, rgba(255, 255, 255, .72));
	-webkit-backdrop-filter: blur(18px) saturate(180%);
	backdrop-filter: blur(18px) saturate(180%);
	border: 1px solid var(--dock-border, rgba(255, 255, 255, .6));
	border-radius: var(--dock-radius, 22px);
	box-shadow: 0 8px 28px rgba(16, 24, 40, .14), 0 2px 6px rgba(16, 24, 40, .06);
	max-width: calc(100vw - 32px);
	overflow-x: auto;
	overflow-y: hidden;
	/* 横向滚动条在触屏上会露出难看的灰线 */
	scrollbar-width: none;
}
.jzpix-dock-inner::-webkit-scrollbar { display: none; }

/* 图标之间的竖分隔线，跟参考图一样左侧留一组、右侧留一组 */
.jzpix-dock .dock-sep {
	flex: 0 0 auto;
	width: 1px;
	height: var(--dock-icon, 52px);
	margin: 0 4px;
	background: var(--dock-sep, rgba(31, 34, 38, .18));
}

.jzpix-dock .dock-item {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: var(--dock-icon, 52px);
	height: var(--dock-icon, 52px);
	padding: 0;
	background: var(--main-bg-color);
	border: 0;
	border-radius: calc(var(--dock-icon, 52px) * .24);
	color: var(--main-color-strong);
	cursor: pointer;
	text-decoration: none;
	box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
	transition: transform .18s cubic-bezier(.2, .7, .3, 1), box-shadow .18s ease;
}
.jzpix-dock .dock-item:hover,
.jzpix-dock .dock-item:focus-visible {
	/* 上浮 + 轻微放大，模仿 macOS Dock 的悬停反馈 */
	transform: translateY(-6px) scale(1.09);
	box-shadow: 0 10px 22px rgba(16, 24, 40, .2);
	z-index: 2;
}
.jzpix-dock .dock-item:active { transform: translateY(-2px) scale(1.02); }
.jzpix-dock .dock-item:focus-visible {
	outline: 2px solid var(--theme-color);
	outline-offset: 2px;
}

.jzpix-dock .dock-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	overflow: hidden;
}
.jzpix-dock .dock-icon img {
	width: 60%;
	height: 60%;
	object-fit: contain;
}
.jzpix-dock .dock-icon svg {
	width: 52%;
	height: 52%;
}
/* 没有图片也没配内置图标时，退成主题色方块也不会是空白 */
.jzpix-dock .dock-icon:empty::before {
	content: "";
	width: 46%;
	height: 46%;
	border-radius: 30%;
	background: var(--theme-color);
	opacity: .85;
}

/* 悬停气泡提示：鼠标停在图标上时弹出名称 */
.jzpix-dock .dock-tip {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 10px);
	padding: 5px 10px;
	background: rgba(31, 34, 38, .9);
	color: #fff;
	font-size: 12px;
	line-height: 1.35;
	white-space: nowrap;
	border-radius: var(--radius-xs);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 4px);
	transition: all .18s ease;
	pointer-events: none;
}
.jzpix-dock .dock-item:hover .dock-tip,
.jzpix-dock .dock-item:focus-visible .dock-tip {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

/* 常驻文字标签（在自定义器里开） */
.jzpix-dock.has-label .dock-item {
	width: auto;
	min-width: var(--dock-icon, 52px);
	height: auto;
	min-height: var(--dock-icon, 52px);
	padding: 7px 10px 8px;
}
.jzpix-dock.has-label .dock-item .dock-tip { display: none; }
.jzpix-dock .dock-label {
	max-width: 76px;
	font-size: 11px;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--muted-color2);
}

/* 尺寸档位：由自定义器写入类名，避免内联 style 被 CSP 拦掉 */
.jzpix-dock-size-36 { --dock-icon: 36px; --dock-radius: 16px; }
.jzpix-dock-size-44 { --dock-icon: 44px; --dock-radius: 18px; }
.jzpix-dock-size-52 { --dock-icon: 52px; --dock-radius: 22px; }
.jzpix-dock-size-60 { --dock-icon: 60px; --dock-radius: 24px; }
.jzpix-dock-size-68 { --dock-icon: 68px; --dock-radius: 26px; }
.jzpix-dock-size-76 { --dock-icon: 76px; --dock-radius: 28px; }

.jzpix-dock-gap-4 { --dock-gap: 4px; }
.jzpix-dock-gap-8 { --dock-gap: 8px; }
.jzpix-dock-gap-12 { --dock-gap: 12px; }
.jzpix-dock-gap-16 { --dock-gap: 16px; }
.jzpix-dock-gap-20 { --dock-gap: 20px; }
.jzpix-dock-gap-28 { --dock-gap: 28px; }

/* 轻提示 —— 停在 Dock 上方，不要被 Dock 遮住 */
.jzpix-toast {
	position: fixed;
	left: 50%;
	bottom: 108px;
	z-index: 1400;
	padding: 9px 20px;
	background: rgba(31, 34, 38, .92);
	color: #fff;
	font-size: 13px;
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 10px);
	transition: all .24s ease;
}
.jzpix-toast.is-show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ============================================================
   11 移动端抽屉
   ============================================================ */
.jzpix-mobile-mask {
	position: fixed;
	inset: 0;
	z-index: 1200;
	background: rgba(0, 0, 0, .42);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s;
}
.jzpix-mobile-mask.is-open { opacity: 1; visibility: visible; }

.jzpix-mobile-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1201;
	width: 280px;
	max-width: 82vw;
	padding: 18px;
	background: var(--main-bg-color);
	box-shadow: var(--shadow-lg);
	transform: translateX(100%);
	transition: transform .28s cubic-bezier(.4, 0, .2, 1);
	overflow-y: auto;
}
.jzpix-mobile-drawer.is-open { transform: translateX(0); }
.jzpix-mobile-drawer .drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}
.jzpix-mobile-drawer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.jzpix-mobile-drawer li { list-style: none; }
.jzpix-mobile-drawer a {
	display: block;
	padding: 11px 12px;
	border-radius: var(--radius-sm);
	font-size: 15px;
}
.jzpix-mobile-drawer a:hover { background: var(--muted-bg-color-l); }
.jzpix-mobile-drawer .sub-menu { padding-left: 14px; }
.jzpix-mobile-drawer .sub-menu a { font-size: 14px; color: var(--muted-color2); }

/* ============================================================
   12 暗色模式
   ============================================================ */
.io-black-mode {
	/*
	 * 暗色下主色要**提亮**，不能在深底上用 #6aabe0 —— 那还是偏暗。
	 * 这里的三个派生档同样由 setup.php 按主色算好注入，这是兜底值。
	 */
	--theme-color: #7cbcec;
	--theme-color-rgb: 124, 188, 236;
	--theme-color-bg: rgba(124, 188, 236, .16);
	--theme-deep: #a5d4f4;
	--theme-light: #9ec9ef;
	--hover-color: #a5d4f4;
	--accent-blue: #7cbcec;
	--accent-soft: #a5d4f4;

	--main-color: #d1d5db;
	--main-color-strong: #f3f4f6;
	--muted-color: #8b9096;
	--muted-color2: #b6bbc2;
	--muted-color3: #737980;
	--main-bg-color: #1f2937;
	--body-bg-color: #12161d;
	--muted-bg-color: #2a323e;
	--muted-bg-color-l: #262e3a;
	--input-bg-color: #262e3a;
	--main-border-color: #2f3a45;
	--main-border-hover: #3f4b57;
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
	--shadow-md: 0 6px 20px rgba(0, 0, 0, .45);
	--shadow-lg: 0 12px 32px rgba(0, 0, 0, .55);
	color-scheme: dark;
}
.io-black-mode .entry-content pre { background: #0f1418; }
.io-black-mode .entry-content code { color: var(--accent-soft); }
.io-black-mode .search-form { box-shadow: 0 6px 22px rgba(0, 0, 0, .4); }
.io-black-mode .search-form .search-key { background: var(--main-bg-color); }
.io-black-mode .jzpix-gotop { border-color: var(--main-border-color); }
.io-black-mode .jzpix-dock {
	--dock-bg: rgba(31, 41, 55, .74);
	--dock-border: rgba(255, 255, 255, .1);
	--dock-sep: rgba(255, 255, 255, .18);
}
.io-black-mode .jzpix-dock .dock-item {
	background: #2a323e;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.io-black-mode .jzpix-dock .dock-item:hover { box-shadow: 0 10px 22px rgba(0, 0, 0, .55); }
.io-black-mode .jzpix-mobile-mask { background: rgba(0, 0, 0, .6); }
/*
 * 侧边栏整体靠变量自动适配，唯一需要补的是「左侧竖条」标题 ——
 * 暗色下 --theme-color 已经换成更亮的青绿，这里不用再覆写颜色，
 * 只把虚线分隔调暗一档，免得在深底上太抢眼。
 */
.io-black-mode .jzpix-layout-aside .widget ul li { border-bottom-color: rgba(255, 255, 255, .08); }
.io-black-mode .jzpix-layout-aside .widget-title { border-bottom-color: var(--main-border-color); }
/* 暗色下斜切高亮块加一档亮度，保证在深底上可见 */
.io-black-mode .slider-tab .slider-li::before {
	background: linear-gradient(
		270deg,
		rgba(var(--theme-color-rgb), .30),
		rgba(var(--theme-color-rgb), .14) 45%,
		rgba(var(--theme-color-rgb), 0)
	);
}

/* ============================================================
   13 响应式
   ============================================================ */
@media (min-width: 576px) {
	.jzpix-sites-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
	.jzpix-sites-grid { grid-template-columns: repeat(var(--jzpix-cols-md), minmax(0, 1fr)); }
	.jzpix-page-wrap .jzpix-sites-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.rec-poster-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
	.jzpix-sites-grid { grid-template-columns: repeat(var(--jzpix-cols-lg), minmax(0, 1fr)); }
	.jzpix-page-wrap .jzpix-sites-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.rec-poster-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.rec-poster-grid.is-archive { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/*
 * 首页主栏宽度有限，海报太大反而不像「一张海报」。
 * 从 1200 起给首页板块限一个更高的列数，归档页再高一档。
 */
@media (min-width: 1200px) {
	.jzpix-sites-grid { grid-template-columns: repeat(var(--jzpix-cols-xl), minmax(0, 1fr)); }
	.jzpix-page-wrap .jzpix-sites-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.rec-poster-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.rec-poster-grid.is-archive { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

@media (min-width: 1400px) {
	.jzpix-sites-grid { grid-template-columns: repeat(var(--jzpix-cols-xxl), minmax(0, 1fr)); }
	.jzpix-page-wrap .jzpix-sites-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
	.rec-poster-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
	.rec-poster-grid.is-archive { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
	.navbar-header-menu { display: none; }
	.navbar-header-quick { display: none !important; }
	.navbar-toggler { display: inline-flex; }

	/* 详情页海报横幅：窄屏收窄海报，信息区换行铺开 */
	.rec-hero { gap: 14px; }
	.rec-hero-poster { width: 118px; }
	.rec-hero-info .entry-title { font-size: 20px; }
	/*
	 * 入口按钮窄屏整行铺开，不做两列。
	 * 窄屏时按钮组被海报挤到只剩约 190px 宽，两列的话每个不到 90px，
	 * 「在线阅读」这种四字文案 + 图标放不下（会折行或截断），
	 * 所以干脆一行一个，换来 190×41 的完整触控目标与不折行的文案。
	 */
	.rec-actions { gap: 8px; }
	.rec-actions .btn-visit {
		width: 100%;
		justify-content: center;
		padding: 9px 8px;
		font-size: 13px;
		white-space: nowrap;
		letter-spacing: -0.2px;
	}
	.rec-actions .btn-visit svg { flex: none; width: 14px; height: 14px; }
	/* 触控目标不低于 36px */
	.rec-actions .btn-visit { min-height: 38px; }
	.rec-toc-list { max-height: 300px; }

	.jzpix-layout { flex-direction: column; }
	/*
	 * 窄屏一律取消粘性。
	 * 这里用 !important 压掉桌面那个 @media (min-width: 992px) 块 ——
	 * 两个媒体查询区间不重叠，正常情况下不会同时命中，
	 * 但自定义器实时预览会直接改 body 上的类，加个保险更稳。
	 */
	.jzpix-layout-aside {
		position: static !important;
		top: auto;
		width: 100%;
		flex: 0 0 auto;
	}
	/* 窄屏堆叠后 order 没有意义，清掉免得视觉顺序反了 */
	.sidebar-left .jzpix-layout-aside { order: 0; }
	/* 移动端选「直接隐藏」时整栏不显示 */
	.aside-mobile-hide .jzpix-layout-aside { display: none; }
	/* Dock 在窄屏收小一圈，但仍然保留 —— 横向居中且有滚动兜底，
	   不像旧版竖排那样会挡住内容。 */
	.jzpix-dock { bottom: 12px; }
	.jzpix-dock-inner {
		padding: 8px 10px;
		gap: 8px;
		border-radius: 18px;
	}
	.jzpix-dock .dock-item {
		width: max(var(--dock-icon, 52px), 40px);
		height: max(var(--dock-icon, 52px), 40px);
	}
	.footer-widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	:root {
		--main-nav-hight: 56px;
		--main-radius: 10px;
		--jzpix-gutter: 10px;
	}

	.header-banner .search-container {
		/*
		 * 移动端同样尊重后台「搜索区高度」设置，180px 只作为下限：
		 * 后台调到 60% 时不该把手机上的横幅压得比这还扁。
		 */
		min-height: max(180px, var(--search-min-height));
		padding: 22px 12px 26px;
	}
	.banner-copy h2 { font-size: 20px; }
	.banner-copy p { font-size: 13px; }

	/*
	 * iOS Safari 在输入框字号小于 16px 时，聚焦会强制放大整个页面且不还原，
	 * 所以移动端所有输入类控件统一用 16px。
	 */
	.search-form .search-key,
	.jzpix-search-inline .search-key,
	.comment-form input[type=text],
	.comment-form input[type=email],
	.comment-form input[type=url],
	.comment-form textarea {
		font-size: 16px;
	}
	.search-form .search-key,
	.jzpix-search-inline .search-key,
	.comment-form input[type=text],
	.comment-form input[type=email],
	.comment-form input[type=url] {
		height: 46px;
	}
	.comment-form textarea { min-height: 116px; }

	/* 触控目标不小于 40px */
	.btn-icon { width: 40px; height: 40px; }
	.jzpix-gotop { width: 44px; height: 44px; }

	/* 分类胶囊在窄屏靠手指点，撑到 36px 高 */
	.jzpix-subcat-nav { gap: 6px; }
	.jzpix-subcat-nav a {
		display: inline-flex;
		align-items: center;
		min-height: 36px;
		padding: 0 15px;
	}

	/* 卡片的「直达」按钮靠 hover 出现，触屏上永远不显示还占位，直接隐藏
	   （整张卡片本身就是可点链接，直达用不上） */
	.sites-item .sites-tags { display: none; }

	.content-card { padding: 12px; }
	.content-card + .content-card { margin-top: 12px; }

	/* 移动端：标题与「查看更多」同行，二级 Tab 折到下一行 */
	.io-slider-tab {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		padding-right: 0;
	}
	.io-slider-tab .tab-title { order: 1; }
	.io-slider-tab .tab-more {
		order: 2;
		position: static;
		transform: none;
		margin-left: auto;
	}
	.io-slider-tab .slider-tab {
		order: 3;
		flex-basis: 100%;
		margin-top: 8px;
	}
	/* 触屏靠手指点，撑到 36px 高 */
	.slider-tab .slider-li {
		display: inline-flex;
		align-items: center;
		min-height: 36px;
		padding: 0 14px;
	}
	.tab-title::after { display: none; }

	.jzpix-sites-grid { gap: 8px; }
	.sites-item .sites-body { padding: 7px 8px; }
	.sites-item .item-media { width: 34px; height: 34px; }
	.sites-item .sites-icon { width: 24px; height: 24px; }
	.sites-item .item-title { font-size: 13.5px; }

	.posts-list .posts-item { flex-direction: column; }
	.posts-list .item-media { width: 100%; height: 160px; }

	.post-single, .page-single, .comments-area { padding: 16px; }
	.entry-title { font-size: 20px; }

	.post-nav { grid-template-columns: 1fr; }
	.post-nav .next { text-align: left; }

	.footer-widgets { grid-template-columns: 1fr; gap: 18px; }

	.jzpix-gotop { right: 14px; bottom: 86px; }
	/* Dock 占了底部，返回顶部要抬到它上面，否则会压在一起 */
	.jzpix-toast { bottom: 150px; }
	.jzpix-mobile-drawer { width: 268px; }
	.jzpix-page-header-card { padding: 14px; }
}

/* 打印 */
@media print {
	.main-header, .main-footer, .jzpix-gotop, .jzpix-dock, .search-container { display: none !important; }
	body { background: #fff; }
	.content-card, .post-single { border: 0; padding: 0; }
}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================
   20 我的导航（用户自己添加网址）
   ------------------------------------------------------------
   对应参考包 azhai 的私人导航，但补上了「置顶到首页最前面」。
   命名统一用 jxl- 前缀，避免和既有的 jzpix- 组件串味。
   ============================================================ */

.navbar-account {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-right: 8px;
}

.navbar-account .account-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 10px;
	border-radius: var(--radius-pill);
	color: var(--muted-color2);
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;
	transition: color .18s, background-color .18s;
}

.navbar-account .account-link:hover {
	color: var(--theme-deep);
	background: var(--theme-color-bg);
}

.navbar-account .account-link svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}

.navbar-account .account-primary {
	color: var(--theme-deep);
	background: var(--theme-color-bg);
	font-weight: 500;
}

.navbar-account .account-sub {
	color: var(--muted-color3);
	font-size: 12px;
}

.navbar-account .account-sep {
	margin: 0 2px;
	opacity: .6;
}


/* ---------- 首页置顶区块 ---------- */

.jxl-mynav-home {
	border: 1px solid var(--main-border-color);
	background: var(--main-bg-color);
}

.jxl-mynav-home-tip {
	flex: 1 1 auto;
	margin: 0 12px;
	color: var(--muted-color);
	font-size: 12px;
}

.jxl-mynav-home-grid {
	margin-top: 4px;
}

.jxl-mynav-card {
	position: relative;
	border-color: var(--theme-color);
	box-shadow: 0 0 0 1px var(--theme-color) inset;
}

.jxl-mynav-card-pin {
	display: inline-flex;
	align-items: center;
	margin-left: 4px;
	color: var(--theme-deep);
	vertical-align: middle;
}

.jxl-mynav-card-remove {
	position: absolute;
	top: 6px;
	right: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: var(--radius-pill);
	color: var(--muted-color3);
	background: var(--muted-bg-color-l);
	opacity: 0;
	transition: opacity .18s, color .18s;
}

.jxl-mynav-card:hover .jxl-mynav-card-remove {
	opacity: 1;
}

.jxl-mynav-card-remove:hover {
	color: var(--theme-deep);
	background: var(--theme-color-bg);
}

.jxl-mynav-promo {
	padding: 20px 4px 8px;
	text-align: center;
}

.jxl-mynav-promo p {
	margin: 0 auto 14px;
	max-width: 460px;
	color: var(--muted-color2);
	font-size: 13px;
	line-height: 1.7;
}

.jxl-mynav-promo-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}


/* ---------- 游客「自留地」：未登录也能加一行 ---------- */

.jxl-mynav-alert {
	margin-bottom: 14px;
}

.jxl-guest-row {
	margin-top: 4px;
}

/*
 * 游客那一行只有一条，用网格会把它缩成很窄的一格（桌面端 7 列）。
 * 所以不套 .jzpix-sites-grid，而是单独一条通栏，卡片内部再靠
 * .sites-body 的既有样式撑开。宽度上限和卡片观感对齐即可。
 */
.jxl-guest-row .jxl-mynav-card-single {
	max-width: 420px;
}

.jxl-guest-row-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	padding-right: 10px;
	flex: 0 0 auto;
}

/*
 * 「本机保存」标记。
 *
 * 用中性灰而不是主题色 —— 它不是「已置顶」那种积极状态，
 * 而是提示「这东西随时可能没」，视觉上不该比置顶更抢眼。
 *
 * display 必须显式写 inline-block：主题的 base 重置里有
 * `span { display: block }` 之类的规则，不覆盖的话这个标记会独占一行，
 * 把标题挤到下面去。同目录的 .jxl-mynav-card-pin 用的是 inline-flex，
 * 走的也是同一条思路。
 */
.jxl-mynav-badge-guest {
	display: inline-block;
	flex-shrink: 0;
	padding: 0 5px;
	border-radius: var(--radius-xs);
	color: var(--muted-color2);
	background: var(--muted-bg-color-l);
	font-size: 10px;
	font-weight: 500;
	line-height: 15px;
	white-space: nowrap;
	vertical-align: middle;
}

.jxl-guest-form-wrap {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px dashed var(--main-border-color);
	max-width: 620px;
}

.jxl-guest-form-wrap[hidden] {
	display: none;
}

.jxl-guest-fields {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: 14px;
}

.jxl-guest-form .jxl-guest-more {
	margin-top: 4px;
}

.jxl-guest-form .jxl-guest-more summary {
	color: var(--muted-color2);
	font-size: 12px;
	cursor: pointer;
	list-style: none;
}

.jxl-guest-form .jxl-guest-more summary::-webkit-details-marker {
	display: none;
}

.jxl-guest-form .jxl-guest-more summary::before {
	content: '＋ ';
	color: var(--theme-deep);
}

.jxl-guest-form .jxl-guest-more[open] summary::before {
	content: '－ ';
}

.jxl-guest-form .jxl-guest-more .jxl-field {
	margin-top: 12px;
}

.jxl-guest-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.jxl-guest-hint {
	margin: 14px 0 0;
	color: var(--muted-color3);
	font-size: 12px;
	line-height: 1.7;
}

.jxl-guest-hint a {
	color: var(--theme-deep);
}


/* ---------- 通用按钮 / 表单 ---------- */

.jxl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 18px;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-size: 13px;
	line-height: 1.4;
	cursor: pointer;
	transition: opacity .18s, background-color .18s, border-color .18s;
}

.jxl-btn-primary {
	color: #fff;
	background: var(--theme-color);
}

.jxl-btn-primary:hover {
	color: #fff;
	background: var(--theme-deep);
}

.jxl-btn-ghost {
	color: var(--theme-deep);
	background: transparent;
	border-color: var(--main-border-color);
}

.jxl-btn-ghost:hover {
	border-color: var(--theme-color);
	background: var(--theme-color-bg);
}

.jxl-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.jxl-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.jxl-field-label {
	color: var(--main-color);
	font-size: 13px;
	font-weight: 500;
}

.jxl-field-label em {
	color: #d63638;
	font-style: normal;
}

.jxl-field-help {
	color: var(--muted-color3);
	font-size: 12px;
}

.jxl-field input[type="text"],
.jxl-field input[type="email"],
.jxl-field input[type="password"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--main-border-color);
	border-radius: var(--radius-sm);
	background: var(--input-bg-color);
	color: var(--main-color);
	font-size: 13px;
	font-family: inherit;
	transition: border-color .18s, box-shadow .18s;
}

.jxl-field input:focus {
	outline: none;
	border-color: var(--theme-color);
	box-shadow: 0 0 0 3px var(--theme-color-bg);
}

.jxl-check {
	display: flex;
	align-items: center;
	gap: 7px;
	color: var(--muted-color2);
	font-size: 13px;
	cursor: pointer;
}

.jxl-check input {
	width: 15px;
	height: 15px;
	accent-color: var(--theme-color);
}

.jxl-alert {
	margin-bottom: 16px;
	padding: 11px 16px;
	border-radius: var(--radius-sm);
	font-size: 13px;
	line-height: 1.6;
}

.jxl-alert-ok {
	color: #1a7a4c;
	background: #e8f6ee;
	border: 1px solid #a9dfc4;
}

.jxl-alert-warn {
	color: #8a5a00;
	background: #fdf4e3;
	border: 1px solid #f0d19a;
}

.jxl-alert-error {
	color: #a32d2d;
	background: #fdecec;
	border: 1px solid #f3b9b9;
}


/* ---------- 登录 / 注册 ---------- */

.jxl-account-main {
	min-height: 62vh;
	padding: 40px 16px 70px;
}

.jxl-account-wrap {
	max-width: 460px;
	margin: 0 auto;
}

.jxl-account-card {
	padding: 32px 30px;
	border: 1px solid var(--main-border-color);
	border-radius: var(--main-radius);
	background: var(--main-bg-color);
}

.jxl-account-head {
	margin-bottom: 22px;
	text-align: center;
}

.jxl-account-head h1 {
	margin: 0 0 8px;
	color: var(--main-color-strong);
	font-size: 22px;
	font-weight: 500;
}

.jxl-account-head p {
	margin: 0;
	color: var(--muted-color);
	font-size: 13px;
	line-height: 1.7;
}

.jxl-account-switch {
	margin: 18px 0 0;
	color: var(--muted-color);
	font-size: 13px;
	text-align: center;
}

.jxl-account-switch a {
	color: var(--theme-deep);
}

.jxl-account-closed {
	margin: 0;
	color: var(--muted-color2);
	font-size: 13px;
	line-height: 1.7;
	text-align: center;
}


/* ---------- 我的导航管理页 ---------- */

.jxl-mynav-wrap {
	max-width: var(--main-max-width);
	margin: 0 auto;
	padding: 28px 16px 70px;
}

.jxl-mynav-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 20px;
}

.jxl-mynav-head h1 {
	margin: 0 0 6px;
	color: var(--main-color-strong);
	font-size: 22px;
	font-weight: 500;
}

.jxl-mynav-head p {
	margin: 0;
	color: var(--muted-color);
	font-size: 13px;
}

.jxl-mynav-grid {
	display: grid;
	grid-template-columns: 340px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

.jxl-mynav-form,
.jxl-mynav-list {
	padding: 22px;
	border: 1px solid var(--main-border-color);
	border-radius: var(--main-radius);
	background: var(--main-bg-color);
}

.jxl-mynav-form h2,
.jxl-mynav-list h2 {
	margin: 0 0 16px;
	color: var(--main-color-strong);
	font-size: 15px;
	font-weight: 500;
}

.jxl-mynav-form .jxl-btn {
	margin-top: 4px;
}

.jxl-mynav-full {
	margin: 0;
	color: var(--muted-color2);
	font-size: 13px;
	line-height: 1.7;
}

.jxl-mynav-empty {
	padding: 30px 10px;
	color: var(--muted-color3);
	font-size: 13px;
	text-align: center;
}

.jxl-mynav-empty p {
	margin: 0;
}

.jxl-mynav-items {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jxl-mynav-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--main-border-color);
	border-radius: var(--radius-sm);
	transition: border-color .18s, background-color .18s;
}

.jxl-mynav-item:hover {
	border-color: var(--theme-color);
	background: var(--muted-bg-color-l);
}

.jxl-mynav-item.is-editing {
	border-color: var(--theme-color);
	background: var(--theme-color-bg);
}

.jxl-mynav-item-main {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
	flex: 1 1 220px;
}

.jxl-mynav-item-icon {
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	border-radius: var(--radius-xs);
	object-fit: contain;
	background: var(--muted-bg-color-l);
}

.jxl-mynav-item-text {
	min-width: 0;
}

.jxl-mynav-item-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	color: var(--main-color);
	font-size: 14px;
	font-weight: 500;
}

.jxl-mynav-item-url {
	margin-top: 3px;
	color: var(--muted-color3);
	font-size: 12px;
	word-break: break-all;
}

.jxl-badge {
	display: inline-flex;
	align-items: center;
	padding: 1px 7px;
	border-radius: var(--radius-pill);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.6;
}

.jxl-badge-pin {
	color: var(--theme-deep);
	background: var(--theme-color-bg);
}

.jxl-badge-pending {
	color: #8a5a00;
	background: #fdf4e3;
}

.jxl-badge-published {
	color: #1a7a4c;
	background: #e8f6ee;
}

.jxl-badge-rejected {
	color: #a32d2d;
	background: #fdecec;
}

.jxl-mynav-item-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
}

.jxl-mynav-item-actions form {
	margin: 0;
}

.jxl-mini {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 27px;
	padding: 0 10px;
	border: 1px solid var(--main-border-color);
	border-radius: var(--radius-pill);
	background: var(--main-bg-color);
	color: var(--muted-color2);
	font-size: 12px;
	font-family: inherit;
	line-height: 1;
	cursor: pointer;
	transition: color .18s, border-color .18s, background-color .18s;
}

.jxl-mini:hover {
	color: var(--theme-deep);
	border-color: var(--theme-color);
	background: var(--theme-color-bg);
}

.jxl-mini.is-on {
	color: var(--theme-deep);
	border-color: var(--theme-color);
	background: var(--theme-color-bg);
}

.jxl-mini:disabled {
	opacity: .4;
	cursor: not-allowed;
}

.jxl-mini-icon {
	width: 27px;
	padding: 0;
}

.jxl-mini-danger:hover {
	color: #d63638;
	border-color: #d63638;
	background: #fdecec;
}


/* ---------- 深色模式 ---------- */

.io-black-mode .jxl-mynav-home,
.io-black-mode .jxl-account-card,
.io-black-mode .jxl-mynav-form,
.io-black-mode .jxl-mynav-list,
.io-black-mode .jxl-mini {
	background: var(--main-bg-color);
	border-color: var(--main-border-color);
}

.io-black-mode .jxl-alert-ok {
	color: #9fe1cb;
	background: rgba(29, 158, 117, .16);
	border-color: rgba(29, 158, 117, .4);
}

.io-black-mode .jxl-alert-warn {
	color: #fac775;
	background: rgba(186, 117, 23, .16);
	border-color: rgba(186, 117, 23, .4);
}

.io-black-mode .jxl-alert-error {
	color: #f09595;
	background: rgba(226, 75, 74, .16);
	border-color: rgba(226, 75, 74, .4);
}

.io-black-mode .jxl-badge-pending {
	color: #fac775;
	background: rgba(186, 117, 23, .18);
}

.io-black-mode .jxl-badge-published {
	color: #9fe1cb;
	background: rgba(29, 158, 117, .18);
}

.io-black-mode .jxl-badge-rejected {
	color: #f09595;
	background: rgba(226, 75, 74, .18);
}

.io-black-mode .jxl-mynav-card-remove {
	background: var(--muted-bg-color);
}

.io-black-mode .jxl-mynav-badge-guest {
	color: var(--muted-color2);
	background: var(--muted-bg-color);
}

.io-black-mode .jxl-guest-form-wrap {
	border-top-color: var(--main-border-color);
}


/* ---------- 移动端 ---------- */

@media (max-width: 900px) {
	.jxl-mynav-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * 移动端：标题(1) / 按钮(2) 先排一行，说明文字整行落到下面。
	 *
	 * 必须显式给 order —— 主题在这一档给 .tab-title 设了 order:1、
	 * .tab-more 设了 order:2，而我的 .jxl-mynav-home-tip 没设，
	 * 默认 order:0 会被排到最前面，读起来就是「先看到一行小字，
	 * 再看到标题」，很怪。
	 */
	.jxl-mynav-home-tip {
		order: 3;
		flex-basis: 100%;
		margin: 8px 0 0;
	}

	.jxl-guest-fields {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 600px) {
	.jxl-account-card {
		padding: 24px 18px;
	}

	.jxl-mynav-form,
	.jxl-mynav-list {
		padding: 18px 16px;
	}

	.jxl-mynav-item {
		align-items: flex-start;
		flex-direction: column;
	}

	.jxl-mynav-item-actions {
		width: 100%;
	}

	.jxl-btn {
		width: 100%;
	}

	.jxl-mynav-promo-actions .jxl-btn {
		width: 100%;
	}

	.jxl-mynav-card-remove {
		opacity: 1;
	}

	/*
	 * 游客那一行在窄屏整行铺开：卡片宽度上限取消，
	 * 操作按钮换到卡片下方，避免和「直达」按钮抢右边那点空间。
	 */
	.jxl-guest-row .jxl-mynav-card-single {
		max-width: none;
	}

	.jxl-guest-row .jxl-mynav-card-single {
		flex-wrap: wrap;
	}

	.jxl-guest-row-actions {
		width: 100%;
		padding: 0 var(--card-padding) 8px;
	}

	/*
	 * 游客输入框必须是 16px —— 小于这个值时 iOS Safari 聚焦会把
	 * 整个页面强制放大，而且不会自动还原。
	 */
	.jxl-guest-form .jxl-field input {
		font-size: 16px;
	}

	.jxl-guest-actions {
		flex-direction: column;
		align-items: stretch;
	}
}