/* 品牌字：文件其实是 TrueType（表目录里是 glyf/loca，头四字节 00 01 00 00），
   以前存成 .woff2 又写 format("woff2")，浏览器一比对格式就直接跳过这个 source ——
   所以 logo 一直是用回退字体（幼圆/微软雅黑）渲染的。改名成 .ttf + format("truetype") 才对。
   只有「羡儿」两个字，1620 字节，不用再做子集化。 */
@font-face {
	font-family: "站酷小薇LOGO体";
	src: url("fonts/xiaowei-logo.ttf") format("truetype"),
	     /* 兜底源：样式表是按 WP_HOME 的域名加载的，用别的地址打开同一站点（例如用 127.0.0.1 打开
	        localhost 的站点）时，上面那个文件就成了跨域资源，字体会被 CORS 拦掉。浏览器会接着试
	        下一个 source，所以把同一份字体内联成 data URL 垫在后面，两种访问方式都拿得到品牌字。
	        1620 字节 → base64 2160 字符，比一次必然失败的请求划算。 */
	     url("data:font/ttf;base64,AAEAAAALAIAAAwAwT1MvMpZZzlIAAAE4AAAAYGNtYXCuFSM6AAABoAAAADxnYXNw//8AAwAABkwAAAAIZ2x5ZlQTTMUAAAHkAAADKmhlYWQcxzsSAAAAvAAAADZoaGVhBZIFuwAAAPQAAAAkaG10eAIvAC8AAAGYAAAACGxvY2EAWwGVAAAB3AAAAAhtYXhwAAsA5AAAARgAAAAgbmFtZQOAx8gAAAUQAAABHHBvc3T/PgAZAAAGLAAAACAAAQAAAAEAAL3ZhENfDzz1AAkCAAAAAADUyMCJAAAAAObhOikAMP/gAc8BiQABAAIAAgAAAAAAAAABAAABwf+gAAACAAAvADIBzgPoAdIAAAAAAAAAAAAAAAAAAQABAAAAAwDjAAcAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAMB9wGQAAUACAEAAQAAAAAgAQABAAAAAQAAFwCAAAACAQYAAQEBAQEBAAAAAAgAAAAAAAAAAAAAADkxOCAAIFE/f6EBs/+zAC4BwQBgAAAAAQAAAAAA2AFZAAAAIAAAAgAAAAAvAC8AAAACAAAAAwAAABQAAwABAAAAFAAEACgAAAAGAAQAAQACUT9/of//AABRP3+h//+uwoBhAAEAAAAAAAAAAAAAAFsBlQACADD/4AHPAYgAFwA9AAABMxUHBwYUMzM1NTMzFRQOAgcHIyc1JwczFRQGBwYGBwYGBwYHBgcGBwYHIiY1NDc2NzY3Njc2NzY/AjUBLhYBAgM5OBAQAgUKBgVOTQFfFQMCAwkHBxENDAoLDAwREAMCAQcIDQ8REQgHBwYFAwEBiLS0BwYCGxsREQsNCwMCAcXFBYGBDwcIEwoKFQwLBwgIBwkIAQECBAUGCgwREAoICwoKCZCQAAcAMP/gAc8BiQAOABwASQB8AIQA0gDiAAASMhcUBwYHBgcGBiMnNTQ2MhYGBwYHBgcGIyc1NAczFRUjIxUVMzMVFSMHBwYHBgcGFDMzFRUjIzU1MzM1NSMjNTUzMzU1IyM1NRcwFxYVFAcGMRYyNjMzBwYHBgcGIicnNzY3Njc2NzUjIwcGBwYHBicmJyY2Njc2NzY3NgczFRUjIzUnFjIXFAcGBxQXFhcWFxYXFhcWFxYXFwcGMQcnJicmJyYnJicmJyYmNScHBgcGBwYHBgcGBwYHBgcGBwc1NDc2NzY3Njc2NzY3Njc2NzY3BzMVBgYHBgcGBiMjJzQ1NcspAQECAwIGBQ0FBmkpAQIDAwQEBwgGBia5UlFAQEBBAQECAgMDXV3Qz2NjSEhISFFSvhAPCAgBdQESEwQDCAgTEwMCAgQEBAQDBAE/PwUGERASEQIBAgEPFQoKCQkEBaopKSgB5B4BAQEBDw4MCg0NCQoKCgcIBwgNEwYICQ0LCgoKCgcFBwIGAwIBBAUKCgkKDQ4GCA4OCwwKCgcHDA0MDRARCAgFBgQEAgIBpBYBBQQEBAUJBgUBAYkBAQgJBQYGBQUBFRUDBA0GBwQFAwQBFRUtCgkWFgkKAQcGBQQEBAEJCQkJEBAKCRYWCQqNBAQBAQ4PAQMGBwsLExQEBAUFBwcHBwQCBwcREA8PAwICAhEcEA8QDgsJGgkKCgktAQELBwYBEA8KCQoJBQYEBAICAQEKEAUFBgcHCAcKCwkHCwMKAQMFBgcHCgoICAgJBAQHCAQFBAMEBAQECAkJCw8RCwsJCgkLBwkBFjEyDwUGAwMEBQQ/PwAAAAAABwBaAAMAAQQJAAAAIgAAAAMAAQQJAAEADgAiAAMAAQQJAAIADgAwAAMAAQQJAAMAKAA+AAMAAQQJAAQADgAiAAMAAQQJAAUAXABmAAMAAQQJAAYADgAiZyxbV16TYkBnCWdDX1JOCm13T1BReVTBckyLvouhUWxT+AB4AGkAYQBvAHcAZQBpAFIAZQBnAHUAbABhAHIAeABpAGEAbwB3AGUAaQA6AFYAZQByAHMAaQBvAG4AIAAxAC4AMAAwAFYAZQByAHMAaQBvAG4AIAAxAC4AMAAwACAASgBhAG4AdQBhAHIAeQAgADMAMQAsACAAMgAwADEAOAAsACAAaQBuAGkAdABpAGEAbAAgAHIAZQBsAGUAYQBzAGUAAwAA/+cAAP9UABkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH//wAC") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/*
Theme Name: Xianer
Theme URI: https://xianer.vip
Author: xianer.vip
Description: xianer.vip 风格壁纸站 WordPress 主题（视觉与数据均为演示用途）。
Version: 1.2.0
Text Domain: xianer
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: download, software, responsive, black
*/

/* =========================================================================
   1. 设计变量（主色：黑）
   ========================================================================= */
:root {
	/* 主色：黑 + 中性灰阶 */
	--brand: #111111;
	--brand-strong: #000000;
	--brand-deep: #000000;
	--brand-soft: #f4f4f5;
	--brand-soft-2: #e4e4e7;

	/* 仅用于 HOT 标签的暖色点缀 */
	--hot-1: #ff6a3d;
	--hot-2: #ff2d55;

	/* 工具页 / 个人中心的强调金（原来在样式表里散着写 #c9942e，这里给它一个名字） */
	--gold: #c9942e;
	/* 金色「当文字用」的深一档：#c9942e 压在白底上只有 2.71:1（做底色 / 边框够用，
	   当小字就不过 AA），换成这个 4.95:1。深色模式下金色本来就够（6.33:1），
	   所以 html.dark 里再把它换回 --gold。 */
	--gold-text: #8f6a1b;

	/* 半透明面板：和详情页那套面板同一个值（.detail-main / .detail-section / 侧栏 widget 都是
	   rgba(255,255,255,.6)，深色下 rgba(255,255,255,.05)）。
	   VIP 页的表格 / 充值面板 / 套餐卡都用它 —— 站主明确不要毛玻璃（backdrop-filter），
	   所以只留这层半透明底，不做模糊。 */
	--glass: rgba(255, 255, 255, .6);

	/* 暖橙同样分两档：--hot-1 做底色/渐变，--hot-text 当文字和图线（白底 5.18:1） */
	--hot-text: #c2410c;

	--ok: #12a150;
	--ok-soft: #e8f8ef;
	/* 亏损/负数的红：和 --ok 一样是数据语义色，不是装饰色。
	   浅色下要压得住白底，深色下要提亮才看得清，所以两套值分开给。 */
	--danger: #c0392b;
	--warn-soft: #111111;
	--warn-text: #ffffff;

	/* 中性色 */
	--ink: #0f0f10;
	--text: #3f3f46;
	/* 次要文字：原来是 #8a8a92，在白底上只有 3.43:1、在页面底色 #f6f6f7 上 3.17:1，
	   都不到 4.5。加深到 #636b78 —— 白底 5.38:1、页面底色 4.98:1，两处都过，
	   和这一族灰（#e6e6e9 边框）还是同一个冷灰调。深色模式那档本来就是 5.7:1，不动。 */
	--muted: #636b78;
	--border: #e6e6e9;
	--border-soft: #efeff2;
	--card: #ffffff;
	--bg: #f6f6f7;
	--bg-soft: #fafafa;

	/* 圆角 */
	--radius-lg: 18px;
	--radius: 14px;
	--radius-sm: 10px;
	--radius-pill: 999px;

	/* 阴影 */
	--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
	--shadow-md: 0 10px 28px rgba(0, 0, 0, 0.1);
	--shadow-brand: 0 10px 22px rgba(0, 0, 0, 0.18);

	/* 动效与容器 */
	--container: 1200px;
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--header-offset: 74px;

	/* 层级：浮层一律用这几个，别再写 9999 —— 数值之间留足空隙，以后要插新层不用改老的。
	   一个页面里"谁盖谁"应该是可读的：吸顶 < 下拉 < 悬浮按钮 < 遮罩 < 弹窗 < 提示条 < 跳转链接。 */
	--z-sticky: 100;
	--z-drop: 120;
	--z-float: 900;
	--z-overlay: 1000;
	--z-modal: 1100;
	--z-toast: 1200;
	--z-skip: 1300;

	/* 兼容旧变量名 */
	--pc-blue: var(--brand);
	--pc-green: var(--ok);
	--pc-orange: #111111;
	--pc-bg: var(--bg);
	--pc-card: var(--card);
	--pc-text: var(--text);
	--pc-muted: var(--muted);
	--pc-border: var(--border);
	--pc-radius: var(--radius);
	--pc-shadow: var(--shadow-sm);
	--pc-accent: var(--brand);
	--pc-accent2: var(--brand-strong);
}

/* =========================================================================
   2. 基础与排版
   ========================================================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
		"Hiragino Sans GB", "Microsoft YaHei", sans-serif;
	font-size: 15px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: var(--brand);
	text-decoration: none;
	transition: color 0.18s var(--ease);
}

a:hover {
	color: var(--brand-strong);
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

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

:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}

.container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 16px;
	padding-top: 50px;
}

.container2 {
	padding-top: 10px;
}

.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;
}

/* 正文内链接保留下划线，便于在灰阶里辨认 */
.detail-content a,
.page-content a,
.tool-content a,
.comment-content a {
	color: var(--brand);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.detail-content a:hover,
.page-content a:hover,
.tool-content a:hover,
.comment-content a:hover {
	color: var(--brand-strong);
}

/* =========================================================================
   3. 顶部导航区（深黑页头）
   ========================================================================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	margin-top: -76px;
	padding: 10px 0 8px;
	background: transparent;
	border-bottom: none;
}

body.admin-bar .site-header {
	top: 32px;
}

.site-header>.container {
	padding: 0;
}

/* 导航胶囊（CocoLoop 风格：全圆角 + 毛玻璃 + 细边框） */
.nav-capsule {
	max-width: var(--container);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 24px;
	height: 58px;
	padding: 0 12px 0 20px;
	background: rgba(10, 10, 12, 0.88);
	-webkit-backdrop-filter: blur(16px) saturate(1.5);
	backdrop-filter: blur(16px) saturate(1.5);
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: 999px;
	box-shadow: 0 6px 30px rgba(0, 0, 0, 0.28), inset 0 0.5px 0 rgba(255, 255, 255, 0.12);
	position: relative;
	z-index: 200;
}


.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex-shrink: 0;
}

.brand-name {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.3px;
	color: #fff;
	white-space: nowrap;
	text-decoration: none;
}

.brand-name:hover {
	color: #fff;
	opacity: 0.92;
}

.brand-tag {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.55);
	white-space: nowrap;
}

/* 导航链接：纯文字，hover 变白 */
.category-nav {
	background: transparent;
	flex: 1;
	min-width: 0;
}

.category-nav .nav-inner {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 2px;
	padding: 0;
}

.category-nav a {
	display: inline-block;
	padding: 8px 14px;
	color: rgba(255, 255, 255, 0.72);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
	border-radius: 999px;
	transition: color 0.2s var(--ease), background 0.2s var(--ease);
}

.category-nav a:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.1);
}

.category-nav a.current-category {
	color: #fff;
	font-weight: 600;
	background: rgba(255, 255, 255, 0.14);
}

/* 右侧：搜索 + 汉堡 */
.header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
	flex-shrink: 0;
	position: relative;
}

.search-form-inline {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 3px 3px 3px 14px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
		box-shadow 0.2s var(--ease);
}

.search-form-inline:focus-within {
	background: rgba(255, 255, 255, 0.13);
	border-color: rgba(255, 255, 255, 0.5);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.search-form-inline input[type="search"] {
	width: 170px;
	padding: 6px 0;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 13.5px;
	outline: none;
}

.search-form-inline input[type="search"]::placeholder {
	color: rgba(255, 255, 255, 0.42);
}

.search-form-inline button {
	padding: 6px 16px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s var(--ease);
}

.search-form-inline button:hover {
	background: rgba(255, 255, 255, 0.3);
}

/* 汉堡按钮（默认隐藏，移动端显示） */
.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 4px;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	cursor: pointer;
	padding: 0;
}

.menu-toggle span {
	display: block;
	width: 16px;
	height: 2px;
	border-radius: 2px;
	background: #fff;
}

.menu-toggle:hover {
	background: rgba(255, 255, 255, 0.16);
}

/* 放大镜按钮（移动端显示） */
.search-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	cursor: pointer;
	padding: 0;
	transition: background 0.2s var(--ease);
}

.search-toggle:hover {
	background: rgba(255, 255, 255, 0.16);
}

/* 深浅色切换按钮 */
.theme-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	cursor: pointer;
	padding: 0;
	transition: background 0.2s var(--ease);
}

.theme-toggle:hover {
	background: rgba(255, 255, 255, 0.16);
}

.theme-toggle .icon-sun {
	display: none;
}

html.dark .theme-toggle .icon-sun {
	display: block;
}

html.dark .theme-toggle .icon-moon {
	display: none;
}

/* 移动端搜索下拉条 */
.search-drop {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: rgba(8, 8, 10, 0.97);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
	padding: 12px 0 14px;
	z-index: 98;
}

.search-drop.open {
	display: block;
}

.search-drop .search-form-inline input[type="search"] {
	flex: 1;
	width: auto;
}

/* 移动下拉菜单 */
.mobile-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: rgba(8, 8, 10, 0.97);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
	padding: 16px 0 20px;
	z-index: 99;
}

.mobile-menu.open {
	display: block;
}

.mobile-menu .search-form-inline {
	margin-bottom: 14px;
}

.mobile-menu .search-form-inline input[type="search"] {
	flex: 1;
	width: auto;
}

.mobile-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mobile-nav a {
	display: block;
	padding: 12px 16px;
	border-radius: 12px;
	color: rgba(255, 255, 255, 0.82);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

html:not(.dark) .mobile-nav a {
	color: #333;
}

.mobile-nav a:hover {
	background: rgba(255, 255, 255, 0.07);
	color: #fff;
}

.mobile-nav a.current {
	background: rgba(255, 255, 255, 0.13);
	color: #fff;
	font-weight: 600;
}

html:not(.dark) .mobile-nav a.current {
	background: rgba(0, 0, 0, 0.1);
	color: #333;
}

/* 汉堡菜单里的主导航是一个分类一整行，内容本来就长；
   展开「风格 / 色系」后总高度可能超出屏幕，所以让菜单自己可以滚，保证下面都够得着。 */
.mobile-menu {
	max-height: calc(100vh - 80px);
	max-height: calc(100dvh - 80px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.site-main {
	padding: 26px 0 48px;
}


.main-content {
	flex: 1;
	min-width: 0;
}

/* 没有 hero / 可见标题的列表页（首页选了风格色系、分类页），内容别贴着导航栏 */
.main-content.no-hero {
	padding-top: 24px;
}

/* VIP价格卡片手机端适配 */
@media (max-width: 768px) {

	.vip-pricing-grid,
	[style*="grid-template-columns: repeat(3"] {
		gap: 8px !important;
	}
}

/* 下载下拉菜单 */
.dl-dropdown {
	position: relative;
	display: inline-block;
}

.dl-dropdown-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	width: auto;
	white-space: nowrap;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(10px);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	z-index: 100;
	overflow: hidden;
	margin-top: 6px;
}

.dl-dropdown-menu.open {
	display: block;
}

.dl-dropdown-menu a {
	/* flex 是为了让前面的 svg 图标和文字垂直居中对齐（原本是 block） */
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 10px 14px;
	color: inherit;
	text-decoration: none;
	font-size: 14px;
	transition: background 0.2s;
}

.dl-dropdown-menu a svg {
	flex: none;
}

/* VIP 皇冠图标：用站点主金色（和资料页的 VIP 角标同色），其余图标仍跟随文字色 */
.dl-dropdown-menu a .dl-ico-vip {
	color: #c9942e;
}

/* 免费下载：Remix cloud-line 云朵图标 */
.dl-dropdown-menu a .dl-ico-quark {
	flex: none;
	width: 16px;
	height: 16px;
	display: block;
	color: #2f8cff;
}

.dark .dl-dropdown-menu a .dl-ico-quark {
	color: #63b3ff;
}

.dl-dropdown-menu a:hover {
	background: rgba(0, 0, 0, 0.05);
}

.dark .dl-dropdown-menu {
	background: rgba(30, 30, 30, 0.85);
}

.dark .dl-dropdown-menu a:hover {
	background: rgba(255, 255, 255, 0.08);
}

.page-head {
	margin-bottom: 18px;
}

.page-head h1 {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 20px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.4;
}

.page-head h1::before {
	content: "";
	flex-shrink: 0;
	width: 4px;
	height: 18px;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--brand), #8a8a8a);
}

.breadcrumb {
	margin-bottom: 18px;
	margin-top: 10px;
	font-size: 12.5px;
	color: var(--muted);
}

.breadcrumb a {
	color: var(--muted);
}

.breadcrumb a:hover {
	color: var(--brand-strong);
}

/* =========================================================================
   5. 左侧分类栏
   ========================================================================= */
.cat-sidebar {
	position: sticky;
	top: var(--header-offset);
	flex-shrink: 0;
	width: 206px;
	padding: 16px 14px;
	background: var(--card);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
}

body.admin-bar .cat-sidebar,
body.admin-bar .detail-side {
	top: calc(var(--header-offset) + 32px);
}

.sidebar-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border-soft);
	font-size: 14px;
	font-weight: 700;
	color: var(--ink);
}

.sidebar-title::before {
	content: "";
	width: 3px;
	height: 14px;
	border-radius: 2px;
	background: var(--brand);
}

.cat-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cat-list li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 10px;
	border-radius: var(--radius-sm);
	color: var(--text);
	font-size: 13.5px;
	transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

.cat-list li a:hover {
	background: #f4f4f5;
	color: var(--brand-strong);
}

.cat-list li.active a {
	background: var(--brand-soft);
	color: var(--brand-strong);
	font-weight: 600;
}

.cat-count {
	min-width: 24px;
	padding: 1px 7px;
	border-radius: var(--radius-pill);
	background: #f2f2f3;
	color: var(--muted);
	font-size: 11.5px;
	line-height: 1.6;
	text-align: center;
}

.cat-list li.active .cat-count {
	background: var(--brand);
	color: #fff;
}


.software-card .icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	overflow: hidden;
	background: var(--bg-soft);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-sm);
	font-size: 26px;
	line-height: 1;
	transition: transform 0.22s var(--ease);
}

.software-card:hover .icon {
	transform: scale(1.05);
}

.software-card .icon img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

.software-card .name {
	display: -webkit-box;
	min-height: 2.8em;
	overflow: hidden;
	color: var(--ink);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.4;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}


.section-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 700;
	color: var(--ink);
}


.strip-head .section-title {
	gap: 8px;
	margin: 0;
	font-size: 15px;
}

.strip-head .section-title::before {
	content: "";
	width: 3px;
	height: 14px;
	border-radius: 2px;
	background: var(--brand);
}


.software-grid--mini .software-card .icon {
	width: 40px;
	height: 40px;
	border-radius: 9px;
	font-size: 20px;
}

.software-grid--mini .software-card:hover .icon {
	transform: none;
}

.software-grid--mini .software-card .name {
	min-height: 2.6em;
	color: var(--muted);
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.3;
}

.software-grid--mini .software-card:hover .name {
	color: var(--ink);
}

/* =========================================================================
   7. 分页
   ========================================================================= */
.pagination {
	margin-top: 26px;
	text-align: center;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: var(--shadow-xs);
	color: var(--text);
	font-size: 13.5px;
	font-weight: 500;
	transition: all 0.2s var(--ease);
}

.pagination .page-numbers:hover {
	border-color: var(--brand);
	color: var(--brand-strong);
}

.pagination .page-numbers.current {
	background: var(--brand);
	border-color: var(--brand);
	box-shadow: var(--shadow-brand);
	color: #fff;
}

.pagination .page-numbers.dots {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

/* =========================================================================
   8. 软件详情页
   ========================================================================= */
.detail-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 312px;
	gap: 22px;
	align-items: start;
}

.detail-main {
	min-width: 0;
	padding: 26px;
	background: var(--card);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}


.detail-head .info {
	flex: 1;
	min-width: 0;
}

.detail-head .info h1 {
	margin-bottom: 10px;
	color: var(--ink);
	font-size: 23px;
	font-weight: 700;
	line-height: 1.35;
}


.tag-badge.platform {
	background: var(--ok-soft);
	color: var(--ok);
}


.detail-content {
	margin-top: 5px;
	color: var(--text);
	font-size: 14.5px;
	line-height: 1.85;
}

.detail-content p {
	margin: 0 0 12px;
}

.detail-content img {
	border-radius: var(--radius-sm);
}

.detail-content h2,
.detail-content h3 {
	margin: 22px 0 10px;
	color: var(--ink);
	line-height: 1.5;
}

.detail-content h2 {
	font-size: 19px;
}

.detail-content h3 {
	font-size: 16.5px;
}

.detail-content ul,
.detail-content ol {
	margin: 0 0 14px 22px;
}

.detail-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
}

.detail-content th,
.detail-content td {
	padding: 8px 10px;
	border: 1px solid var(--border);
	text-align: left;
}

.detail-content th {
	background: var(--bg-soft);
}

.detail-content.collapsed {
	position: relative;
	max-height: 180px;
	overflow: hidden;
}

.detail-content.collapsed::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 70px;
	background: linear-gradient(transparent, #fff);
}


.dl-btn {
	display: inline-block;
	padding: 9px 18px;
	border: none;
	border-radius: 10px;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.14);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
		filter 0.18s var(--ease);
}

.dl-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
	filter: brightness(1.06);
}

.dl-btn:active {
	transform: translateY(0);
}

/* =========================================================================
   10. 详情页侧栏
   ========================================================================= */
.detail-side {
	position: sticky;
	top: var(--header-offset);
}

.detail-side .widget {
	margin-bottom: 16px;
	padding: 16px;
	background: var(--card);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
}

.detail-side .widget h3 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border-soft);
	color: var(--ink);
	font-size: 14.5px;
	font-weight: 700;
}

.detail-side .widget h3::before {
	content: "";
	width: 3px;
	height: 14px;
	border-radius: 2px;
	background: var(--brand);
}

.related-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border-radius: var(--radius-sm);
	transition: background 0.18s var(--ease);
}

.related-item:hover {
	background: #f7f7f7;
}

.related-item .mini-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	overflow: hidden;
	background: var(--bg-soft);
	border: 1px solid var(--border-soft);
	border-radius: 12px;
	font-size: 20px;
	line-height: 1;
}

.related-item .mini-icon img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

.related-item .mini-name {
	color: var(--text);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.4;
}

.related-item:hover .mini-name {
	color: var(--brand-strong);
}


.detail-side .widget.side-card h3 {
	justify-content: center;
	margin-bottom: 6px;
	padding-bottom: 0;
	border-bottom: none;
}

.detail-side .widget.side-card h3::before {
	display: none;
}


.like-btn,
.donate-btn {
	padding: 9px 24px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	color: var(--text);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s var(--ease);
}

.like-btn:hover {
	background: var(--brand-soft);
	border-color: var(--brand);
	color: var(--brand-strong);
}

.like-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.like-btn.liked {
	opacity: 0.65;
	cursor: default;
}


/* =========================================================================
   11. 评论区
   ========================================================================= */
.comments-section {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--border-soft);
}

.comments-area {
	padding: 20px;
	background: var(--bg-soft);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius);
}

.comments-title,
.reply-title,
.comments-section .comments-title,
.comments-section .comment-reply-title {
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border-soft);
	color: var(--ink);
	font-size: 16px;
	font-weight: 700;
}

.comments-list,
.comment-list {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.comments-list>li {
	padding: 14px 0;
	border-bottom: 1px solid var(--border-soft);
}

.comments-list>li:last-child {
	border-bottom: none;
}

.comment-list .children {
	margin-left: 18px;
	padding: 0;
	list-style: none;
}

.comment-body {
	margin-bottom: 12px;
	padding: 14px 16px;
	background: rgba(255,255,255,0.08);
	border: none;
	border-radius: var(--radius);
}
html.dark .comment-body {
	background: rgba(0,0,0,0.25);
}

.comments-list .avatar {
	float: left;
	margin-right: 10px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,0.3);
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.comment-author,
.comments-list .comment-author {
	color: var(--ink);
	font-size: 13.5px;
	font-weight: 600;
}

.comment-metadata,
.comments-list .comment-meta {
	margin-bottom: 6px;
	color: var(--muted);
	font-size: 12px;
}

.comment-metadata a,
.comments-list .comment-meta a {
	color: var(--muted);
}

.comment-content,
.comments-list .comment-content {
	overflow: hidden;
	color: var(--text);
	font-size: 14px;
	line-height: 1.7;
}

.logged-in-as {
	margin: 0 0 10px;
	color: var(--muted);
	font-size: 13px;
}

.logged-in-as a {
	color: var(--brand-strong);
}

.comment-respond {
	padding: 18px;
	background: #fff;
	border: 0px solid var(--border-soft);
	border-radius: var(--radius);
}

.comment-form p {
	margin: 0 0 12px;
}

.comment-form label {
	display: block;
	margin-bottom: 5px;
	color: var(--muted);
	font-size: 13px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--text);
	font-size: 14px;
	transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.comment-form textarea {
	min-height: 110px;
	resize: vertical;
}

.comment-form input:focus,
.comment-form textarea:focus {
	border-color: var(--brand);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
	outline: none;
}

.comment-form-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.comment-form-author {
	flex: 0 0 140px;
	margin: 0;
}

.comment-form-email {
	flex: 1;
	margin: 0;
}

.form-submit {
	flex: 0 0 auto;
	margin: 0;
}

.comment-form .submit,
.form-submit .submit {
	padding: 10px 24px;
	border: none;
	border-radius: var(--radius-pill);
	background: linear-gradient(135deg, #1f1f1f, #0a0a0a);
	box-shadow: var(--shadow-brand);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: filter 0.2s var(--ease);
}

.form-submit .submit:hover {
	filter: brightness(1.08);
}

.comments-navigation {
	margin: 12px 0;
	text-align: center;
}

@media (max-width: 600px) {
	.comment-form-row {
		flex-direction: column;
	}

	.comment-form-author,
	.comment-form-email,
	.form-submit {
		width: 100%;
		flex: none;
		margin-bottom: 8px;
	}

	.comment-form .submit,
	.form-submit .submit {
		width: 100%;
	}
}

/* =========================================================================
   12. 页脚
   ========================================================================= */
.site-footer {
	margin-top: 36px;
	padding: 26px 0;
	background: #fff;
	border-top: 1px solid var(--border);
	color: var(--muted);
	font-size: 12.5px;
	line-height: 1.9;
	text-align: center;
}

.site-footer .disclaimer {
	max-width: 900px;
	margin: 0 auto;
}

.site-footer p {
	margin: 2px 0;
	font-size: 12px;
}

/* =========================================================================
   13. 404 / 空状态
   ========================================================================= */
.not-found {
	padding: 52px 24px;
	background: var(--card);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	text-align: center;
}

.not-found h1 {
	margin-bottom: 10px;
	color: var(--ink);
	font-size: 26px;
	font-weight: 700;
}

.not-found p {
	color: var(--muted);
}


/* =========================================================================
   15. 工具详情页 / 普通页面模板
   ========================================================================= */
.single-tool-page {
	padding: 30px 0 20px;
}

.single-tool-page .container {
	max-width: 880px;
}

.single-tool-main {
	min-width: 0;
}

.tool-title {
	margin-bottom: 18px;
	color: var(--ink);
	font-size: 26px;
	font-weight: 700;
}

.tool-content {
	padding: 26px;
	background: var(--card);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	font-size: 14.5px;
	line-height: 1.85;
}

.page-page {
	padding: 34px 0 20px;
}

.page-page .container {
	max-width: 900px;
}

.page-title {
	margin-bottom: 20px;
	color: var(--ink);
	font-size: 26px;
	font-weight: 700;
	text-align: center;
}

.page-content {
	padding: 28px;
	background: var(--card);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	font-size: 14.5px;
	line-height: 1.85;
}

.page-content h2 {
	margin: 22px 0 10px;
	color: var(--ink);
	font-size: 19px;
}

.page-content h3 {
	margin: 18px 0 8px;
	color: var(--ink);
	font-size: 16.5px;
}

.page-content ul,
.page-content ol {
	margin: 0 0 14px 22px;
}

.related-software {
	margin-top: 22px;
	padding: 20px;
	background: var(--card);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

.related-software h3 {
	margin: 0 0 14px;
	color: var(--ink);
	font-size: 15px;
	font-weight: 700;
}

.related-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.related-grid .related-item {
	display: inline-flex;
	padding: 8px 16px;
	background: var(--brand-soft);
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	color: var(--brand-strong);
	font-size: 13.5px;
	font-weight: 500;
}

.related-grid .related-item:hover {
	background: #fff;
	border-color: var(--brand);
	color: var(--brand-strong);
}


/* =========================================================================
   17. 响应式
   ========================================================================= */
@media (max-width: 1100px) {
	.detail-layout {
		grid-template-columns: minmax(0, 1fr) 288px;
	}
}


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

	.detail-side {
		position: static;
	}

}

@media (max-width: 820px) {

	/* 移动端：胶囊内 logo + 汉堡，导航进下拉菜单 */
	.site-header {
		padding: 8px 0;
	}

	.nav-capsule {
		gap: 10px;
		height: 58px;
		padding: 0 10px 0 16px;
	}

	.brand-name {
		font-size: 17px;
	}

	.brand-tag {
		font-size: 11px;
		color: rgba(255, 255, 255, 0.5);
	}

	.category-nav {
		display: none;
	}


	.menu-toggle {
		display: flex;
	}

	.search-toggle {
		display: flex;
	}

	.site-header>.container {
		padding: 0 16px;
	}

	/* 下拉面板与胶囊同宽对齐（悬浮圆角面板） */
	.mobile-menu,
	.search-drop {
		left: 16px;
		right: 16px;
		top: calc(100% + 6px);
		border-radius: 16px;
		border: 1px solid rgba(255, 255, 255, 0.09);
	}

	.mobile-menu .container,
	.search-drop .container {
		padding: 0 8px;
	}

	.mobile-menu .search-form-inline,
	.search-drop .search-form-inline {
		margin-left: 4px;
		margin-right: 4px;
	}

	.recent-post-gallery {
		column-count: 2 !important;
	}
}

@media (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}

	body.admin-bar .cat-sidebar,
	body.admin-bar .detail-side {
		top: calc(var(--header-offset) + 46px);
	}
}

@media (max-width: 768px) {


	.cat-sidebar {
		position: static;
		width: 100%;
		padding: 14px;
	}

	.cat-list {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 6px;
	}

	.cat-list li a {
		padding: 6px 12px;
		background: #f4f4f5;
		border-radius: var(--radius-pill);
		font-size: 12.5px;
	}

	.cat-list .cat-count {
		min-width: auto;
		padding: 0 5px;
		font-size: 10.5px;
	}


	.software-card .icon {
		width: 50px;
		height: 50px;
	}

	.software-card .name {
		font-size: 12.5px;
	}


	.section-title {
		font-size: 16.5px;
	}

	.detail-main {
		padding: 18px 14px;
	}


	.detail-head .info h1 {
		font-size: 20px;
	}


	.dl-btn {
		width: 100%;
		padding: 12px 16px;
		text-align: center;
	}


}

@media (max-width: 560px) {

	/* 小屏：胶囊更紧凑 */
	.nav-capsule {
		height: 46px;
		padding: 0 8px 0 14px;
	}

	.brand-name {
		font-size: 15.5px;
	}

	.menu-toggle,
	.search-toggle {
		width: 34px;
		height: 34px;
	}

	.brand-tag {
		font-size: 10px;
	}


	.software-card .icon {
		width: 44px;
		height: 44px;
		border-radius: 9px;
	}

	.software-card .name {
		font-size: 12px;
	}

	.page-head h1 {
		font-size: 18px;
	}

	.detail-main {
		padding: 16px 12px;
	}

	.page-content,
	.tool-content {
		padding: 18px 14px;
	}

	.tools-title,
	.page-title,
	.tool-title {
		font-size: 22px;
	}


}


.tag-badge.platform {
	background: var(--brand-soft);
	color: var(--text);
}


.tool-output img,
.tool-content img,
.page-content img {
	border-radius: var(--radius-sm);
}


/* ==== 大分类分组侧边栏 ==== */
.cat-group {
	margin-bottom: 8px;
}

.cat-group-title {
	display: block;
	font-weight: 700;
	font-size: 14px;
	color: #111;
	padding: 6px 10px;
	border-radius: 8px;
	background: #f5f5f5;
	text-decoration: none;
}

.cat-group-title:hover {
	background: #e5e5e5;
}

.cat-list-sub {
	margin: 4px 0 8px 10px;
}

.cat-list-sub li a {
	padding: 5px 10px;
	font-size: 13px;
}

.sidebar-title a {
	color: #111;
	text-decoration: none;
}

.sidebar-title a:hover {
	color: #333;
}

.sidebar-empty {
	font-size: 12px;
	color: #999;
	padding: 8px;
}


.donate-modal.open {
	display: flex;
}


/* ====================================================================
   壁纸站：卡片网格 + 详情页
   ==================================================================== */
.wallpaper-grid {
	column-count: 5;
	column-gap: 16px;
}

.single-wallpaper-grid {
	column-count: 3;
	column-gap: 14px;
}

@media (max-width: 820px) {
	.single-wallpaper-grid {
		column-count: 2;
	}
}

.wallpaper-card {
	background: var(--card);
	border-radius: var(--radius);
	overflow: hidden;
	border: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
	break-inside: avoid;
	margin-bottom: 16px;
	transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
	animation: xianer-slidein 0.55s cubic-bezier(0.2, 0.6, 0.3, 1);
}

.wallpaper-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}

.wallpaper-card a {
	display: block;
	text-decoration: none;
	color: inherit;
}

.wp-thumb {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #202127 0%, #2a2b32 100%);
}

/* 响应式图片用 <picture> 包 WebP source + JPG 兜底 */
.wp-thumb picture {
	display: block;
	width: 100%;
}

.wallpaper-grid[data-orientation='landscape'] .wp-thumb picture,
.wallpaper-grid[data-orientation='square'] .wp-thumb picture {
	height: 100%;
}

.wallpaper-grid[data-orientation='landscape'] .wp-thumb {
	aspect-ratio: 16/10;
}

.wallpaper-grid[data-orientation='landscape'] .wp-thumb img,
.wallpaper-grid[data-orientation='landscape'] .wp-thumb video {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: 50% 50% !important;
	display: block;
}

/* 横屏卡片兜底：首页 / 搜索 / 相关壁纸 / AJAX 加载更多都可能把同一张卡放进
   不同容器。这里多加一层 .wallpaper-card 提高优先级，图片和视频都必须铺满
   16:10 的外框，避免 16:9 素材在底部露出 .wp-thumb 的灰色占位底。 */
.wallpaper-grid[data-orientation='landscape'] .wallpaper-card .wp-thumb img,
.wallpaper-grid[data-orientation='landscape'] .wallpaper-card .wp-thumb video {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: 50% 50% !important;
	display: block;
}

.wp-thumb img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.3s var(--ease);
}

.wallpaper-card:hover .wp-thumb img {
	transform: scale(1.05);
}

.wp-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 40px;
	color: #c0c0c5;
}

/* 图片到位前的占位（主色 + LQIP 模糊底）由 PHP 写在 <img> 的 style 属性里。

   淡入由 JS 完成，顺序是：先把占位从 <img> 交棒给外层容器（.wp-thumb 等），
   再让 <img> 在容器之上淡入。占位若留在 <img> 自身，opacity 会连它一起隐藏 ——
   那正是之前灰块没消失的原因。

   下面用 html 前缀抬高优先级，压过后面的 .recent-post-img img 的 transition 声明；
   并把 transform 一起写上，避免覆盖卡片 hover 的缩放过渡。 */
html img[data-xfade] {
	transition: transform 0.3s var(--ease), opacity 0.4s ease;
}

html img[data-xfade].xfade-wait {
	opacity: 0;
}

/* 视频：平时只显示封面 + 播放按钮。
   手机端——播放按钮可点（点它播放，点其他区域照旧进详情页）；
   桌面——鼠标悬停播放。播放时按钮淡出，暂停/滚出视口时再显示回来。
   选择器加 html 前缀抬高优先级，压过后面的 .wp-video-badge 规则。 */
@media (hover: none) {
	html .wp-video-badge {
		pointer-events: auto;
		cursor: pointer;
	}
}

.wp-cat {
	position: absolute;
	left: 8px;
	top: 8px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 11px;
	line-height: 1;
	padding: 4px 9px;
	border-radius: 999px;
	backdrop-filter: blur(2px);
}

.wp-name {
	padding: 10px 12px 12px;
	font-size: 13.5px;
	color: var(--ink);
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


.wallpaper-hero .wp-placeholder.big {
	height: 340px;
	font-size: 60px;
}

.detail-main .detail-head h1 {
	font-size: 22px;
	margin: 0 0 10px;
}

.detail-main2 .detail-head h1 {
	font-size: 22px;
	margin: 0 0 10px;
}


/* 下载按钮 */
.dl-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 16px 0 6px;
}

.dl-btn.primary {
	display: inline-block;
	background: var(--brand);
	color: #fff;
	padding: 11px 28px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}

.dl-btn.primary:hover {
	background: #2e2e2e;
	transform: translateY(-1px);
}

/* 相关壁纸缩略图 */
.related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}


/* 响应式：壁纸网格列数 */
@media (max-width: 1024px) {
	.wallpaper-grid {
		column-count: 4;
	}
}

@media (max-width: 820px) {
	.wallpaper-grid {
		column-count: 2 !important;
		column-gap: 12px;
	}
}

@media (max-width: 560px) {
	.wallpaper-grid {
		column-count: 2;
		column-gap: 10px;
	}

	.wallpaper-hero .wp-placeholder.big {
		height: 260px;
	}
}


/* ===== 导航筛选下拉框 ===== */
.nav-filters {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.nav-drop {
	position: relative;
}

.nav-drop-btn {
	appearance: none;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.05);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 999px;
	padding: 5px 12px;
	font-size: 12px;
	line-height: 1.5;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: background-color 0.2s, border-color 0.2s;
}

.nav-drop-btn:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.2);
}

.nav-drop-arrow {
	color: rgba(255, 255, 255, 0.6);
	font-size: 11px;
	line-height: 1;
}

.nav-drop-list {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 118px;
	background: #242424;
	border: none;
	border-radius: 12px;
	padding: 5px;
	margin: 0;
	list-style: none;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 120;
}

.nav-drop.open .nav-drop-list {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nav-drop-item {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 8px;
	color: #ddd;
	font-size: 12px;
	text-decoration: none;
	white-space: nowrap;
}


.nav-drop-item:hover,
.nav-drop-item.active {
	background: #3a3a3a;
	color: #fff;
}

/* 动态壁纸是“全部 / 动态”的二态筛选，图标放在顶部放大镜左侧。
   外观与搜索按钮一致：透明背景、无额外边界，只在悬停时出现浅色底。 */
.nav-motion-toggle {
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	border-radius: var(--radius-sm);
	background: none;
	color: var(--text);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s var(--ease);
}

html.dark .nav-capsule .header-actions .nav-motion-toggle {
	color: var(--text) !important;
}

html:not(.dark) .nav-capsule .header-actions .nav-motion-toggle {
	color: rgba(28, 28, 30, 0.72) !important;
}

.nav-motion-toggle svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
	pointer-events: none;
}

.nav-motion-bar {
	transform-box: fill-box;
	transform-origin: center;
	animation: nav-motion-pulse 1.25s ease-in-out infinite;
}

.nav-motion-bar--middle {
	animation-delay: 0.16s;
}

.nav-motion-bar--last {
	animation-delay: 0.32s;
}

/* 进入动态壁纸筛选后图标停住；回到全部壁纸时重新播放。 */
.nav-motion-toggle.is-active .nav-motion-bar {
	animation: none;
	transform: none;
	opacity: 1;
}

@keyframes nav-motion-pulse {
	0%,
	100% {
		transform: scaleY(0.55);
		opacity: 0.62;
	}

	50% {
		transform: scaleY(1);
		opacity: 1;
	}
}

.nav-motion-toggle:hover,
.nav-motion-toggle:focus-visible {
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.08);
	color: #0f0f10 !important;
}

html.dark .nav-capsule .header-actions .nav-motion-toggle:hover,
html.dark .nav-capsule .header-actions .nav-motion-toggle:focus-visible {
	background: rgba(255, 255, 255, 0.12);
	color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
	.nav-motion-bar {
		animation: none;
	}
}

@media (max-width: 560px) {
	.nav-motion-toggle {
		width: 34px;
		height: 34px;
		flex-basis: 34px;
	}
}

/* 分类 / 氛围：每项用两行说明内容范围，桌面端像参考图一样并排铺开。
   描述只负责解释筛选结果，不参与筛选值，沿用下拉现有配色和阴影。 */
.nav-drop-item--described {
	align-items: flex-start;
	padding: 9px 12px;
	line-height: 1.35;
	white-space: normal;
}

.nav-drop-copy {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.nav-drop-label {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
}

.nav-drop-desc {
	color: inherit;
	opacity: 0.58;
	font-size: 10.5px;
	line-height: 1.45;
	letter-spacing: 0.01em;
}

.nav-drop-item:hover .nav-drop-desc,
.nav-drop-item.active .nav-drop-desc {
	opacity: 0.78;
}

.nav-drop-item .nav-drop-desc--rich,
.nav-drop-item:hover .nav-drop-desc--rich,
.nav-drop-item.active .nav-drop-desc--rich {
	opacity: 0.78;
}

.nav-color-swatches {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	width: max-content;
	gap: 4px;
	margin-top: 2px;
}

.nav-color-block {
	width: 12px;
	height: 12px;
	flex: 0 0 12px;
	border-radius: 50%;
	background: var(--swatch);
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.22));
}

@media (min-width: 821px) {
	.nav-drop[data-name="style"] .nav-drop-list,
	.nav-drop[data-name="mood"] .nav-drop-list,
	.nav-drop[data-name="color"] .nav-drop-list {
		left: auto;
		right: 0;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2px;
		padding: 8px;
		max-height: min(70vh, 520px);
		overflow-y: auto;
	}

	.nav-drop[data-name="style"] .nav-drop-list {
		width: clamp(540px, 60vw, 760px);
	}

	.nav-drop[data-name="mood"] .nav-drop-list,
	.nav-drop[data-name="color"] .nav-drop-list {
		width: clamp(500px, 55vw, 680px);
	}

	/* 电脑端三个下拉的首项把说明放到标题右侧，具体筛选项不受影响。 */
	.nav-drop[data-name="style"] .nav-drop-list > li:first-child .nav-drop-copy,
	.nav-drop[data-name="mood"] .nav-drop-list > li:first-child .nav-drop-copy,
	.nav-drop[data-name="color"] .nav-drop-list > li:first-child .nav-drop-copy {
		flex-direction: row;
		align-items: baseline;
		gap: 8px;
	}

	.nav-drop[data-name="style"] .nav-drop-list > li:first-child > .nav-drop-item,
	.nav-drop[data-name="mood"] .nav-drop-list > li:first-child > .nav-drop-item,
	.nav-drop[data-name="color"] .nav-drop-list > li:first-child > .nav-drop-item {
		white-space: nowrap;
	}

	/* 电脑端色系：名称和圆点同一行，靠行间距而不是上下两行来区分选项。 */
	.nav-drop[data-name="color"] .nav-drop-list {
		row-gap: 6px;
	}

	.nav-drop[data-name="color"] .nav-drop-item--described {
		padding-top: 10px;
		padding-bottom: 10px;
		white-space: nowrap;
	}

	.nav-drop[data-name="color"] .nav-drop-list > li:not(:first-child) .nav-drop-copy {
		flex-direction: row;
		align-items: center;
		gap: 8px;
	}

	.nav-drop[data-name="color"] .nav-drop-list > li:not(:first-child) .nav-drop-desc--rich {
		display: inline-flex;
		align-items: center;
	}

	.nav-drop[data-name="color"] .nav-drop-list > li:not(:first-child) .nav-color-swatches {
		margin-top: 0;
	}
}

/* 移动端下拉面板内的筛选框 */

/* ===== 移动端：导航栏直接显示筛选框 + 搜索框 ===== */
@media (max-width: 820px) {
	.nav-capsule {
		flex-wrap: nowrap;
		gap: 8px;
		padding: 0 10px 0 14px;
	}

	.header-actions {
		gap: 6px;
	}

	.header-actions .search-form-inline input[type="search"] {
		width: 100px;
		padding: 5px 6px;
		font-size: 12px;
	}

	.header-actions .search-form-inline button {
		padding: 5px 10px;
		font-size: 12px;
	}
}

/* 汉堡菜单内筛选框：竖排全宽 */
.mobile-menu .nav-filters {
	flex-direction: column;
	align-items: stretch;
	margin: 12px 0 0;
}

.mobile-menu .nav-drop {
	width: 100%;
}

.mobile-menu .nav-drop-btn {
	width: 100%;
	justify-content: space-between;
	font-size: 11px;
	padding: 6px 12px;
}

/* 手机端下拉标题项：大字与小字并排，只有后续具体筛选项继续保持两行。 */
.mobile-menu .nav-drop-item:first-child .nav-drop-copy {
	flex-direction: row;
	align-items: baseline;
	gap: 8px;
}

.mobile-menu .nav-drop-item:first-child {
	white-space: nowrap;
}

.mobile-menu .nav-drop-item:first-child .nav-drop-desc {
	font-size: 12px;
	line-height: inherit;
}

.mobile-menu .nav-drop-list {
	display: none;
	position: static;
	width: 100%;
	transform: none;
	margin-top: 6px;
}

.mobile-menu .nav-drop.open .nav-drop-list {
	display: block;
}

/* 桌面导航栏筛选框：显示；手机端隐藏（筛选在汉堡菜单） */
.nav-capsule>.nav-filters {
	display: flex;
}

@media (max-width: 820px) {
	.nav-capsule>.nav-filters {
		display: none;
	}
}

/* ===== 详情页：设备效果预览 + 信息栏 ===== */
.device-preview {
	display: flex;
	justify-content: center;
	align-items: center;
	background: #f6f6f7;
	border-radius: 16px;
	padding: 30px;
	margin-bottom: 22px;
}

/* 手机锁屏 */
.device-preview.portrait .device-frame {
	width: 280px;
	height: 560px;
	border-radius: 26px;
	border: 7px solid #000;
	background: #000;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
	position: relative;
}

.device-preview.portrait .device-frame::before {
	content: '';
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	width: 52px;
	height: 5px;
	background: #15151a;
	border-radius: 3px;
	z-index: 2;
}

.device-preview.portrait .device-screen {
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 20px;
}

.device-preview.portrait .device-screen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 电脑壁纸（显示器） */
.device-preview.landscape .device-frame {
	width: 720px;
	height: 420px;
	border-radius: 10px;
	border: 8px solid #101014;
	background: #000;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
	position: relative;
}

.device-preview.landscape .device-frame::after {
	content: '';
	position: absolute;
	bottom: -18px;
	left: 50%;
	transform: translateX(-50%);
	width: 110px;
	height: 12px;
	background: #0c0c0f;
	border-radius: 3px;
}

.device-preview.landscape .device-screen {
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 4px;
}

.device-preview.landscape .device-screen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 头像预览：微信 + 抖音（上下排列） */
.device-preview.square {
	margin-bottom: 14px;
}

.avatar-preview {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 26px;
	width: 100%;
}

.avatar-card {
	border-radius: 18px;
	padding: 26px 30px 18px;
	min-width: 300px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
}

.avatar-card-title {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 700;
	color: #2d3136;
	margin-bottom: 16px;
}

.avatar-card-title svg {
	display: block;
}

.avatar-caption {
	margin-top: 15px;
	font-size: 12px;
	color: rgba(0, 0, 0, 0.45);
	text-align: center;
}

/* 微信卡片 */
.avatar-card.wx {
	background: #ededed;
}

.wx-mock {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.wx-avatar {
	width: 96px;
	height: 96px;
	border-radius: 14px;
	overflow: hidden;
	flex: none;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.wx-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wx-bubble {
	background: #95ec69;
	border-radius: 4px 14px 14px 14px;
	padding: 12px 16px;
	color: #222;
	max-width: 200px;
}

.wx-name {
	font-weight: 700;
	font-size: 16px;
	margin-bottom: 4px;
}

.wx-msg {
	font-size: 14px;
	opacity: 0.9;
}

/* 抖音卡片 */
.avatar-card.dy {
	background: #1b1b1f;
	margin-top: 0px;
}

.dy-title {
	color: #fff;
}

.dy-mock {
	display: flex;
	align-items: center;
	gap: 20px;
}

.dy-avatar {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	padding: 4px;
	background: linear-gradient(135deg, #25f4ee 0%, #fe2c55 100%);
	flex: none;
}

.dy-avatar img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	border: 4px solid #1b1b1f;
	box-sizing: border-box;
}

.dy-name {
	color: #fff;
	font-weight: 700;
	font-size: 17px;
}

.dy-id {
	color: rgba(255, 255, 255, 0.55);
	font-size: 13px;
	margin: 4px 0 7px;
}

.dy-meta {
	color: rgba(255, 255, 255, 0.72);
	font-size: 13px;
}

.dy-caption {
	color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 600px) {
	.avatar-preview {
		align-items: center;
		gap: 42px;
		padding: 22px 16px 6px;
	}

	.avatar-card {
		width: 100%;
		max-width: 340px;
		padding: 32px 30px 22px;
	}
	.avatar-card.dy {
	    margin-top: -20px;
}
}


.dl-bar {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 6px;
}

/* 下载按钮下面那几行小字（4K / 直链 / 实况） */
.dl-note {
	margin: 15px 0 0;
	font-size: 12px;
	line-height: 1.7;
	opacity: 0.5;
}

.detail-side .like-btn {
	padding: 10px 22px;
}

@media (max-width: 820px) {
	.device-preview {
		width: 100%;
		min-width: 0;
	}

	.device-preview.portrait .device-frame {
		width: 200px;
		height: 410px;
	}

	.device-preview.landscape .device-frame {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		/* 手机宽度下 8px 外框显得偏厚，单独收到 6px；桌面端仍保留原尺寸。 */
		border-width: 6px;
	}
}

/* 右侧边栏内壁纸信息适配 */
.detail-side .info-list {
	margin-bottom: 12px;
}

.detail-side .info-label {
	flex-basis: 60px;
}

.detail-side .wallpaper-desc {
	margin: 12px 0 14px;
}

.detail-side .dl-bar {
	display: flex;
	gap: 10px;
}

.detail-side .dl-btn.primary,
.detail-side .like-btn {
	flex: 1;
	justify-content: center;
}


/* 壁纸信息：清晰两栏 */
.wp-info {
	margin-bottom: 14px;
}

.wp-info-item {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px dashed #e5e7eb;
}

.wp-info-item:last-child {
	border-bottom: none;
}

.wp-info-key {
	color: #9aa1aa;
	font-size: 13px;
	white-space: nowrap;
}

.wp-info-val {
	color: #0f0f10;
	font-size: 14px;
	font-weight: 500;
}

.meta-tag {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 999px;
	background: #eef0f3;
	border: 1px solid #d6dae0;
	color: #0f0f10;
	font-size: 12px;
	font-weight: 600;
}

/* 相关壁纸（全宽，页面最底部） */
.detail-section {
	margin-top: 22px;
	padding: 22px;
	background: var(--card);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

.detail-sec-title {
	margin: 0 0 16px;
	color: #0f0f10;
	font-size: 17px;
}


.wp-info-author .wp-info-val {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wp-info-author img.avatar {
	border-radius: 50%;
	object-fit: cover;
}

/* 文章页标题 */
.single-title {
	color: #0f0f10;
	font-size: 24px;
	margin: 0 0 18px;
}

/* ===== 近期分享：文章卡片流 ===== */
.recent-post-card {
	padding: 22px;
	margin-bottom: 20px;
	background: rgba(255, 255, 255, .6);
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

html.dark .recent-post-card {
	background: rgba(255, 255, 255, .05);
	border-color: rgba(255, 255, 255, .08);
}

/* 作者行：头像+昵称+时间 */
.recent-post-author-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.recent-post-avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(255, 255, 255, .3);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
	flex-shrink: 0;
}

.recent-post-avatar-initial {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #c9942e;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
}

.recent-post-author-info {
	flex: 1;
	min-width: 0;
	padding-top: 2px;
}

.recent-post-author-name-row {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 4px;
}

.recent-post-author-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
}

.recent-post-dot {
	color: var(--muted);
	font-size: 12px;
}

.recent-post-time {
	font-size: 12px;
	color: var(--muted);
}

.recent-post-author-desc {
	font-size: 12px;
	color: var(--muted);
	line-height: 1.4;
}

/* 标题行：分享图标+标题 */
.recent-post-title-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}

.recent-share-ico {
	display: inline-flex;
	align-items: center;
	color: #22c55e;
	flex-shrink: 0;
	float: left;
}

.recent-post-title {
	font-size: 18px;
	margin: 0;
	font-weight: 600;
	flex: 1;
	min-width: 0;
}

.recent-post-title a {
	color: var(--text);
	text-decoration: none;
}

.recent-post-title a:hover {
	color: var(--brand);
}

.recent-post-count {
	flex: 0 0 auto;
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.recent-post-stats {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}

.recent-stat {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	color: var(--muted);
}

.recent-stat .stat-ico {
	display: inline-flex;
	align-items: center;
}

/* 近期分享页布局 */
.recent-page-layout {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 24px;
	align-items: start;
}

.recent-page-layout .detail-main2 {
	min-width: 0;
}

.recent-page-layout .detail-side {
	position: sticky;
	top: 80px;
}

/* 手机端隐藏右侧边栏 */
@media (max-width: 768px) {
	.recent-page-layout {
		grid-template-columns: 1fr;
	}

	.recent-page-layout .detail-side {
		display: none;
	}
}


.recent-post-stats {
	display: flex;
	gap: 16px;
	align-items: center;
	flex-shrink: 0;
}

.recent-stat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 16px;
	color: #6b7280;
}

.stat-ico {
	font-size: 20px;
}

.recent-post-excerpt {
	font-size: 14px;
	color: #374151;
	line-height: 1.7;
	margin-bottom: 16px;
}

.recent-post-gallery {
	column-count: 4;
}

.recent-post-img {
	display: block;
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	background: #eef0f3;
	margin-bottom: 12px;
	break-inside: avoid;
}

.recent-post-img img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.3s var(--ease, ease);
}

.recent-post-img:hover img {
	transform: scale(1.05);
}

.recent-post-img:hover {
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}


/* ===== 壁纸无限滚动指示器 ===== */
.infinite-indicator {
	/* 和「加载更多」按钮统一：小药丸背景 */
	width: fit-content;
	max-width: 100%;
	margin: 24px auto 8px;
	padding: 10px 30px;
	border-radius: 999px;
	background: rgba(128, 128, 128, 0.25);
	color: #9ca3af;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}

/* 加载完成后脚本会把文字清空，空的时候不显示药丸 */
.infinite-indicator:empty {
	display: none;
}

/* 无限滚动的观察目标：不占视觉空间，但必须有布局尺寸 */
.infinite-sentinel {
	width: 100%;
	height: 1px;
	pointer-events: none;
	opacity: 0;
}

/* ===== 近期热门文章（侧边栏） ===== */
.widget-title {
	font-size: 16px;
	font-weight: 600;
	color: #0f0f10;
	margin: 0 0 12px;
}

.hot-posts {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hot-post-item {
	margin-bottom: 6px;
}

.hot-post-item a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 8px;
	text-decoration: none;
	color: #374151;
	font-size: 14px;
	transition: background 0.2s ease;
}

.hot-post-item a:hover {
	background: #f3f4f6;
}

.hot-post-title {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hot-post-views {
	font-size: 13px;
	color: #9ca3af;
	flex-shrink: 0;
}

/* ===== 媒体库视频卡片 ===== */
.wp-video {
	width: 100%;
	height: auto;
	display: block;
	background: #000;
}

.wp-video-badge {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 48px;
	height: 48px;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	pointer-events: none;
	transition: opacity 0.2s;
}

.wp-video-badge::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 55%;
	transform: translate(-50%, -50%);
	border-left: 16px solid #fff;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
}

.recent-post-img,
.wp-thumb {
	position: relative;
}

/* ===== 页脚链接（.footer-links 那一组已删：模板里没人用，是死代码，
   页脚真正的链接都在下面的 .footer-contact 里） ===== */

/* 页脚底色是白的（.site-footer{background:#fff}），这两处链接原来是 #9ca3af，
   在白底上只有 2.54:1 —— 远低于正文要求的 4.5:1。加深一档到 #6b7280（4.83:1）刚好过线，
   再深就和正文的 --muted 抢戏了。
   hover 原来是 #ffffff：那是页脚还深色年代的遗留，放在白底上等于把字擦掉，改成往深里压。 */
.site-footer .footer-contact {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
	margin-bottom: 12px;
	color: #6b7280;
	font-size: 14px;
}

.site-footer .footer-contact a {
	color: #6b7280;
	text-decoration: none;
}

.site-footer .footer-contact a:hover {
	color: #1c1c1e;
}

/* 深色模式下 `.site-footer a{color:var(--text)!important}` 会盖掉上面两条 hover，
   所以单独补一个「越悬停越亮」的反馈；不写的话深色里 hover 没变化。 */
html.dark .site-footer .footer-contact a:hover {
	color: #fff !important
}

.site-footer .icp-record a {
	color: #6b7280;
	text-decoration: none;
}

.site-footer .icp-record a:hover {
	color: #1c1c1e;
}

html.dark .site-footer .icp-record a:hover {
	color: #fff !important;
}

/* ===== 回到顶部按钮 ===== */
.back-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #1a1a1a;
	color: #ffffff;
	border: 2px solid rgba(255, 255, 255, 0.3);
	box-sizing: border-box;
	font-size: 20px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #333333;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
	z-index: var(--z-float);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.back-top.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.back-top:hover {
	background: #333333;
}

/* ===== 搜索结果标题 ===== */
.search-title {
	font-size: 22px;
	font-weight: 600;
	color: #0f0f10;
	margin: 0 0 20px;
}

/* ===== 版权投诉表单 ===== */
.takedown-block {
	margin-top: 10px;
	padding: 22px;
	background: #f6f6f7;
	border-radius: 14px;
}
html.dark .takedown-block {
	margin-top: 10px;
	padding: 22px;
	background: rgba(0, 0, 0, 0.10);
	border-radius: 14px;
}
.takedown-block h3 {
	margin: 0 0 6px;
	font-size: 20px;
}

.takedown-tip {
	color: #666;
	font-size: 14px;
	margin: 0 0 14px;
}

.takedown-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.takedown-form label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: #222;
}

.takedown-form input[type="text"],
.takedown-form textarea {
	padding: 10px 12px;
	border: 1px solid #ddd;
	border-radius: 8px;
	font-size: 14px;
	background: #fff;
	color: #111;
}

html.dark .takedown-form label {
	color: #e7e6e6;
}
html.dark .takedown-form input[type="text"],
html.dark .takedown-form textarea {
	padding: 10px 12px;
	border: 1px solid #ddd;
	border-radius: 8px;
	font-size: 14px;
	background: #eee;
	color: #111;
}
.takedown-form textarea {
	resize: vertical;
}

.takedown-check {
	flex-direction: row !important;
	align-items: center;
	font-weight: 400 !important;
	color: #555;
}

.takedown-check input {
	width: auto;
	margin-right: 8px;
}

.takedown-btn {
	padding: 11px 0;
	background: #1a1a1a;
	color: #fff;
	border: none;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.takedown-btn:hover {
	background: #333;
}

.takedown-ok {
	padding: 12px 16px;
	background: #e7f6ea;
	color: #1e7a34;
	border-radius: 10px;
	font-size: 14px;
	margin-bottom: 14px;
}

.takedown-err {
	padding: 12px 16px;
	background: #fdecec;
	color: #b02323;
	border-radius: 10px;
	font-size: 14px;
	margin-bottom: 14px;
}

.takedown-form input[type="file"] {
	padding: 8px;
	border: 1px dashed #bbb;
	border-radius: 8px;
	font-size: 13px;
	background: #fff;
	color: #333;
}

.takedown-warn {
	padding: 12px 16px;
	background: #fff4e5;
	color: #9a6700;
	border-radius: 10px;
	font-size: 14px;
	margin-bottom: 14px;
}


/* ===== 广告位 ===== */
.ad-slot {
	margin: 0 auto 24px;
	text-align: center;
	max-width: 100%;
	overflow: hidden;
}

.ad-home_top,
.ad-list_top {
	margin-bottom: 26px;
}


/* ===== 下载解锁模态 ===== */
.ad-unlock-modal {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.72);
	/* 自带遮罩的弹窗，一层顶两层，所以给 --z-modal（比纯遮罩高） */
	z-index: var(--z-modal);
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.ad-unlock-modal.show {
	display: flex;
}

.ad-unlock-box {
	background: #17181a;
	border: 1px solid #26272a;
	border-radius: 16px;
	padding: 24px;
	width: 100%;
	max-width: 440px;
	text-align: center;
	color: #eee;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.ad-unlock-title {
	margin: 0 0 4px;
	font-size: 18px;
}

.ad-unlock-slot {
	margin: 14px 0;
	min-height: 60px;
}

.ad-unlock-count {
	font-size: 14px;
	color: #cfd0d3;
	margin-bottom: 14px;
}

.dl-unlock-btn {
	background: #3a3d42;
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 12px 28px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.dl-unlock-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.ad-unlock-close {
	background: none;
	border: none;
	color: #888;
	cursor: pointer;
	margin-top: 12px;
	font-size: 13px;
}


/* 手机端：下载解锁弹窗居中卡片 */
@media (max-width: 820px) {
	.ad-unlock-modal {
		padding: 20px;
	}

	.ad-unlock-box {
		max-width: 92%;
	}

	.ad-unlock-slot {
		min-height: 40px;
	}

	.ad-unlock-box .dl-unlock-btn {
		width: 100%;
	}
}


/* ===== 头部全屏背景 ===== */
.site-hero {
	height: 62vh;
	min-height: 320px;
	background-size: cover;
	background-position: center top;
	position: relative;
}

.site-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 58%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--bg) 100%);
}

@media (max-width: 820px) {
	.site-hero {
		height: 54vh;
		min-height: 260px;
	}
}


/* ===== 头部全屏背景：只做背景，导航与内容位置不变 ===== */
body {
	position: relative;
}

.site-hero {
	position: absolute !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 0;
}

.site-header {
	margin-top: -76px;
}

.site-main {
	position: relative;
	z-index: 1;
	padding: calc(62vh - 74px) 0 48px;
}

@media (max-width: 820px) {
	.site-main {
		padding-top: calc(54vh - 60px);
	}
}


/* ===== 内容上移：调矮背景图，内容贴近头部 ===== */
.site-hero {
	height: 40vh !important;
	min-height: 240px;
}

.site-main {
	padding-top: calc(40vh - 74px);
}

@media (max-width: 820px) {
	.site-hero {
		height: 32vh !important;
		min-height: 200px;
	}

	.site-main {
		padding-top: calc(32vh - 60px);
	}
}


/* ===== 内容恢复顶格：背景图仅作背景，中间不留空 ===== */
.site-main {
	padding: 26px 0 48px !important;
}

.site-hero {
	position: absolute !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 0;
}


/* ===== 背景图固定到页面底部不动 ===== */
.site-hero {
	position: fixed !important;
	top: auto !important;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 0;
}


/* ===== 背景图固定到页面顶部不动 ===== */
.site-hero {
	position: fixed !important;
	top: 0 !important;
	bottom: auto !important;
	left: 0;
	right: 0;
	z-index: 0;
}


/* ===== 壁纸卡片：分辨率角标（4K / 6K / 8K）+ 悬停信息 ===== */
.wp-badge-4k,
.wp-badge-6k,
.wp-badge-8k {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	background: rgba(0, 0, 0, 0.72);
	color: #ffd28f;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
	padding: 2px 7px;
	border-radius: 6px;
	line-height: 1.2;
	pointer-events: none;
}

/* 6K / 8K 换色，扫一眼就能和 4K 分开 */
.wp-badge-6k {
	color: #9fe6a0;
}

.wp-badge-8k {
	color: #ff9fb2;
}

/* 实况图角标：放右上角，避免和左上角的 4K 角标打架 */
.wp-badge-live {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	background: rgba(0, 0, 0, 0.72);
	color: #8fe3ff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
	padding: 2px 7px;
	border-radius: 6px;
	line-height: 1.2;
	pointer-events: none;
}

/* SEO：这三个 H1 保留在 HTML 里给搜索引擎和屏幕阅读器，但视觉上完全隐藏，不影响版面。
   （用的是标准的无障碍隐藏写法：绝对定位 + 1px + clip，不是 display:none —— 
   display:none 的内容搜索引擎会当作不存在。）
   想让某个标题重新显示出来，把对应选择器从这条规则里删掉即可。 */
.wp-detail-title,
.wp-archive-title,
.home-hero-title {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* 「近期分享」分类页的置顶块 */
.recent-sticky-block {
	position: relative;
	margin-bottom: 18px;
}

.recent-sticky-label {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--brand, #111);
	color: #fff;
	font-size: 12px;
	line-height: 1.5;
	vertical-align: middle;
	position: relative;
	top: -1px;
}

.dark .recent-sticky-label {
	background: rgba(255, 255, 255, 0.9);
	color: #111;
}

.wp-hover {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: 36px 12px 10px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.82) 100%);
	opacity: 0;
	transition: opacity 0.22s ease;
	pointer-events: none;
}

@media (min-width: 821px) and (any-hover: hover) and (any-pointer: fine) {
	.wp-thumb:hover .wp-hover {
		opacity: 1;
	}
}

.wp-hover-title {
	display: block;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

.wp-hover-tags {
	display: block;
	color: rgba(255, 255, 255, 0.75);
	font-size: 11px;
	margin-top: 3px;
}

/* 手机端：下拉框文字统一再缩小 */
@media (max-width: 820px) {
	.nav-drop-btn {
		font-size: 15px;
		padding: 5px 12px;
	}

	.mobile-menu .nav-drop-btn {
		font-size: 15px;
		padding: 6px 12px;
	}

	.mobile-menu .nav-drop-item {
		font-size: 15px;
		padding: 5px 10px;
	}

	.mobile-menu .nav-drop-item--described {
		padding: 8px 10px;
	}

	.mobile-menu .nav-drop-label {
		font-size: 14px;
	}

	.mobile-menu .nav-drop-desc {
		font-size: 12px;
	}

}

.widget-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.color-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-right: 6px;
}

a.color-chip {
	color: inherit;
}

a.color-chip:hover {
	color: var(--gold-text);
}

.color-swatch {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	flex: 0 0 auto;
}

.dl-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--z-overlay);
	background: rgba(0, 0, 0, .75);
	display: none;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 16px;
}

.dl-overlay.show {
	display: flex;
}

.dl-spinner {
	width: 44px;
	height: 44px;
	border: 4px solid rgba(255, 255, 255, .3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: dlspin 1s linear infinite;
}

.dl-text {
	color: #fff;
	font-size: 16px;
}

@keyframes dlspin {
	to {
		transform: rotate(360deg)
	}
}


@media (max-width:820px) {


	.brand-name-logo {
		font-size: 24px;
	}
}

.brand-name-logo {
	font-size: 34px;
	font-weight: 400;
	color: #fff;
	font-family: "站酷小薇LOGO体", "YouYuan", "幼圆", "PingFang SC", "Microsoft YaHei", sans-serif;
	letter-spacing: 1px;
	line-height: 1;
	text-decoration: none;
	text-shadow: 0 0 14px rgba(255, 255, 255, 0.15);
}

.brand-name-logo:hover {
	color: #fff;
	opacity: 0.94;
}

@keyframes xianer-fadein {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes xianer-slidein {
	from {
		opacity: 0;
		transform: translateX(-26px);
	}

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

/* ===== 按壁纸类目固定列数：手机壁纸4列 / 电脑壁纸3列 =====
.wallpaper-grid[data-orientation='portrait'] { column-count: 4 !important; }
.wallpaper-grid[data-orientation='landscape'] { column-count: 3 !important; }
.wallpaper-grid[data-orientation='square'] { column-count: 5 !important; }
/* 头像列表：卡片固定为正方形 */
.wallpaper-grid[data-orientation='square'] .wp-thumb {
	aspect-ratio: 1 / 1;
}

.wallpaper-grid[data-orientation='square'] .wp-thumb img,
.wallpaper-grid[data-orientation='square'] .wp-thumb video {
	/* 必须带 !important：后面有一条 `.wallpaper-grid .wp-thumb img { height: auto !important }`
	   （是给普通瀑布流用的），不加就会被它压回按原比例显示 —— 那样竖图只会露出顶上一条，
	   既不居中也不撑满。横屏那套规则当初就是这么处理的。 */
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: 50% 50% !important;
}

/* xianer cols force refresh */

/* ===== 原 functions.php 中 wp_footer 内联样式，已并入本文件以便浏览器缓存 ===== */
.wp-video-badge {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .5);
	border: 2px solid rgba(255, 255, 255, .9);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 4;
	transition: opacity .2s var(--ease), transform .2s var(--ease), background .2s var(--ease)
}

.wp-video-badge::after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-left: 16px solid #fff;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
	margin-left: 3px
}

.recent-post-img {
	position: relative;
	display: block;
	overflow: hidden
}

.wallpaper-card .wp-thumb {
	position: relative
}

.recent-post-gallery .recent-post-img {
	animation: xianer-slidein 0.55s cubic-bezier(0.2, 0.6, 0.3, 1)
}

body.xianer-mobile .wallpaper-grid,
body.xianer-mobile .wallpaper-grid[data-orientation="portrait"],
body.xianer-mobile .wallpaper-grid[data-orientation="landscape"] {
	grid-template-columns: repeat(2, 1fr) !important;
	display: grid
}

.wallpaper-grid,
.wallpaper-grid[data-orientation="portrait"],
.wallpaper-grid[data-orientation="landscape"] {
	column-count: auto !important;
	column-width: auto !important;
	column-gap: normal !important
}

.wallpaper-grid>div {
	align-items: stretch !important;
	grid-column: 1/-1;
	width: 100% !important
}

.wallpaper-grid .wallpaper-card {
	width: 100% !important;
	max-width: 100% !important;
	align-self: stretch !important
}

.wallpaper-grid .wallpaper-card .wp-thumb,
.wallpaper-grid .wp-thumb img {
	width: 100% !important;
	max-width: 100% !important
}

.wallpaper-grid .wp-thumb img {
	height: auto !important
}

/* 分享正文/详情里的图片按上传文件自身宽高输出。
   这里只取消“电脑壁纸 16:10、方图 1:1”这类列表裁切，不改变分类页和首页的卡片规则；
   data-orientation 仍保留，用于决定瀑布流列数。 */
.wallpaper-grid.is-original-ratio .wp-thumb {
	aspect-ratio: auto !important;
	height: auto !important
}

.wallpaper-grid.is-original-ratio .wp-thumb picture {
	width: 100% !important;
	height: auto !important
}

.wallpaper-grid.is-original-ratio .wp-thumb img,
.wallpaper-grid.is-original-ratio .wp-thumb video {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: auto !important;
	object-fit: contain !important
}

/* 横屏列表原有规则的选择器更长，这里补一条同等级以上的覆盖，确保分享详情也不会裁切。 */
.wallpaper-grid.is-original-ratio[data-orientation] .wallpaper-card .wp-thumb img,
.wallpaper-grid.is-original-ratio[data-orientation] .wallpaper-card .wp-thumb video {
	height: auto !important;
	object-fit: contain !important
}

@media(max-width:820px) {

	.brand-name,
	.brand-name-logo {
		font-size: 24px !important
	}

	.header-actions {
		gap: 4px !important
	}

	.header-actions .search-form-inline input[type="search"] {
		width: 78px !important;
		padding: 5px 4px !important;
		font-size: 11.5px !important
	}

	.header-actions .search-form-inline button {
		padding: 5px 8px !important;
		font-size: 11px !important
	}
}

.site-main {
	padding-top: 20px !important
}

.iphone-frame {
	position: relative;
	margin: 0 auto;
	width: min(250px, 78vw);
	aspect-ratio: 9/19.5;
	background: #0a0a0c;
	border-radius: 36px;
	padding: 6px;
	box-shadow: 0 12px 36px rgba(0, 0, 0, .28);
	flex: none
}

.iphone-frame:after {
	content: "";
	position: absolute;
	inset: 2px;
	border-radius: 32px;
	border: 1px solid rgba(255, 255, 255, .10);
	pointer-events: none
}

.iphone-notch {
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	width: 70px;
	height: 21px;
	background: #000;
	border-radius: 11px;
	z-index: 2
}

.iphone-screen {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 30px;
	overflow: hidden;
	background: #000
}

.iphone-screen img,
.iphone-screen video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block
}

.iphone-home {
	position: absolute;
	bottom: 5px;
	left: 50%;
	transform: translateX(-50%);
	width: 96px;
	height: 3px;
	background: rgba(255, 255, 255, .38);
	border-radius: 2px;
	z-index: 2
}

/* ===== 媒体详情：手机预览三模式 =====
   边框和真实图片沿用之前的 CSS iPhone；透明画布只叠加主图工具的锁屏 / 主屏 UI。 */
.device-preview.portrait {
	position: relative
}

.phone-ui-canvas {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	pointer-events: none
}

.device-preview.portrait .iphone-home {
	bottom: 7px
}

.phone-preview-switcher {
	position: absolute;
	top: 30px;
	right: 16px;
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 7px
}

.phone-preview-mode {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: rgba(28, 28, 30, .58);
	filter: drop-shadow(0 1px 2px rgba(255, 255, 255, .28));
	box-shadow: none;
	cursor: pointer;
	transition: color .18s ease, opacity .18s ease
}

.phone-preview-mode:hover {
	background: transparent;
	color: #111
}

.phone-preview-mode.is-active {
	background: transparent;
	color: #c9942e
}

.phone-preview-mode:focus-visible {
	outline: 2px solid #c9942e;
	outline-offset: 2px
}

html.dark .phone-preview-mode {
	color: rgba(255, 255, 255, .62);
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .34))
}

html.dark .phone-preview-mode:hover {
	color: #fff
}

html.dark .phone-preview-mode.is-active {
	color: #c9942e
}

@media (max-width: 820px) {
	.phone-preview-switcher {
		top: 30px;
		right: 6px;
		gap: 6px
	}

	.phone-preview-mode {
		width: 32px;
		height: 32px
	}
}


/* 深色模式的 token 覆盖。
   这一块在 P6「清死 CSS」时被我误删过（那是我的判定 bug：选择器里只有 .dark 时，
   我把 dark 排除出"死类"判断之后，反而让它变成"全是死类"被删掉了）。
   现在从备份补回来，并且把当天新加的 4 个 token（--gold-text / --hot-text / --glass / --danger）一起带上。 */
html.dark {
	--brand: #e6e6ea;
	--brand-strong: #ffffff;
	--brand-soft: #26262c;
	--brand-soft-2: #30303a;
	--gold-text: #c9942e;
	--hot-text: #ff8a5b;
	--glass: rgba(255, 255, 255, .05);
	--danger: #ff7b72;
	--ink: #f0f0f4;
	--text: #d8d8de;
	--muted: #94949e;
	--border: #2a2a31;
	--border-soft: #232329;
	--card: #1b1b21;
	--bg: #111116;
	--bg-soft: #18181f;
	--warn-soft: #e6e6ea;
	--warn-text: #111116;
	--shadow-xs: 0 1px 2px rgba(0, 0, 0, .45);
	--shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
	--shadow-md: 0 10px 28px rgba(0, 0, 0, .55);
	--shadow-brand: 0 10px 22px rgba(0, 0, 0, .55)
}

html.dark .site-hero {
	opacity: .92
}

.theme-toggle {
	background: none;
	border: none;
	cursor: pointer;
	padding: 7px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--text);
	border-radius: var(--radius-sm)
}

.theme-toggle:hover {
	background: var(--bg-soft)
}

.icon-sun {
	display: none
}

html.dark .icon-sun {
	display: inline-block
}

html.dark .icon-moon {
	display: none
}

.header-actions {
	position: relative
}

.search-toggle {
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--text);
	border-radius: var(--radius-sm)
}

.search-toggle:hover {
	background: var(--bg-soft)
}

.header-search-drop {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	display: none;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 14px;
	box-shadow: var(--shadow-md);
	padding: 8px;
	z-index: 70;
	min-width: min(280px, calc(100vw - 24px))
}

.header-search-drop.open {
	display: block
}

.header-search-drop form {
	display: flex;
	gap: 6px;
	align-items: center
}

.header-search-drop input {
	flex: 1;
	min-width: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 9px 12px;
	font-size: 14px;
	background: var(--bg-soft);
	color: var(--text);
	outline: none
}

.header-search-drop input:focus {
	border-color: var(--brand)
}

.home-hero {
	position: relative;
	margin: 0 0 24px;
	border-radius: var(--radius-lg);
	padding: 70px 20px 30px;
	background-size: cover;
	background-position: center;
	overflow: hidden
}

.home-hero:after {
	content: none
}

.home-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin: 0 auto;
	text-align: center
}

.home-search {
	display: flex;
	gap: 6px;
	align-items: center;
	background: rgba(255, 255, 255, .40);
	border: 2px solid rgba(0, 0, 0, .20);
	border-radius: var(--radius-pill);
	padding: 6px 6px 6px 20px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .15)
}

.home-search input {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	color: var(--text);
	font-size: 16px;
	padding: 10px 4px
}

.home-search input {
	background: transparent;
	border: none;
	color: #1c1c1e;
	font-size: 15px;
	flex: 1;
	min-width: 0
}

.home-search input::placeholder {
	color: rgba(0, 0, 0, .5)
}

.home-search button {
	border: none;
	background: #0f0f10;
	color: #fff;
	border-radius: var(--radius-pill);
	padding: 11px 26px;
	font-size: 15px;
	cursor: pointer;
	flex: none
}

.home-search button:hover {
	opacity: .92
}

.hot-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 18px
}

.hot-tag {
	display: inline-block;
	padding: 6px 15px;
	border-radius: var(--radius-pill);
	background: var(--card);
	border: 1px solid var(--border);
	color: var(--text);
	font-size: 13px;
	text-decoration: none;
	box-shadow: var(--shadow-xs)
}

.hot-tag:hover {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff
}

html.dark .home-search button {
	background: #fff;
	color: #0f0f10
}

html.dark .dl-btn.primary {
	background: #fff;
	color: #0f0f10
}

html.dark .home-search {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(0, 0, 0, .5)
}

html.dark .home-search input {
	color: #fff
}

html.dark .home-search input::placeholder {
	color: rgba(255, 255, 255, .55)
}

html.dark .hot-tag:hover {
	background: #fff;
	border-color: #fff;
	color: #0f0f10
}

html.dark .cat-group-title {
	color: var(--text);
	background: var(--bg-soft)
}

html.dark .cat-group-title:hover {
	background: var(--border)
}

html.dark .sidebar-title a {
	color: var(--text)
}

html.dark .sidebar-title a:hover {
	color: var(--brand)
}

html.dark .sidebar-empty {
	color: var(--muted)
}

.menu-toggle span {
	background: #2a2a2e
}

html.dark .menu-toggle span {
	background: #fff
}

.header-search-drop form {
	position: relative;
	display: block;
	margin: 0
}

.header-search-drop form input[type=search] {
	width: 100%;
	height: 42px;
	padding: 0 78px 0 18px;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 999px;
	background: #f7f7f8;
	color: #1c1c1e;
	font-size: 14px;
	outline: none
}

.header-search-drop form input::placeholder {
	color: rgba(0, 0, 0, .4)
}

html.dark .header-search-drop form input[type=search] {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .12);
	color: #e5e5e9
}

html.dark .header-search-drop form input::placeholder {
	color: rgba(255, 255, 255, .5)
}

/* ===== 以图搜图：搜索按钮前的相机入口 =====
   控件本身不占输入框宽度：头部搜索和首页搜索都作为普通 flex 项。
   上传后按钮只做轻微脉冲，不改变搜索框的位置。 */
.xianer-image-search {
	display: contents
}

.xianer-image-search-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	flex: 0 0 auto;
	border: 0;
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .18s var(--ease), color .18s var(--ease), opacity .18s var(--ease)
}

.xianer-image-search-btn svg {
	display: block
}

.xianer-image-search-label {
	line-height: 1
}

.xianer-image-search-btn.is-loading svg {
	animation: xianer-image-search-pulse .72s ease-in-out infinite alternate
}

.xianer-image-search-btn:disabled {
	cursor: wait;
	opacity: .62
}

.xianer-image-search-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px
}

.header-search-drop form input[type=search] {
	padding-right: 114px
}

.header-search-drop .xianer-image-search-btn {
	position: absolute;
	top: 50%;
	right: 70px;
	transform: translateY(-50%);
	width: 32px;
	min-width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 999px;
	background: transparent;
	color: rgba(28, 28, 30, .62)
}

.header-search-drop .xianer-image-search-btn:hover {
	background: rgba(0, 0, 0, .07);
	color: #111
}

html.dark .header-search-drop .xianer-image-search-btn {
	background: transparent;
	color: rgba(255, 255, 255, .72)
}

html.dark .header-search-drop .xianer-image-search-btn:hover {
	background: rgba(255, 255, 255, .10);
	color: #fff
}

.home-search .xianer-image-search-btn {
	width: 42px;
	height: 42px;
	min-width: 42px;
	padding: 0;
	border-radius: 50%;
	background: transparent;
	color: rgba(28, 28, 30, .5)
}

.home-search .xianer-image-search-btn svg {
	width: 24px;
	height: 24px
}

.home-search .xianer-image-search-btn:hover {
	background: rgba(0, 0, 0, .13);
	color: #1c1c1e;
	opacity: 1
}

html.dark .home-search .xianer-image-search-btn {
	background: transparent;
	color: rgba(255, 255, 255, .62)
}

html.dark .home-search .xianer-image-search-btn:hover {
	background: rgba(255, 255, 255, .16);
	color: #fff
}

@keyframes xianer-image-search-pulse {
	from { opacity: .45; transform: scale(.92) }
	to { opacity: 1; transform: scale(1.06) }
}

@media (prefers-reduced-motion: reduce) {
	.xianer-image-search-btn.is-loading svg {
		animation: none;
		opacity: .65
	}
}

@media (max-width: 560px) {
	.home-search {
		gap: 4px;
		padding: 5px 5px 5px 12px
	}

	.home-search button[type=submit] {
		padding: 10px 16px;
		font-size: 14px
	}

	.header-search-drop .xianer-image-search-btn {
		width: 32px;
		min-width: 32px;
		padding: 0
	}

	.header-search-drop form input[type=search] {
		padding-right: 114px
	}
}

.nav-capsule a:not(.brand-name-logo) {
	color: rgba(28, 28, 30, .66) !important
}

.header-actions button {
	color: rgba(28, 28, 30, .72)
}

html.dark .nav-capsule a:not(.brand-name-logo) {
	color: #fff !important
}

html.dark .header-actions button {
	color: var(--text)
}

.nav-capsule a:not(.brand-name-logo):hover {
	color: #0f0f10 !important
}

.header-actions button:hover {
	color: #0f0f10;
	background: rgba(0, 0, 0, .08);
	border-radius: 999px
}

html.dark .nav-capsule a:not(.brand-name-logo):hover {
	color: #fff !important
}

html.dark .header-actions button:hover {
	color: #fff;
	background: rgba(255, 255, 255, .12)
}

html.dark .search-title {
	color: var(--text)
}

html.dark .recent-post-title a {
	color: var(--text)
}

html.dark .nav-capsule {
	background: rgba(10, 10, 12, .8) !important;
	backdrop-filter: blur(16px) saturate(1.4)
}

.detail-main .device-preview {
	background: transparent
}

html.dark .detail-main .device-preview {
	background: transparent
}

.detail-main .iphone-frame,
.detail-main .device-frame {
	box-shadow: 0 20px 40px -8px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .35)
}

html.dark .detail-main .iphone-frame,
html.dark .detail-main .device-frame {
	box-shadow: 0 20px 40px -8px rgba(0, 0, 0, .6), 0 8px 24px rgba(0, 0, 0, .45)
}

.detail-main {
	background: rgba(255, 255, 255, .6) !important
}

html.dark .detail-main {
	background: rgba(255, 255, 255, .05) !important
}

.detail-side>.widget {
	background: rgba(255, 255, 255, .6) !important
}

html.dark .detail-side>.widget {
	background: rgba(255, 255, 255, .05) !important
}

.detail-main,
.detail-side>.widget,
.detail-section,
.wallpaper-card {
	border: 0 !important
}

.detail-section {
	background: rgba(255, 255, 255, .6) !important
}

html.dark .detail-section {
	background: rgba(255, 255, 255, .05) !important
}

.wallpaper-card {
	background: transparent !important
}

.site-hero {
	min-height: 330px
}

.site-hero::after {
	height: 260px
}

html.dark .site-footer {
	background: #0f0f12 !important
}

html.dark .site-footer,
html.dark .site-footer a {
	color: var(--text) !important
}

html.dark .back-top {
	background: #0a0a0c !important;
	border: 1px solid rgba(255, 255, 255, .18) !important
}

@media (max-width:768px) {
	.site-header {
		padding: 12px 0 !important
	}
}

.mobile-menu {
	background: rgba(255, 255, 255, .92) !important
}

html.dark .mobile-menu {
	background: rgba(10, 10, 12, .92) !important
}

.header-search-drop {
	background: transparent !important
}

html.dark .header-search-drop {
	background: transparent !important
}

.header-search-drop input {
	border: 1px solid rgba(0, 0, 0, .12) !important
}

html.dark .header-search-drop input {
	border: 1px solid rgba(255, 255, 255, .12) !important
}

.header-search-drop {
	box-shadow: none !important
}

.header-search-drop {
	border: 0 !important
}

.header-search-drop input {
	background: rgba(255, 255, 255, .55) !important
}

html.dark .header-search-drop input {
	background: rgba(10, 10, 12, .6) !important
}

.nav-drop-list {
	background: rgba(255, 255, 255, .9) !important
}

html.dark .nav-drop-list {
	background: rgba(20, 20, 24, .9) !important
}

.comments-area {
	background: transparent !important;
	border: 0 !important;
}

.comment-respond {
	background: rgba(255,255,255,0.08) !important;
	border: 0 !important;
}

html.dark .comments-area {
	background: transparent !important
}

html.dark .comment-respond {
	background: rgba(0, 0, 0, .2) !important
}

html.dark .comment-respond textarea {
	background: rgba(255, 255, 255, .08) !important
}

html.dark .comments-area {
	border: 0 !important
}

html.dark .detail-main h1 {
	color: var(--text) !important
}

html.dark .detail-side .widget a {
	color: var(--text) !important
}

html.dark .detail-side .widget .dl-btn,
html.dark .dl-btn {
	color: #111 !important
}

.detail-side .widget a:hover {
	color: var(--brand) !important
}

html.dark .detail-side .widget a:hover {
	color: #fff !important
}

html.dark .detail-side .widget a:hover {
	background: transparent !important
}

.hot-tag {
	background: rgba(255, 255, 255, .5) !important
}

.hot-tag:hover {
	background: rgba(0, 0, 0, .2) !important;
	color: #111
}

html.dark .hot-tag {
	background: rgba(0, 0, 0, .4) !important
}

html.dark .hot-tag:hover {
	background: rgba(255, 255, 255, .25) !important;
	color: #fff
}

html.dark .hot-tag:hover {
	border-color: rgb(42, 42, 49) !important
}

html.dark .wp-info-val {
	color: var(--text)
}

html.dark .meta-tag {
	background: var(--bg-soft);
	border-color: var(--border);
	color: var(--text)
}

html.dark .detail-side .widget h3::before {
	background: var(--border)
}

html.dark .detail-sec-title {
	color: var(--text)
}

html.dark .device-preview {
	background: rgba(255, 255, 255, .06)
}

html.dark .wp-info-item {
	border-bottom-color: var(--border)
}

.nav-capsule {
	background: rgba(255, 255, 255, .6);
	border-color: rgba(0, 0, 0, .10)
}

html.dark .nav-capsule {
	background: rgba(10, 10, 12, .6);
	border-color: rgba(255, 255, 255, .09)
}

.brand-name-logo {
	color: #1c1c1e !important
}

.brand-tag {
	color: rgba(28, 28, 30, .62) !important
}

.nav-capsule a {
	color: #2a2a2e !important
}

html.dark .brand-name-logo {
	color: #fff !important
}

html.dark .brand-tag {
	color: rgba(255, 255, 255, .5) !important
}

html.dark .nav-capsule a {
	color: #fff !important
}

.nav-drop-btn {
	background: rgba(0, 0, 0, .05);
	color: #2a2a2e;
	border-color: rgba(0, 0, 0, .1)
}

.nav-drop-btn:hover {
	background: rgba(0, 0, 0, .08);
	border-color: rgba(0, 0, 0, .2)
}

.nav-drop-arrow {
	color: rgba(0, 0, 0, .6)
}

.nav-drop-list {
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .15)
}

.nav-drop-item {
	color: #333
}

.nav-drop-item:hover,
.nav-drop-item.active {
	background: #f1f1f3;
	color: #111
}

html.dark .nav-drop-btn {
	background: rgba(255, 255, 255, .05);
	color: #fff;
	border-color: rgba(255, 255, 255, .07)
}

html.dark .nav-drop-btn:hover {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .2)
}

html.dark .nav-drop-arrow {
	color: rgba(255, 255, 255, .6)
}

html.dark .nav-drop-list {
	background: #242424;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .4)
}

html.dark .nav-drop-item {
	color: #ddd
}

html.dark .nav-drop-item:hover,
html.dark .nav-drop-item.active {
	background: #3a3a3a;
	color: #fff
}

.mobile-menu {
	background: #fff
}

.mobile-menu a {
	color: #2a2a2e
}

html.dark .mobile-menu {
	background: rgba(8, 8, 10, .97)
}

html.dark .mobile-menu a {
	color: rgba(255, 255, 255, .82)
}

@media(max-width:820px) {
	.home-hero {
		padding: 50px 14px 15px
	}

	.home-search input {
		font-size: 15px
	}

	.hot-tag {
		font-size: 12px;
		padding: 5px 12px
	}
}

.breadcrumb {
	color: #555 !important
}

.breadcrumb a {
	color: #555 !important
}

html.dark .breadcrumb {
	color: #c8c8d0 !important
}

html.dark .breadcrumb a {
	color: #c8c8d0 !important
}

.hot-tag {
	border: none !important
}

.hot-tag:hover {
	border: none !important
}

html.dark .hot-tag:hover {
	border: none !important
}

.iphone-screen,
.device-screen {
	position: relative
}


.detail-side .dl-btn.primary {
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 0 28px
}

.detail-side .like-btn {
	height: 42px;
	padding: 0 18px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: #1c1c1e;
	display: flex;
	align-items: center;
	justify-content: center
}

html.dark .detail-side .like-btn {
	color: #111
}

.detail-side .dl-btn.primary:hover {
	transform: translateY(-1px);
	filter: brightness(1.1);
	background: var(--brand) !important;
	color: #fff !important
}

html.dark .detail-side .dl-btn.primary:hover {
	transform: translateY(-1px);
	filter: brightness(1.1);
	background: #fff !important;
	color: #0f0f10 !important
}

.detail-side .like-btn:hover {
	background: rgba(0, 0, 0, .08);
	color: #1c1c1e;
	border-color: rgba(0, 0, 0, .16)
}

html.dark .detail-side .like-btn:hover {
	background: rgba(255, 255, 255, .16);
	color: #111;
	border-color: rgba(255, 255, 255, .22)
}

.detail-side .like-btn {
	gap: 7px;
	padding: 0 22px
}

.detail-side .like-btn .like-ico {
	font-size: 15px;
	line-height: 1
}

.detail-side .like-btn .like-txt {
	display: inline
}

.recent-stat {
	gap: 6px;
	font-size: 14px;
	color: #6b7280
}

.recent-stat .stat-ico {
	font-size: 16px;
	line-height: 1
}

html.dark .recent-stat {
	color: #c8c8d0
}

html.dark .recent-stat .stat-ico {
	color: #e6e6ea
}

.share-ico {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	color: #6b7280;
	flex: 0 0 auto;
	transition: color .2s
}

.share-ico:hover {
	color: #8b5cf6
}

.recent-post-title {
	display: flex;
	align-items: center;
	gap: 6px
}

.single-title {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap
}

html.dark .share-ico {
	color: #9aa0aa
}

html.dark .share-ico:hover {
	color: #a78bfa
}

.device-preview {
	position: relative !important
}


.detail-main {
	position: relative !important
}

/* 轻提示：替代 window.alert()。原来这里是一段没人创建的 #xianer-toast 规则（死代码），
   现在接上真正的组件 —— 节点由 header.php 里的 xianerNotify() 按需创建，
   底部居中、点一下可关、成功后 3.2s / 失败 5.2s 自动消失。
   工具列表页那个 .xizhan-toast 是「息站」功能自己的提示，和这个互不影响。 */
.xianer-toast {
	position: fixed;
	left: 50%;
	bottom: calc(28px + env(safe-area-inset-bottom, 0px));
	z-index: var(--z-toast);
	max-width: min(560px, calc(100vw - 32px));
	padding: 12px 18px;
	border-radius: var(--radius);
	background: rgba(15, 15, 18, .93);
	color: #fff;
	font-size: 14px;
	line-height: 1.65;
	text-align: left;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	cursor: pointer;
	transform: translate(-50%, 14px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s
}

.xianer-toast.is-on {
	transform: translate(-50%, 0);
	opacity: 1;
	visibility: visible
}

/* 成功 / 失败只用左边一道色条区分，不换底色 —— 深色提示条在浅色和深色页面上都是同一块，
   换底色反而会在其中一个模式里显得突兀。 */
.xianer-toast[data-type='ok'],
.xianer-toast[data-type='error'] {
	padding-left: 20px
}

.xianer-toast[data-type='ok']::before,
.xianer-toast[data-type='error']::before {
	content: '';
	position: absolute;
	left: 8px;
	top: 12px;
	bottom: 12px;
	width: 3px;
	border-radius: 3px
}

.xianer-toast[data-type='ok']::before {
	background: var(--ok)
}

.xianer-toast[data-type='error']::before {
	background: var(--hot-1)
}

.single-title .share-ico {
	margin-left: auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .06);
	color: #6b7280;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .2s;
	flex: 0 0 auto
}

.single-title .share-ico:hover {
	background: rgba(0, 0, 0, .12)
}

html.dark .single-title .share-ico {
	background: rgba(255, 255, 255, .08);
	color: #c8c8d0
}

html.dark .single-title .share-ico:hover {
	background: rgba(255, 255, 255, .15)
}

.device-preview {
	position: relative;
	margin-bottom: 22px
}

.wp-nav {
	position: absolute;
	top: auto;
	bottom: -58px;
	transform: none;
	z-index: 6;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .55);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	color: #111;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s, color .2s;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .18)
}

.wp-nav-prev {
	left: 50%;
	margin-left: -82px
}

.wp-nav-next {
	left: 50%;
	margin-left: 42px
}

.wp-nav:hover {
	background: rgba(255, 255, 255, .9)
}

html.dark .wp-nav {
	background: rgba(0, 0, 0, .45);
	color: #fff
}

html.dark .wp-nav:hover {
	background: rgba(0, 0, 0, .72)
}

@media (max-width:768px) {
	.device-preview {
		padding: 0 10px
	}

	.device-preview.landscape {
		padding: 16px 10px
	}

	.device-preview.portrait {
		padding: 16px 10px
	}
}

.device-preview.portrait .wp-nav {
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
	background: transparent;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .5)
}

.device-preview.portrait .wp-nav:hover {
	background: rgba(255, 255, 255, .25)
}

.device-preview.portrait .wp-nav-prev {
	left: 0;
	margin-left: 0
}

.device-preview.portrait .wp-nav-next {
	left: auto;
	right: 0;
	margin-left: 0
}

html:not(.dark) .device-preview.portrait .wp-nav {
	color: #2d3136;
	text-shadow: none
}

html:not(.dark) .device-preview.portrait .wp-nav:hover {
	background: rgba(45, 49, 54, .08)
}

.device-preview.square .wp-nav {
	top: 50%;
	bottom: auto;
	transform: translateY(-50%);
	background: transparent;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .5)
}

.device-preview.square .wp-nav:hover {
	background: rgba(255, 255, 255, .25)
}

.device-preview.square .wp-nav-prev {
	left: 0;
	margin-left: 0
}

.device-preview.square .wp-nav-next {
	left: auto;
	right: 0;
	margin-left: 0
}

html:not(.dark) .device-preview.square .wp-nav {
	color: #2d3136;
	text-shadow: none
}

html:not(.dark) .device-preview.square .wp-nav:hover {
	background: rgba(45, 49, 54, .08)
}

/* ===== 媒体详情页：主图下面一排「本套」缩略图，上一张/下一张分列两旁 ===== */
.wp-nav-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0 0 24px;
	/* 两边的边距：箭头退回卡片内容区内侧，不贴卡片边 */
	padding: 0 32px
}

/* 没有缩略图条时（散图）只有两个箭头，挨在一起太挤 —— 拉开一点 */
.wp-nav-row.is-solo {
	gap: 88px
}

.wp-thumb-strip {
	display: flex;
	align-items: center;
	gap: 8px;
	/* 整条按内容宽度走（张数多少就是多宽），由外面的 .wp-nav-row 居中；
	   多到放不下时能缩进容器里自己横向滚动 —— min-width:0 不写的话 flex 项不会缩到内容宽以下 */
	flex: 0 1 auto;
	min-width: 0;
	overflow-x: auto;
	padding: 3px 0;
	/* 横向能划，但不显示进度条 */
	scrollbar-width: none;
	-ms-overflow-style: none
}

.wp-thumb-strip::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0
}

.wp-thumb-item {
	position: relative;
	display: block;
	flex: 0 0 auto;
	width: 64px;
	/* 固定长宽比（看图不看原比例）：手机壁纸 9:16、电脑壁纸 16:10、头像 1:1 */
	aspect-ratio: 9 / 16;
	border-radius: 8px;
	overflow: hidden;
	background: rgba(0, 0, 0, .06);
	transition: opacity .2s
}

/* 当前这张的框：用覆盖在上面的伪元素画，不占 2px 边框的宽度 ——
   用了 border 的话图片就铺不满，四周会留一圈灰边 */
.wp-thumb-item::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 2px solid transparent;
	pointer-events: none;
	transition: border-color .2s
}

.wp-thumb-item.is-current::after {
	border-color: #c9942e
}

.wp-thumb-item.ratio-portrait {
	aspect-ratio: 9 / 16
}

.wp-thumb-item.ratio-landscape {
	aspect-ratio: 16 / 10
}

.wp-thumb-item.ratio-square {
	aspect-ratio: 1 / 1
}

.wp-thumb-item img,
.wp-thumb-item video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block
}

/* 缩略图太小，视频/实况的小角标塞进去只会糊成一团，这里藏掉 */
.wp-thumb-item .wp-video-badge,
.wp-thumb-item .wp-badge-live {
	display: none
}

.wp-thumb-item:hover {
	opacity: .85
}

/* 这一排里的箭头不再绝对定位（原来贴在主图两侧 / 吊在主图下方） */
.wp-nav-row .wp-nav {
	position: static;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	margin: 0;
	transform: none;
	flex: 0 0 auto
}

.wp-nav-row .wp-nav.is-off {
	opacity: .3;
	pointer-events: none
}

@media (max-width:768px) {
	.wp-nav-row {
		gap: 8px;
		padding: 0 12px
	}

	.wp-nav-row.is-solo {
		gap: 56px
	}

	.wp-thumb-item {
		width: 52px
	}

	.wp-nav-row .wp-nav {
		width: 32px;
		height: 32px
	}

	.wp-nav-row .wp-nav svg {
		width: 16px;
		height: 16px
	}
}

.recent-stat .stat-ico {
	display: inline-flex;
	vertical-align: middle
}

.recent-stat .stat-ico svg {
	display: block
}

.like-btn .like-ico {
	display: inline-flex;
	vertical-align: middle
}

.like-btn .like-ico svg {
	display: block
}

.dl-btn svg {
	display: inline-block;
	vertical-align: -3px;
	margin-right: 6px
}

html.dark .like-btn {
	background: rgba(255, 255, 255, .82) !important;
	color: #111 !important
}

.hot-post-views {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	vertical-align: middle
}

.hot-post-views svg {
	display: block
}

.recent-stat .stat-like {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: inherit;
	line-height: 1
}

.recent-stat .stat-like:hover {
	color: var(--brand, #e65c6b)
}

.recent-stat .stat-like-count {
	display: inline-flex;
	align-items: center;
	min-width: 14px
}

html.dark .recent-post-excerpt {
	color: var(--text, #d8d8de) !important
}

.wallpaper-grid[data-orientation=portrait] {
	column-count: 4 !important
}

.wallpaper-grid[data-orientation=landscape] {
	column-count: 3 !important
}

.wallpaper-grid[data-orientation=square] {
	column-count: 5 !important
}

@media(max-width:820px) {

	.wallpaper-grid,
	.wallpaper-grid[data-orientation=portrait],
	.wallpaper-grid[data-orientation=landscape],
	.wallpaper-grid[data-orientation=square] {
		column-count: 2 !important
	}
}

.js-masonry {
	display: flex !important;
	column-count: auto !important
}

.masonry-col {
	flex: 1;
	min-width: 0;
	display: block
}

.masonry-col .wallpaper-card {
	margin-bottom: 14px !important;
	break-inside: avoid
}

.masonry-col .recent-post-card {
	margin-bottom: 14px !important;
	break-inside: avoid
}

.wp-hover-title {
	display: none !important
}

.home-search {
	border: 1px solid rgba(0, 0, 0, 0.25) !important
}

html.dark .home-search {
	border-color: rgba(255, 255, 255, 0.25) !important
}

.color-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin-left: 5px;
	vertical-align: middle
}

.single-wallpaper-grid {
	column-count: 3 !important;
	column-gap: 14px !important
}

body.single .single-wallpaper-grid {
	column-count: 3 !important;
	display: block !important;
	column-gap: 14px !important
}

@media(max-width:820px) {
	.single-wallpaper-grid {
		column-count: 2 !important
	}

	body.single .single-wallpaper-grid {
		column-count: 2 !important
	}
}

/* 多张的套图：后面两张卡片「叠」在主图下面 —— 底边对齐、依次往下压，
   露出两条干净的边，像一摞照片。不旋转，所以不会显得散乱。
   这两层里放的是**这套的第 2、3 张图**（不是纯色卡）：用它们 64px 宽的 LQIP 模糊小图，
   一张不到 1KB，正好只露 6px 一条边 —— 看到的就是下一张图的主色调，
   一眼知道这套里大概是什么。地址由 functions.php 写成 --stack-img-1 / 2。
   调参只改这两行：
     紧凑：6px / 12px（电脑端现用）  明显：10px / 20px
   手机端另有一档更小的 4px / 8px（见本段末尾的媒体查询）。
   位移小也不怕看不清：内容是真图，底下还有一道投影。压得越多，这套图在瀑布流里
   就越「胖」，反而拖慢整页节奏，所以紧凑档就够。
   以底边为基准缩放，所以露出来的宽度就是位移值本身，和卡片高矮无关。
   老图没有 LQIP 时不写变量，这一层退回 var(--card)（浅色白 / 深色 #1b1b21），
   和站里其他卡片同源 —— 那种情况下只剩投影撑着，边会淡一些，但仍是这套里有几张。 */
.wallpaper-card.is-set {
	position: relative;   /* 叠层是绝对定位的伪元素，必须让卡片自己当定位参照 */
	overflow: visible;
	--stack-1: 6px;
	--stack-2: 12px;
	/* 叠层往下占了 --stack-2 那么高，下边距要跟着让出来，否则会和同一列下面那张撞在一起。
	   14px 是瀑布流分列后卡片本来那档间距；只在它基础上补 --stack-2，这样「露出来的
	   最后一条边」到下方卡片的距离，和普通卡片之间一样还是 14px —— 视觉上等距，
	   既不比别处挤，也不会因为叠层而多留一截空白。这里必须带 !important ——
	   上面 `.masonry-col .wallpaper-card{margin-bottom:14px !important}` 那条会把它盖掉。
	   间距随 --stack-2 自动变，以后调叠层位移不用再改这里。 */
	margin-bottom: calc(14px + var(--stack-2)) !important
}

.wallpaper-card.is-set .wp-thumb {
	border-radius: var(--radius)
}

.wallpaper-card.is-set::before,
.wallpaper-card.is-set::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	/* 内容：这套第 2 张的模糊小图（--stack-img-1）。纯色垫在下面，
	   图还没解码出来、或者老图没有 LQIP 时，先由它顶着。 */
	background-color: var(--card, #fff);
	background-image: var(--stack-img-1, none);
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
	/* 不要边框：层里放的是真图，图本身就把层分开了；浅色模式那圈 --border(#e6e6e9)
	   贴在图片边缘会变成一道发白的描边，深色模式留一条 #2a2a31 也不好看，两边都去掉。
	   全靠下面那道投影把层从页面底色里托出来 —— 投影留着，它是「一摞照片」的关键。 */
	border-radius: var(--radius);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
	transform-origin: 50% 100%;
	transition: transform .25s var(--ease)
}

.wallpaper-card.is-set::after {
	transform: scale(.955) translateY(var(--stack-1))
}

.wallpaper-card.is-set::before {
	/* 最下面那层换成这套第 3 张（--stack-img-2） */
	background-image: var(--stack-img-2, none);
	transform: scale(.91) translateY(var(--stack-2))
}

/* 悬停时再往下压一点，作为「可以点」的反馈 */
.wallpaper-card.is-set:hover::after {
	transform: scale(.955) translateY(calc(var(--stack-1) + 2px))
}

.wallpaper-card.is-set:hover::before {
	transform: scale(.91) translateY(calc(var(--stack-2) + 4px))
}

/* 手机端卡片窄，叠层再收一点：4px / 8px（电脑端仍是上面那档 6px / 12px）。
   位移本来就小，窄屏上 12px 那档看着偏"厚"。间距是 calc(14px + --stack-2)，
   会跟着自动变成 22px，这里不用另外改。 */
@media (max-width: 820px) {
	.wallpaper-card.is-set {
		--stack-1: 4px;
		--stack-2: 8px
	}
}

/* ===== 头像分类页：可裁剪的卡片 ===== */

/* 横竖屏的图也按正方形显示（沿用 [data-orientation='square'] 那套 1:1 卡片） */
.wp-thumb.is-crop {
	cursor: pointer
}

.wp-thumb.is-crop::after {
	content: '';
	position: absolute;
	inset: 4%;
	z-index: 2;
	border-radius: 50%;
	background: rgba(255, 255, 255, .09);
	/* 圆外压暗、圆内轻微提亮：不改变卡片占地，却一眼能读成圆形头像。 */
	box-shadow:
		0 0 0 999px rgba(5, 8, 12, .24),
		inset 0 0 24px rgba(255, 255, 255, .08);
	pointer-events: none;
	transition: border-color .2s ease, background .2s ease
}

.wp-thumb.is-crop:hover::after,
.wp-thumb.is-crop:focus-visible::after {
	border-color: rgba(255, 255, 255, .82);
	background: rgba(255, 255, 255, .14)
}

/* 悬停标题和高亮提示要压在圆形遮罩上，否则会被圆外的压暗层盖住。 */
.wp-thumb.is-crop .wp-hover {
	z-index: 3
}

/* 头像分类拆成上下两组：每组独立 12 张手动翻页，桌面 6 列、手机 3 列。
   JS 分列时会读 data-avatar 改成 3 列，这里的 column-count 是禁用 JS 时的兜底。 */
.wallpaper-grid[data-avatar="1"] {
	column-count: 6 !important;
	column-gap: 12px
}

.avatar-catalog {
	display: block
}

.avatar-section + .avatar-section {
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid var(--border-soft)
}

.avatar-section-head {
	display: none
}

.avatar-section-empty {
	color: var(--muted);
	font-size: 13px
}

.avatar-section-empty {
	margin: 0;
	padding: 22px 0
}

.avatar-pager {
	/* 浅色模式：白色玻璃按钮 + 深色文字；当前页用半透明炭黑区分。 */
	--avatar-page-surface: rgba(255, 255, 255, .3);
	--avatar-page-surface-hover: rgba(255, 255, 255, .5);
	--avatar-page-text: rgba(20, 23, 27, .76);
	--avatar-page-current: rgba(18, 20, 23, .64);
	--avatar-page-current-text: #fff;
	--avatar-page-ellipsis: rgba(20, 23, 27, .52);
	--avatar-page-shadow: 0 3px 10px rgba(31, 52, 74, .08), inset 0 1px 0 rgba(255, 255, 255, .4);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	max-width: 100%;
	margin: 20px auto 2px;
	padding: 4px 0
}

.avatar-page-content {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-width: 0;
	max-width: 80vw;
	/* 留一点上下内边距，给按钮悬停上移的空间；负外边距抵消它对布局高度的影响。 */
	padding: 2px 0;
	margin: -2px 0;
	overflow-x: auto;
	scrollbar-width: none
}

.avatar-page-content::-webkit-scrollbar {
	display: none
}

.avatar-page-btn,
.avatar-page-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	min-width: 34px;
	/* 文字在行盒里看起来略高，底部留 2px 让字形视觉中心上移 1px。 */
	padding: 0 0 2px;
	box-sizing: border-box;
	border: 0;
	border-radius: 50%;
	background: var(--avatar-page-surface);
	color: var(--avatar-page-text);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	box-shadow: var(--avatar-page-shadow);
	-webkit-backdrop-filter: blur(10px) saturate(115%);
	backdrop-filter: blur(10px) saturate(115%);
	transition: background-color .18s ease, color .18s ease, transform .18s ease
}

.avatar-page-arrow {
	border-radius: 10px;
	font-size: 20px;
	font-weight: 400
}

.avatar-pager a.avatar-page-btn,
.avatar-pager button.avatar-page-btn:not(:disabled),
.avatar-pager a.avatar-page-arrow,
.avatar-pager button.avatar-page-arrow:not(:disabled) {
	cursor: pointer
}

.avatar-pager .avatar-page-btn:disabled {
	cursor: progress
}

.avatar-page-btn:not(.is-current):hover,
.avatar-page-arrow:not(.is-disabled):hover {
	background: var(--avatar-page-surface-hover);
	color: var(--avatar-page-text);
	transform: translateY(-1px)
}

.avatar-page-btn.is-current {
	background: var(--avatar-page-current);
	color: var(--avatar-page-current-text);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 3px 10px rgba(0, 0, 0, .12);
	text-shadow: none
}

.avatar-page-arrow.is-disabled {
	opacity: .38;
	cursor: not-allowed;
	pointer-events: none
}

.avatar-page-ellipsis {
	width: auto;
	min-width: 18px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	/* 省略号只显示文字本身，不继承按钮的玻璃底和模糊。 */
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	color: var(--avatar-page-ellipsis);
	text-shadow: none;
	pointer-events: none
}

html.dark .avatar-pager {
	/* 深色模式：按钮改成半透明白；当前页也保持半透明，不做纯白实心块。 */
	--avatar-page-surface: rgba(255, 255, 255, .20);
	--avatar-page-surface-hover: rgba(255, 255, 255, .30);
	--avatar-page-text: rgba(255, 255, 255, .8);
	--avatar-page-current: rgba(255, 255, 255, .60);
	--avatar-page-current-text: #fff;
	--avatar-page-ellipsis: rgba(255, 255, 255, .56);
	--avatar-page-shadow: 0 3px 10px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .08)
}

/* 深色主题后段还有通用的 a 颜色规则，这里用更高优先级确保页码和箭头不被盖成深色。 */
html.dark .avatar-pager .avatar-page-btn,
html.dark .avatar-pager .avatar-page-arrow {
	background: rgba(255, 255, 255, .20) !important;
	color: rgba(255, 255, 255, .8) !important
}

html.dark .avatar-pager .avatar-page-btn:not(.is-current):hover,
html.dark .avatar-pager .avatar-page-arrow:not(.is-disabled):hover {
	background: rgba(255, 255, 255, .30) !important;
	color: #fff !important
}

html.dark .avatar-pager .avatar-page-btn.is-current {
	background: rgba(255, 255, 255, .60) !important;
	color: #fff !important
}

html.dark .avatar-pager .avatar-page-ellipsis {
	background: transparent !important;
	color: rgba(255, 255, 255, .56) !important
}

@media (max-width: 820px) {
	.wallpaper-grid[data-avatar="1"] {
		column-count: 3 !important;
		column-gap: 8px
	}

	.avatar-section + .avatar-section {
		margin-top: 24px;
		padding-top: 20px
	}

	.avatar-pager {
		gap: 6px;
		margin-top: 16px
	}

	.avatar-page-content {
		gap: 5px;
		max-width: 74vw
	}

	.avatar-page-btn,
	.avatar-page-arrow {
		width: 29px;
		height: 29px;
		min-width: 29px
	}

	.avatar-page-arrow {
		font-size: 18px
	}

	/* 手机端省略号只占文字宽度，外侧保留少量呼吸感，但不撑出整格按钮的宽度。 */
	.avatar-pager .avatar-page-ellipsis {
		width: auto;
		min-width: 10px;
		margin: 0 -2px;
		padding: 0
	}
}

/* 壁纸提取头像默认折叠，标题与展开入口居中；只有点击后才创建网格并发请求。 */
.avatar-wall-section {
	padding-top: 8px
}

.avatar-wall-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	padding: 8px 0 4px
}


.avatar-wall-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin-top: 7px;
	padding: 12px 24px;
	border: 0;
	border-radius: 999px;
	background: var(--gold);
	color: #1a1a1a;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: 0 8px 22px rgba(201, 148, 46, .24);
	transition: transform .18s var(--ease), filter .18s var(--ease), background .18s var(--ease)
}

.avatar-wall-toggle:hover {
	filter: brightness(.94);
	transform: translateY(-1px)
}

.avatar-wall-toggle:disabled {
	opacity: .55;
	cursor: not-allowed;
	transform: none
}

.avatar-wall-toggle svg {
	flex: 0 0 auto;
	transition: transform .2s var(--ease)
}

.avatar-wall-toggle[aria-expanded="true"] svg {
	transform: rotate(180deg)
}

.avatar-wall-panel {
	margin-top: 20px
}

.avatar-wall-panel[hidden] {
	display: none
}

.avatar-wall-status {
	margin: 0 0 12px;
	color: var(--muted);
	font-size: 13px;
	text-align: center
}

.avatar-wall-status:empty {
	display: none
}

/* 「头像提取」提示：只在真的支持悬停的设备（电脑端）上悬停时出现 */
.wp-crop-hint {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 4;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .62);
	color: #fff;
	font-size: 12px;
	line-height: 1.4;
	white-space: nowrap;
	opacity: 0;
	transition: opacity .2s ease;
	pointer-events: none
}

@media (hover: hover) {
	.wp-thumb.is-crop:hover .wp-crop-hint,
	.wp-thumb.is-crop:focus-visible .wp-crop-hint {
		opacity: 1
	}
}

/* =========================================================================
   改造批次一（redesign-existing-projects 审计里确认缺的东西）

   只补"确实缺"的：站点原有的视觉语言（渐变遮罩、玻璃质胶囊、卡片常驻阴影、
   金色强调色、深色靠 html.dark 成对覆盖）都是有意的，这一批一条都不动。
   审计里已经达标、因此没写的：容器 max-width(1200)、圆角分级(18/14/10/pill)、
   阴影 token、深色底色非纯黑(#111116)、瀑布流而非等高卡片、:focus-visible 轮廓、
   LQIP 占位（比骨架屏更好）、空状态、canonical/OG/Twitter/JSON-LD（inc/seo.php 已做）。
   ========================================================================= */

/* ----- 跳到主要内容 -----
   header.php 里挂在 wp_body_open 之后，指向内容区那个 #main。
   平时停在视口上方外面，Tab 到它才落下来 —— 键盘用户不用每次穿过整排导航。 */
.skip-link {
	position: fixed;
	left: 12px;
	top: 12px;
	z-index: var(--z-skip);
	padding: 10px 16px;
	border-radius: var(--radius-sm);
	background: var(--brand);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	box-shadow: var(--shadow-md);
	transform: translateY(-180%);
	transition: transform .18s var(--ease)
}

.skip-link:focus-visible {
	transform: none;
	color: #fff;
	outline-offset: 3px
}

/* 深色下 --brand 是浅色，字得反过来读 */
html.dark .skip-link {
	color: var(--warn-text)
}

/* ----- 按下反馈 -----
   原来整站只有 .dl-btn 写了 :active，其它按钮/胶囊点下去没有任何回应。
   这里统一补 1px 下沉；卡片不用 transform（会把 overflow:hidden 的圆角框缩出缝），
   改成轻微的压暗。 */
.tool-btn:active,
.tool-btn--ghost:active,
.xat-btn:active,
.xat-iconbtn:active,
.expand-btn:active,
.donate-btn:active,
.like-btn:active,
.dl-unlock-btn:active,
.takedown-btn:active,
.nav-drop-btn:active,
.hot-tag:active,
.back-top:active,
.search-toggle:active,
.theme-toggle:active,
.menu-toggle:active,
.category-nav a:active,
.mobile-nav a:active {
	transform: translateY(1px)
}

.wallpaper-card .wp-thumb,
.recent-post-card a {
	transition: filter .18s var(--ease)
}

.wallpaper-card .wp-thumb:active,
.recent-post-card a:active {
	filter: brightness(.94)
}

/* ----- 排版细节 ----- */
/* 标题按字数自己平衡换行，最后一个词不再孤零零掉到下一行 */
h1,
h2,
h3,
.page-title,
.wp-detail-title,
.not-found h1,
.detail-sec-title,
.widget-title,
.lost-more-title {
	text-wrap: balance
}

/* 说明性段落：末行不再出现"一个词占一行" */
.not-found p,
.lost-lead,
.page-content p {
	text-wrap: pretty
}

/* 数字用等宽字形：张数 / 尺寸 / 浏览数 / 面包屑里的日期上下对齐，列表刷新时不左右抖 */
.meta-tag,
.dy-meta,
.breadcrumb,
.hot-post-views,
.lost-code {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1
}

/* 长文页面（隐私政策 / 用户协议 / DMCA 这类）：1200px 容器一行能排 80 多个汉字，太长。
   正文收成一条居中的阅读列，卡片本身保持满宽 —— 整张收窄在电脑端太丑（站主反馈过）。

   宽度用 em，跟着各自字号走：小标题字号大，自然占得宽一些、靠到卡片左边；
   正文段落窄一点、居中成阅读列。这是站主确认过的样子，别改成统一宽度。

   选择器要连嵌套层级一起写：编辑器把段落包进 div / 列表项时，只写「> p」会漏掉，
   那段就会贴着左边、右边空一截。「> *」那一条兜住包出来的 div。 */
.page-content > *,
.page-content p,
.page-content ul,
.page-content ol,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content blockquote,
.page-content figure,
.page-content table {
	max-width: 42em;
	margin-left: auto;
	margin-right: auto
}

/* ----- 404 ----- */
.lost {
	padding: 44px 24px 40px
}

/* 「404」只承担视觉重量（真正要说的话在 h1 里）。选择器必须带 .not-found 前缀 ——
   上面那条 `.not-found p{color:var(--muted)}` 是"类+元素"，单写 .lost-code 会被它盖掉。 */
.not-found .lost-code {
	margin: 0 0 4px;
	color: var(--muted);
	font-size: 64px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em
}

/* 同样要带 .not-found 前缀：`.not-found p` 的 color/margin 是"类+元素"，
   不带前缀的 .lost-* 会被它盖掉（实测踩过一次）。 */
.not-found .lost-lead {
	max-width: 40em;
	margin: 0 auto 22px;
	/* 说明文字属于正文：--muted(#8a8a92) 在白卡片上只有 3.43:1，这里用 --text */
	color: var(--text)
}

.not-found .lost-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	align-items: center;
	margin: 0
}

/* 次级去处走文字链，不和主按钮抢 —— 避免落进"永远一个实心 + 一个幽灵按钮"的套路 */
.lost-link {
	padding: 2px 1px;
	color: var(--text);
	font-size: 14px;
	border-bottom: 1px solid var(--border)
}

.lost-link:hover {
	color: var(--ink);
	border-bottom-color: currentColor
}

.lost-more-title {
	margin: 30px 0 14px;
	color: var(--ink);
	font-size: 16px;
	font-weight: 600;
	text-align: center
}

/* =========================================================================
   改造批次二

   1) 从模板里搬出来的两块内联 <style>（header.php 的返回按钮、footer.php 的
      用户中心入口）—— 内联样式风格不统一、也没法复用 token；
   2) 层级统一走 :root 里那套 --z-*；
   3) 工具页表单控件；
   4) 轻提示（替代 window.alert）。
   ========================================================================= */

/* ----- 全局返回按钮（PWA 桌面模式显示，原来是 header.php 里的内联 <style>） ----- */
.global-back-btn {
	position: fixed;
	bottom: 20px;
	left: 20px;
	z-index: var(--z-float);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .5);
	color: #fff;
	display: none;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-size: 18px;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .2)
}

/* ----- 右下角「用户中心」入口（原来是 footer.php 里的内联 <style>） ----- */
.user-entry {
	position: fixed;
	right: 22px;
	bottom: 80px;
	z-index: var(--z-float);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .4);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: #fff;
	text-decoration: none;
	transition: background .2s var(--ease), transform .2s var(--ease);
	box-shadow: 0 2px 12px rgba(0, 0, 0, .2)
}

.user-entry:hover {
	background: rgba(0, 0, 0, .6);
	transform: scale(1.05)
}

.user-entry-avatar {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 600;
	color: #fff
}

/* ----- 工具页表单控件 -----
   「加文字」那几个控件原来把「深色玻璃」写死在行内样式里（rgba(255,255,255,.2) 描边、#fff 字），
   浅色模式下就成了浅底白字、基本看不见。这里换成跟着主题走的类，
   观感和已有的 .xat-url / .xat-search 保持一致。 */
.xat-input,
.xat-select {
	width: 100%;
	box-sizing: border-box;
	padding: 9px 10px;
	margin-bottom: 6px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--card);
	color: var(--text);
	font-size: 13px
}

.xat-input:focus,
.xat-select:focus {
	outline: none;
	border-color: var(--brand-strong);
	box-shadow: 0 0 0 3px rgba(128, 128, 128, .18)
}

.xat-input::placeholder {
	color: var(--muted)
}

/* 「大小 / 颜色」这种「标签 + 控件」一行 */
.xat-row {
	display: flex;
	gap: 6px;
	align-items: center;
	margin-bottom: 6px
}

.xat-row-label {
	font-size: 12px;
	flex: 0 0 auto
}

.xat-row input[type='range'] {
	flex: 1
}

.xat-colorinput {
	width: 40px;
	height: 28px;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: none;
	cursor: pointer
}

/* 控件旁边的小号说明字（原来是行内 color:#999） */
.xat-note {
	color: var(--muted);
	font-size: 12px
}

/* =========================================================================
   改造批次三：个人中心 + VIP 页的行内样式收编

   这两页（合计 300 多处行内样式）里凡是**重复出现的**都提成了类，顺带修掉
   两个"照着深色写的、在浅色下失效"的写法：
     · .up-panel 原来是 border+背景都用白色半透明 → 浅色下描边看不见、面板像没有底；
     · .up-alert 原来是写死的 #e5ffe5/#ffe5e5 + 纯绿纯红 → 深色里两块荧光板。
   剩下那些**一次性的**行内样式（每处都不同、又只是局部微调）留着没动，见交付说明。
   ========================================================================= */

/* 个人中心 / VIP 页那两段样式已下沉到 assets/css/page-user.css 与 page-vip.css
   （只在各自页面加载，见 functions.php 的 xianer_page_styles）。 */

/* ----- 共用的「更多 / 加载更多」药丸（原来 5 个模板各写一遍行内样式） -----
   附件页「更多相关壁纸」、搜索页 / 个人中心 / 文章页的「加载更多」都是同一个东西，
   但写法已经在漂移（有的带 border:none，有的带 text-decoration:none）。
   收成一个类，顺便补上原来根本没有的 hover / 按下反馈。 */
.pill-link {
	display: inline-block;
	padding: 10px 30px;
	border: none;
	border-radius: var(--radius-pill);
	background: rgba(128, 128, 128, .25);
	color: inherit;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .18s var(--ease), transform .18s var(--ease)
}

.pill-link:hover {
	background: rgba(128, 128, 128, .38)
}

.pill-link:active {
	transform: translateY(1px)
}

/* 药丸外面那层「居中 + 上间距」的壳（原来也是每页各写一遍） */
.more-row {
	margin-top: 20px;
	text-align: center
}

/* ----- 头像 -----
   描边一律是半透明白 rgba(255,255,255,.3)：头像都压在图片或玻璃卡上（详情页 / 归档页 /
   文章页的作者卡、个人中心顶部、右下角用户中心入口），半透明才对味。
   （试过换成不透明的 --border，站主明确说要半透明的原样，已改回。）
   这几个类放同一个文件里是有原因的：.avatar-letter 靠"排在后面"才能盖掉 .avatar-64 / .avatar-72
   的 display:block（同特异性下后写的赢），拆到别的文件就反过来了。 */

/* 作者卡里那个 64px 居中的头像（详情页 / 归档页 / 文章页各写了一遍一模一样的） */
.avatar-64 {
	width: 64px;
	height: 64px;
	margin: 0 auto 10px;
	display: block;
	border: 2px solid rgba(255, 255, 255, .3);
	border-radius: 50%;
	object-fit: cover
}

/* 个人中心顶部那个 72px 头像 */
.avatar-72 {
	width: 72px;
	height: 72px;
	display: block;
	border: 2px solid rgba(255, 255, 255, .3);
	border-radius: 50%;
	object-fit: cover;
	box-sizing: border-box
}

/* 没有头像时用「首字母」圆顶替：金底白字（必须排在上面两个之后） */
.avatar-letter {
	background: var(--gold);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	font-weight: 600
}

/* 右下角用户中心入口里那个填满容器的头像 */
.avatar-fill {
	width: 100%;
	height: 100%;
	border: 2px solid rgba(255, 255, 255, .3);
	border-radius: 50%;
	object-fit: cover;
	box-sizing: border-box
}

/* ----- 作者卡上的身份徽章 -----
   原来是两处行内 !important（金底白字 2.8:1、灰底 #999 约 3:1，都不过关）。 */
.author-badge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 600;
	text-decoration: none
}

.author-badge--vip {
	background: var(--gold);
	/* 白字是这一版之前的样子（金底白字 2.8:1）。按对比度标准不过关，
	   但站主要白色 —— 徽章是 11px 加粗、纯装饰性身份标记，先按站主的来。
	   真要达标：底色压深一档（约 #a87a1f）白字就过 4.5，说一声我改。 */
	color: #fff
}

.author-badge--muted {
	background: var(--brand-soft);
	color: var(--muted)
}

/* =========================================================================
   改造批次四：归档页 / 个人中心的排版类

   这两页剩下的行内样式大多是「小号说明字 + 弱化 + 右对齐」这类反复出现的排版意图，
   原来每处都手填一遍 opacity（0.5 / 0.6 / 0.65 / 0.7 四个档，其实没人真按这个区分层级）。
   现在收成一组语义类，弱化统一走 --muted（它现在是达标的 4.5:1，见 :root 里的注释）。
   ========================================================================= */

/* 小号说明文字 */
.note-sm {
	font-size: 12px;
	color: var(--muted)
}

/* 小号说明文字（贴着上一行，负外边距） */
.note-hint {
	font-size: 12px;
	color: var(--muted);
	margin: -4px 0 0
}

/* 归档页顶部那三个统计圆 */
.arc-circle {
	background: rgba(128, 128, 128, .1);
	border-radius: 50%;
	aspect-ratio: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center
}

.arc-num {
	font-size: 18px;
	font-weight: 600
}

.arc-sub {
	font-size: 16px;
	font-weight: 600
}

/* =========================================================================
   手机端「添加到主屏幕」引导（.xa2hs）

   原先是 inc/a2hs.php 里的内联 <style>：每页 2.1KB，而且浏览器缓存不了。
   挪到这里跟着 style.css 一起缓存。规则是原样搬过来的（没重排），
   什么时候弹、弹哪种（iOS / Android）仍由 inc/a2hs.php 的脚本决定。
   ========================================================================= */
.xa2hs{position:fixed;left:0;right:0;z-index:99998;display:none;padding:0 16px;pointer-events:none;}
.xa2hs.is-on{display:block;animation:xa2hs-in .3s ease-out;}
.xa2hs--ios{bottom:calc(28px + env(safe-area-inset-bottom,0px));}
/* Android 的 ⋮ 在浏览器地址栏上（网页视口之外），所以气泡贴到视口最顶上、箭头朝上指过去 */
.xa2hs--android{top:calc(10px + env(safe-area-inset-top,0px));}
.xa2hs-card{position:relative;max-width:230px;margin:0 auto;background:rgba(58,58,58,.94);color:#fff;
	border-radius:12px;padding:12px 15px;font-size:15px;line-height:1.75;
	box-shadow:0 10px 26px rgba(0,0,0,.3);pointer-events:auto;cursor:pointer;}
.xa2hs--android .xa2hs-card{margin-right:2px;margin-left:auto;}
.xa2hs-line{margin:0;display:flex;align-items:center;gap:8px;}
.xa2hs-line + .xa2hs-line{margin-top:2px;}
.xa2hs-ic{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.16);
	display:inline-flex;align-items:center;justify-content:center;}
.xa2hs-ic svg{width:17px;height:17px;fill:none;stroke:#cfe3ff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.xa2hs-ic--dots svg{width:16px;height:16px;fill:#fff;stroke:none;}
.xa2hs-go{display:block;width:100%;margin-top:10px;padding:9px 12px;border:0;border-radius:9px;
	background:#fff;color:#111;font-size:14px;font-weight:600;}
/* hidden 属性默认只是浏览器样式，这里被上面的 display 盖掉了，得补一条 */
.xa2hs [hidden]{display:none !important;}
.xa2hs-tip{display:block;margin-top:6px;font-size:12px;line-height:1;opacity:.55;text-align:center;}
.xa2hs-tail{position:absolute;width:15px;height:15px;background:rgba(58,58,58,.94);border-radius:2px;}
.xa2hs--ios .xa2hs-tail{left:50%;margin-left:-8px;bottom:-6px;transform:rotate(45deg);}
.xa2hs--android .xa2hs-tail{right:20px;top:-6px;transform:rotate(45deg);}
@keyframes xa2hs-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.xa2hs--android.is-on{animation-name:xa2hs-in-top;}
@keyframes xa2hs-in-top{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:none;}}
/* 电脑端不显示（脚本里也会再判断一次）；?a2hs=1 预览时例外，方便在电脑上先看效果 */
@media (min-width:821px){.xa2hs{display:none !important;}.xa2hs.is-preview{display:block !important;}}

/* ===== 首页卡片底部的「标题 + 张数」 =====
   首页按套聚合，一格 = 一整套；光看图看不出这套讲什么、有几张。
   所以左下角放图片标题（第一个空格前那段，最多 12 字），右边放这套有多少个媒体（图片+视频）。
   做法是压在图上（绝对定位）而不是加高卡片 —— 瀑布流的节奏不变。
   这一条和标签行**是同一块浮层里的两行**（顺序：标题行在上、标签行在下）：
     - 浮层是一道渐变（--cap-scrim，跟原来标签行那道一模一样），一直贴在卡片底边；
     - 第一行 = 底条，常显；
     - 第二行 = 完整标题 / 标签，默认收着（max-height:0）；
     - 鼠标悬停时第二行展开，浮层是从底边往上长的，于是底条被顶上去、标签行落在最下面。
   手机上不悬停，所以永远只看到第一行 —— 这也是想要的。 */
.wallpaper-card.has-cap { --cap-scrim: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.82) 100%); }

/* 带底条的卡片：浮层常显，上面留出渐变的过渡高度（文字别飘在渐变起点上） */
.wallpaper-card.has-cap .wp-hover {
	opacity: 1;
	padding: 30px 0 0;
	background: var(--cap-scrim);
}

/* 第一行：底条。不再自己定位，也不再自带背景 —— 位置和背景都由外层浮层给 */
.wallpaper-card.has-cap .wp-cap {
	position: static;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	font-size: 12px;
	line-height: 1.25;
	color: #fff;
}

.wp-cap-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* 标题前的「叠图」图标：和标题同一行、不吃拉伸（标题才是会被收尾的那个） */
.wp-cap-ico {
	flex: 0 0 auto;
	margin-right: -4px;         /* 容器 gap 是 8px，图标和标题之间收成 4px 更贴 */
	opacity: 0.92;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.wp-cap-num {
	flex: 0 0 auto;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, 0.88);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* 第二行：完整标题 / 标签。默认收着，悬停展开（展开时把第一行顶上去）。
   注意 padding 不能加在这一层上 —— max-height:0 挡不住自身的 padding，
   收起来时还会占着一截高度；所以留白都加在里面的子元素上。 */
.wallpaper-card.has-cap .wp-hover-body {
	display: block;             /* 必须：它是个 <span>，inline 元素上 max-height / overflow 不生效 */
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.28s var(--ease), opacity 0.2s var(--ease);
}

.wallpaper-card.has-cap .wp-hover-body > * { padding-left: 10px; padding-right: 10px; }
.wallpaper-card.has-cap .wp-hover-body > :last-child { padding-bottom: 10px; }
/* 触屏浏览器也会派发 :hover，而且手指移开后状态会粘住。
   标题 / 标签层只给真正支持鼠标悬停的设备展开。 */
@media (min-width: 821px) and (any-hover: hover) and (any-pointer: fine) {
	.wallpaper-card.has-cap:hover .wp-hover-body { max-height: 110px; opacity: 1; }
}

@media (max-width: 820px) {
	.wp-cap { padding: 5px 8px; font-size: 11px; gap: 6px; }
	.wp-cap-num { font-size: 10px; }
	.wallpaper-card.has-cap .wp-hover { padding-top: 26px; }
	.wallpaper-card.has-cap .wp-hover-body > * { padding-left: 8px; padding-right: 8px; }
}

/* ===== 前台图片：禁止长按保存 / 原生拖拽 ===== */
/* iOS 不看 contextmenu，真正挡住「存储到照片」的是 -webkit-touch-callout。
   main.js 里已经有 contextmenu / dragstart 的兜底，这里两套一起生效。 */
img {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
}

/* ===== 媒体详情页：点击大图放大预览（不提供下载入口） ===== */
.device-preview img { cursor: zoom-in; }

#xianerImageZoom {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(0, 0, 0, 0.92);
	touch-action: pinch-zoom;
}

#xianerImageZoom.is-on { display: flex; }

#xianerImageZoom img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
}

#xianerImageZoom .xianer-zoom-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-touch-callout: none;
}

#xianerImageZoom .xianer-zoom-hint {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 16px;
	text-align: center;
	color: rgba(255, 255, 255, 0.55);
	font-size: 12px;
	pointer-events: none;
}

@media (max-width: 820px) {
	#xianerImageZoom { padding: 12px; }
	#xianerImageZoom .xianer-zoom-close { top: 10px; right: 10px; width: 36px; height: 36px; font-size: 22px; }
}

/* =========================================================================
   站内增长：分享图按钮 / 预览弹层 / 标签内链 / 相关套图
   ========================================================================= */
.share-row {
	margin-top: 14px;
}

.share-card-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	padding: 10px 16px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.55);
	color: var(--ink);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.share-card-btn:hover {
	background: var(--card);
	border-color: var(--brand-soft-2);
	transform: translateY(-1px);
}

.share-card-btn.is-busy {
	opacity: 0.62;
	cursor: wait;
	transform: none;
}

html.dark .share-card-btn {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.14);
	color: #fff;
}

html.dark .share-card-btn:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.22);
}

a.meta-tag {
	text-decoration: none;
	transition: background 0.18s ease, border-color 0.18s ease;
}

a.meta-tag:hover {
	background: var(--brand-soft-2);
	border-color: var(--muted);
}

html.dark a.meta-tag:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.28);
}

.side-switch {
	display: flex;
	gap: 4px;
	padding: 4px;
	margin-bottom: 12px;
	border-radius: 999px;
	background: rgba(127, 127, 127, 0.12);
}

.side-switch-btn {
	flex: 1;
	padding: 7px 10px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--muted);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.side-switch-btn:hover {
	color: var(--ink);
}

.side-switch-btn.is-active {
	background: var(--card);
	color: var(--ink);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

html.dark .side-switch {
	background: rgba(255, 255, 255, 0.07);
}

html.dark .side-switch-btn {
	color: rgba(255, 255, 255, 0.62);
}

html.dark .side-switch-btn:hover {
	color: #fff;
}

html.dark .side-switch-btn.is-active {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	box-shadow: none;
}

.side-switch-panel[hidden] {
	display: none !important;
}

.xsc-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, 0.72);
}

.xsc-panel {
	position: relative;
	width: min(440px, 94vw);
	max-height: 92vh;
	overflow: auto;
	padding: 18px;
	border-radius: 20px;
	background: #111;
	color: #fff;
	box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
}

.xsc-title {
	margin: 2px 40px 12px 2px;
	font-size: 16px;
	font-weight: 700;
}

.xsc-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.xsc-preview {
	display: block;
	width: 100%;
	max-height: 64vh;
	object-fit: contain;
	border-radius: 12px;
	background: #0a0a0b;
	/* 全站图片默认禁长按保存；分享图是给用户保存的，必须单独放开。
	   用 !important 是因为上面 img 的规则在样式表里更靠前但同属作者样式。 */
	-webkit-touch-callout: default !important;
	-webkit-user-select: auto;
	user-select: auto;
	-webkit-user-drag: auto;
	touch-action: auto;
}

.xsc-hint {
	margin: 10px 2px 14px;
	color: rgba(255, 255, 255, 0.56);
	font-size: 12px;
	line-height: 1.5;
}

.xsc-preview-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 10px 2px 14px;
}

.xsc-preview-tools .xsc-hint {
	flex: 1;
	min-width: 190px;
	margin: 0;
}

.xsc-swap {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 5px;
	padding: 6px 10px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.78);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.xsc-swap:hover,
.xsc-swap.is-active {
	border-color: rgba(201, 148, 46, 0.72);
	background: rgba(201, 148, 46, 0.16);
	color: #fff;
}

.xsc-swap.is-busy {
	opacity: 0.58;
	cursor: wait;
}

.xsc-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.xsc-btn {
	padding: 11px 14px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.xsc-btn.primary {
	border-color: var(--gold);
	background: var(--gold);
	color: #fff;
}

.xsc-btn:hover {
	border-color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 820px) {
	.share-row { margin-top: 12px; }
	.xsc-modal { padding: 12px; }
	.xsc-panel { width: 96vw; padding: 14px; border-radius: 16px; }
	.xsc-preview { max-height: 60vh; }
	.xsc-actions { grid-template-columns: 1fr; }
}

/* ===== 全屏站点背景：普通页面用后台头图，媒体详情页跟随当前壁纸 =====
   原来的 .site-hero 只有约 40vh 高，还会在下方渐变成页面底色。现在固定铺满
   整个视口，内容继续叠在背景上方滚动；浅色加白、深色加暗，保证导航和玻璃面板
   上的文字在任何一张壁纸上都还有足够对比度。 */
.site-hero {
	position: fixed !important;
	inset: 0 !important;
	width: 100%;
	height: 100vh;
	height: 100svh;
	min-height: 100vh !important;
	background-color: var(--bg);
	background-position: center center !important;
	background-repeat: no-repeat;
	background-size: cover !important;
	opacity: 1 !important;
	z-index: 0;
}

.site-hero::after {
	inset: 0;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: auto;
	height: auto !important;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.52) 0%,
		rgba(255, 255, 255, 0.74) 100%
	);
}

html.dark .site-hero::after {
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.64) 0%,
		rgba(0, 0, 0, 0.82) 100%
	);
}

/* 详情背景只在设备方向匹配时启用：电脑横屏详情 / 手机竖屏详情。
   不匹配以及头像方图继续使用站点默认头图。媒体查询负责响应式切换，
   不依赖服务端 UA，所以同一份缓存页面在电脑和手机上都能正确显示。 */
.site-hero {
	background-image: var(--xianer-hero-current, none);
}

.site-hero.hero-bg-square {
	background-image: var(--xianer-hero-default, none);
}

@media (min-width: 821px) {
	.site-hero.hero-bg-portrait {
		background-image: var(--xianer-hero-default, none);
	}
}

@media (max-width: 820px) {
	.site-hero.hero-bg-landscape {
		background-image: var(--xianer-hero-default, none);
	}
}

/* 页面背景是 fixed 定位的 z-index:0；页脚未定位时会落到它下面。把页脚抬到
   内容层，保证整屏背景不会遮掉版权、备案和隐私链接。 */
.site-footer {
	position: relative;
	z-index: 1;
}

/* ===== 媒体详情页：只保留“壁纸详细信息”卡的面板背景 =====
   页脚、主图、相关壁纸、作者个人信息、标签卡都直接叠在全屏背景上；
   不再用半透明面板和投影做额外的一层。详细信息卡（口令 / 尺寸 / 下载）
   继续沿用上面的玻璃背景，避免这排操作按钮失去承载面。 */
.site-footer,
html.dark .site-footer {
	background: transparent !important;
}

.detail-main,
.detail-section,
.detail-side > .detail-tags-card {
	background: transparent !important;
	box-shadow: none !important;
}

html.dark .detail-main,
html.dark .detail-section,
html.dark .detail-side > .detail-tags-card {
	background: transparent !important;
}

/* 作者信息嵌入“壁纸详细信息”卡顶部：横向排布，比原来单独的居中卡片更紧凑。 */
.detail-info-card .detail-author-inline {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px;
	padding: 0 0 14px;
	text-align: left;
	border-bottom: 1px solid var(--border-soft);
}

.detail-info-card .detail-author-inline .avatar-64,
.detail-info-card .detail-author-fallback {
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	margin: 0;
	border-radius: 50%;
}

.detail-info-card .detail-author-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #c9942e;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
}

.detail-info-card .detail-author-copy {
	flex: 1;
	min-width: 0;
}

.detail-info-card .detail-author-name-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

.detail-info-card .detail-author-name {
	color: var(--ink);
	font-size: 15px;
	font-weight: 600;
}

.detail-info-card .detail-author-desc {
	margin: 3px 0 0;
	color: var(--muted);
	font-size: 12.5px;
	line-height: 1.45;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 媒体详情保留面包屑节点，但视觉上隐藏；隐藏后由主体自己补回与导航的间距。 */
body.single-attachment .attachment-breadcrumb {
	display: none !important;
}

body.single-attachment .detail-layout {
	margin-top: 28px;
}

@media (max-width: 820px) {
	body.single-attachment .detail-layout {
		margin-top: 22px;
	}
}

/* 主壁纸预览：去掉主栏和设备预览两层的大留白，让画面吃满可用宽度。
   横屏电脑壁纸不再固定 720px，改为最多 960px 的 16:9 自适应框；
   竖屏手机预览也适当放大。 */
body.single-attachment .detail-main {
	padding: 6px;
}

body.single-attachment .device-preview {
	padding: 8px 10px 10px;
	margin-bottom: 16px;
}

body.single-attachment .device-preview.landscape .device-frame {
	width: min(100%, 960px);
	height: auto;
	aspect-ratio: 16 / 9;
}

body.single-attachment .device-preview.portrait .iphone-frame {
	width: min(288px, 82vw);
}

@media (max-width: 820px) {
	body.single-attachment .detail-main {
		padding: 2px 0;
	}

	body.single-attachment .device-preview {
		padding: 8px 0;
	}
}

/* 媒体详情标签：从右侧栏移到主内容底部，横向排在相关壁纸标题上方。 */
body.single-attachment .detail-tags-card {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 24px 0 10px;
	padding: 0;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

body.single-attachment .detail-tags-card .widget-title {
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--ink);
	font-size: 14px;
	white-space: nowrap;
}

body.single-attachment .detail-tags-card .widget-tags {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

body.single-attachment .detail-tags-card + .detail-section {
	margin-top: 10px;
}

@media (max-width: 820px) {
	body.single-attachment .detail-tags-card {
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;
		margin-top: 18px;
	}
}

/* 作者信息恢复为之前的竖排居中样式，但仍位于详细信息卡内部。 */
body:is(.single-attachment, .single-post) .detail-info-card .detail-author-inline {
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}

body:is(.single-attachment, .single-post) .detail-info-card .detail-author-inline .avatar-64,
body:is(.single-attachment, .single-post) .detail-info-card .detail-author-fallback {
	flex: none;
	margin-left: auto;
	margin-right: auto;
}

body:is(.single-attachment, .single-post) .detail-info-card .detail-author-copy {
	width: 100%;
}

body:is(.single-attachment, .single-post) .detail-info-card .detail-author-name-row {
	justify-content: center;
}

body:is(.single-attachment, .single-post) .detail-info-card .detail-author-desc {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	text-align: center;
}

/* 主图恢复适度边距，特别是底部还要放本套缩略图和左右翻页按钮。 */
body.single-attachment .detail-main {
	padding: 16px;
}

body.single-attachment .device-preview {
	padding: 14px 14px 16px;
	margin-bottom: 36px;
}

/* 标签行不显示“标签”二字，只保留标签胶囊。 */
body.single-attachment .detail-tags-card .widget-title {
	display: none;
}

body.single-attachment .detail-tags-card {
	margin: 22px 0 8px;
}

/* 相关壁纸本身已经透明，再把它作为面板留下的内外间距一并去掉。 */
body.single-attachment .detail-section {
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0;
}

body.single-attachment .detail-tags-card + .detail-section {
	margin-top: 0 !important;
}

@media (max-width: 820px) {
	body.single-attachment .detail-main {
		padding: 8px;
	}

	body.single-attachment .device-preview {
		padding: 8px;
		margin-bottom: 28px;
	}
}

/* 图片特征：标签与色彩集中展示在相关壁纸上方。 */
body:is(.single-attachment, .single-post) .detail-features {
	margin: 32px 0 22px;
	padding: 0;
}

body:is(.single-attachment, .single-post) .detail-block-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	color: var(--text);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
}

body:is(.single-attachment, .single-post) .detail-block-title svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--muted);
}

body:is(.single-attachment, .single-post) .detail-section .detail-block-title {
	margin-top: 30px;
}

body.single-attachment .phone-preview-mode {
	width: 42px;
	height: 42px;
}

body.single-attachment .phone-preview-mode svg {
	width: 21px;
	height: 21px;
}

body.single-attachment .phone-preview-switcher {
	gap: 4px;
}

body:is(.single-attachment, .single-post) .detail-feature-list {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
	min-width: 0;
}

/* 图注按分类 / 氛围 / 色系 / 标签分组；组只提供语义，视觉上继续连续排满换行。 */
body:is(.single-attachment, .single-post) .detail-feature-group {
	display: contents;
}

body:is(.single-attachment, .single-post) .detail-feature-inline-label {
	flex: 0 0 auto;
	color: var(--muted);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

body:is(.single-attachment, .single-post) .feature-chip {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 7px;
	min-height: 36px;
	padding: 6px 13px;
	border: 1px solid rgba(15, 23, 42, 0.12);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.62);
	color: var(--ink);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease);
}

body:is(.single-attachment, .single-post) a.feature-chip:hover {
	border-color: rgba(15, 23, 42, 0.28);
	background: rgba(255, 255, 255, 0.82);
	color: var(--ink);
	transform: translateY(-1px);
}

body:is(.single-attachment, .single-post) .feature-chip svg {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	opacity: 0.72;
}

body:is(.single-attachment, .single-post) .feature-color-dot {
	display: inline-block;
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

html.dark body:is(.single-attachment, .single-post) .feature-chip {
	border-color: rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.08);
}

html.dark body:is(.single-attachment, .single-post) a.feature-chip:hover {
	border-color: rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.14);
}

@media (max-width: 820px) {
	body:is(.single-attachment, .single-post) .detail-feature-inline-label {
		font-size: 13.5px;
	}

	body:is(.single-attachment, .single-post) .feature-chip {
		min-height: 34px;
		padding: 5px 11px;
		font-size: 13.5px;
	}

	body:is(.single-attachment, .single-post) .detail-features {
		margin: 26px 0 18px;
	}

	body:is(.single-attachment, .single-post) .detail-block-title {
		margin-bottom: 16px;
	}

	body:is(.single-attachment, .single-post) .detail-section .detail-block-title {
		margin-top: 24px;
	}

	body.single-attachment .phone-preview-mode {
		width: 38px;
		height: 38px;
	}

	body.single-attachment .phone-preview-mode svg {
		width: 20px;
		height: 20px;
	}

	body.single-attachment .phone-preview-switcher {
		gap: 3px;
	}
}

/* 已经选过背景时，优先使用按电脑/手机分别继承的 localStorage 背景。
   没有保存值时由前面的方向匹配规则决定当前详情图或站点默认图。 */
html.xianer-has-saved-bg .site-hero {
	background-image: var(--xianer-saved-hero, none);
}

/* 文章详情与媒体详情保持同一套内容层：主栏透明，只让详细信息卡和右侧
   近期热门/相关分享模块保留承载背景。 */
body.single-post .detail-main {
	background: transparent !important;
	box-shadow: none !important;
}

html.dark body.single-post .detail-main {
	background: transparent !important;
}

/* 壁纸详细信息：回到之前的平面半透明卡，只把底色调得比原值略实一点。
   不使用模糊滤镜和渐变，作者、标签和相关壁纸继续保持透明。 */
body:is(.single-attachment, .single-post) .detail-info-card {
	background: rgba(255, 255, 255, 0.7) !important;
	border: 0 !important;
	box-shadow: var(--shadow-sm) !important;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

html.dark body:is(.single-attachment, .single-post) .detail-info-card {
	background: rgba(255, 255, 255, 0.1) !important;
	box-shadow: var(--shadow-sm) !important;
}

/* 文章详情面包屑仅保留 HTML 节点，视觉隐藏；间距与媒体详情页一致。 */
body.single-post .article-breadcrumb {
	display: none !important;
}

body.single-post .detail-layout {
	margin-top: 28px;
}

@media (max-width: 820px) {
	body.single-post .detail-layout {
		margin-top: 22px;
	}
}

/* 文章页近期热门/相关分享卡去掉容器背景，保留标签按钮与列表本身。 */
body.single-post .detail-side > .side-switch-widget {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* 近期分享分类：左侧文章卡和右侧热门卡都不再套背景面板。 */
.recent-page-layout .recent-post-card {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

.recent-page-layout .recent-hot-card {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* 深色模式下，其他侧栏卡片统一到媒体详情信息卡的深度。 */
html.dark .detail-side > .widget,
html.dark .recent-page-layout .recent-post-card,
html.dark .recent-page-layout .recent-hot-card {
	background: rgba(255, 255, 255, 0.1) !important;
}

html.dark body.single-post .detail-side > .side-switch-widget {
	background: transparent !important;
}

/* 近期分享页的左右卡片在深色模式下也与浅色模式一致，不再套背景面板。
   放在上面的通用深色规则之后，覆盖侧栏 .widget 补回的背景。 */
html.dark .recent-page-layout .recent-post-card,
html.dark .recent-page-layout .recent-hot-card {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* 媒体/文章详情与近期分享页的右侧信息卡只留一层轻微托底，避免遮住背景图；
   近期热门列表已经要求无面板，这里排除 .recent-hot-card。 */
body:is(.single-attachment, .single-post) .detail-info-card,
.recent-page-layout .detail-side > .widget:not(.recent-hot-card) {
	background: rgba(255, 255, 255, 0.5) !important;
}

html.dark body:is(.single-attachment, .single-post) .detail-info-card,
html.dark .recent-page-layout .detail-side > .widget:not(.recent-hot-card) {
	background: rgba(255, 255, 255, 0.08) !important;
}

/* 媒体详情竖屏预览：手机框再略收一点，同时把右侧三种预览模式按钮推到
   主栏右侧；窄屏用视口宽度计算上限，给手机框和按钮之间留出稳定间距。 */
@media (max-width: 820px) {
	body.single-attachment .device-preview.portrait .iphone-frame {
		width: min(280px, calc(100vw - 104px));
	}

	body.single-attachment .phone-preview-switcher {
		right: -12px;
	}
}

/* 首页与手机/横屏壁纸分类直接复用头像页分页组件，这里只负责固定在底部中央。
   按钮底色、悬停、当前页、深色模式和模糊效果全部继承头像页，保持两边完全一致。 */
.wallpaper-pager-dock {
	position: fixed;
	left: 50%;
	bottom: calc(18px + env(safe-area-inset-bottom, 0px));
	z-index: var(--z-float);
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	transform: translateX(-50%);
}

.wallpaper-pager-dock .avatar-page-content {
	max-width: min(620px, calc(100vw - 96px));
	/* 给悬停上移的 1px 留出裁切余量；头像页一直保留上下各 2px，这里不能再清零。 */
	margin: -2px 0;
	padding: 2px 0;
	overflow-x: auto;
	overflow-y: hidden;
}

/* 固定条会盖住最后一行，并避开底部轻提示；两侧各留出安全滚动空间。 */
body.has-wallpaper-pager .site-main {
	padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
}

body.has-wallpaper-pager .xianer-toast {
	bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 820px) {
	.wallpaper-pager-dock {
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	}

	body.has-wallpaper-pager .back-top {
		bottom: calc(54px + env(safe-area-inset-bottom, 0px));
	}

	/* 回顶按钮占 54–98px；登录入口放在它上方并留 8px，既紧凑又不会叠住。 */
	body.has-wallpaper-pager .user-entry {
		bottom: calc(106px + env(safe-area-inset-bottom, 0px));
	}

	body.has-wallpaper-pager .xianer-toast {
		bottom: calc(120px + env(safe-area-inset-bottom, 0px));
	}
}

/* ===== 详情页作者打赏 =====
   按钮贴在作者区下方分隔线的右侧；喝茶杯的蒸汽做轻微上下动画，
   不使用背景模糊、渐变或描边。 */
.detail-info-card .detail-author-inline {
	position: relative
}

.detail-author-tip {
	position: absolute;
	right: 8px;
	bottom: -14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border: 0;
	border-radius: 999px;
	background: var(--card);
	color: var(--gold-text);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	cursor: pointer
}

.detail-author-tip:hover {
	transform: translateY(-1px)
}

.detail-author-tip:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px
}

.detail-tea-icon,
.detail-tea-icon svg {
	display: block;
	width: 18px;
	height: 18px
}

.detail-tea-steam {
	transform-origin: center bottom;
	animation: xianer-tea-steam 2.2s ease-in-out infinite
}

.detail-tea-steam--two {
	animation-delay: .45s
}

@keyframes xianer-tea-steam {
	0%,
	100% {
		opacity: .25;
		transform: translateY(1px)
	}

	50% {
		opacity: 1;
		transform: translateY(-2px)
	}
}

body.xianer-tip-open {
	overflow: hidden
}

body.xianer-tip-open .user-entry,
body.xianer-tip-open .global-back-btn,
body.xianer-tip-open .xa2hs,
body.xianer-tip-open .back-top {
	opacity: 0;
	pointer-events: none
}

.xianer-tip-modal[hidden] {
	display: none
}

.xianer-tip-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: grid;
	place-items: center;
	padding: 20px
}

.xianer-tip-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(8, 8, 12, .68)
}

.xianer-tip-dialog {
	position: relative;
	width: min(100%, 390px);
	padding: 26px;
	border-radius: 20px;
	background: var(--card);
	color: var(--text);
	box-shadow: 0 24px 70px rgba(0, 0, 0, .35)
}

.xianer-tip-dialog h2 {
	margin: 0 54px 18px 0;
	color: var(--ink);
	font-size: 22px
}

.xianer-tip-dialog > p {
	margin: 0 0 12px;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.65
}

.xianer-tip-dialog > p strong {
	color: var(--ink)
}

.xianer-tip-close {
	position: absolute;
	top: 14px;
	right: 14px;
	padding: 7px 11px;
	border: 0;
	border-radius: 999px;
	background: var(--bg);
	color: var(--muted);
	font: inherit;
	font-size: 12px;
	cursor: pointer
}

.xianer-tip-balance {
	display: flex;
	align-items: baseline;
	justify-content: space-between
}

.xianer-tip-balance strong {
	color: var(--gold-text);
	font-size: 24px
}

.xianer-tip-amounts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 7px;
	margin: 16px 0
}

.xianer-tip-amounts button {
	padding: 10px 5px;
	border: 0;
	border-radius: 9px;
	background: var(--bg);
	color: var(--muted);
	font: inherit;
	font-size: 12px;
	cursor: pointer
}

.xianer-tip-amounts button.active {
	background: var(--brand);
	color: var(--warn-text)
}

.xianer-tip-submit {
	width: 100%;
	min-height: 46px;
	padding: 11px 18px;
	border: 0;
	border-radius: 999px;
	background: var(--gold);
	color: #111116;
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer
}

.xianer-tip-submit:disabled {
	opacity: .6;
	cursor: wait
}

.xianer-tip-close:focus-visible,
.xianer-tip-amounts button:focus-visible,
.xianer-tip-submit:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px
}

.xianer-tip-dialog .xianer-tip-note {
	margin: 12px 0 0;
	font-size: 11px
}

@media (max-width: 560px) {
	.xianer-tip-modal {
		align-items: end;
		padding: 0
	}

	.xianer-tip-dialog {
		width: 100%;
		padding: 24px 18px calc(18px + env(safe-area-inset-bottom));
		border-radius: 20px 20px 0 0
	}
}

@media (prefers-reduced-motion: reduce) {
	.detail-tea-steam {
		animation: none;
		opacity: .8
	}
}

/* ===== 媒体详情：竖屏平板预览 =====
   沿用同一张图片和右侧切换栏，只把手机长条框换成 3:4 平板框。
   平板模式不叠加锁屏/桌面 UI，隐藏刘海并缩小边框与圆角。 */
.device-hardware {
	position: absolute;
	z-index: 3;
	display: block;
	width: 2px;
	border-radius: 2px;
	background: #222227;
	box-shadow: -1px 0 1px rgba(255, 255, 255, .12);
	pointer-events: none
}

.device-hardware--action {
	left: -2px;
	top: 17%;
	height: 3%
}

.device-hardware--volume-up {
	left: -2px;
	top: 23%;
	height: 5%
}

.device-hardware--volume-down {
	left: -2px;
	top: 30%;
	height: 5%
}

.device-hardware--power {
	right: -2px;
	top: 22%;
	height: 8%
}

.tablet-camera {
	display: none
}

body.single-attachment .device-preview[data-phone-preview][data-phone-mode="tablet"] .iphone-frame {
	width: min(460px, calc(100vw - 120px)) !important;
	max-width: none;
	aspect-ratio: 3 / 4;
	padding: 6px;
	border-radius: 28px;
	box-shadow: 0 14px 42px rgba(0, 0, 0, .3);
	transition: width .2s var(--ease)
}

.device-preview[data-phone-preview][data-phone-mode="tablet"] .iphone-notch,
.device-preview[data-phone-preview][data-phone-mode="tablet"] .phone-ui-canvas {
	display: none
}

.device-preview[data-phone-preview][data-phone-mode="tablet"] .iphone-frame::after {
	display: none
}

.device-preview[data-phone-preview][data-phone-mode="tablet"] .iphone-screen {
	border-radius: 22px
}

.device-preview[data-phone-preview][data-phone-mode="tablet"] .tablet-camera {
	position: absolute;
	top: 4px;
	left: 50%;
	z-index: 2;
	display: block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #2a2a2f;
	transform: translateX(-50%)
}

.device-preview[data-phone-preview][data-phone-mode="tablet"] .iphone-home {
	bottom: 7px;
	width: 72px;
	height: 3px
}

/* iPad 竖屏：左侧音量键、右侧电源键；隐藏手机专用的 Action / 相机控制键。 */
.device-preview[data-phone-preview][data-phone-mode="tablet"] .device-hardware--action {
	display: none
}

.device-preview[data-phone-preview][data-phone-mode="tablet"] .device-hardware--volume-up,
.device-preview[data-phone-preview][data-phone-mode="tablet"] .device-hardware--volume-down {
	left: -3px;
	width: 3px
}

.device-preview[data-phone-preview][data-phone-mode="tablet"] .device-hardware--power {
	right: -3px;
	width: 3px;
	top: 13%;
	height: 8%
}

.device-preview[data-phone-preview][data-phone-mode="tablet"] .device-hardware--volume-up {
	top: 13%;
	height: 6%
}

.device-preview[data-phone-preview][data-phone-mode="tablet"] .device-hardware--volume-down {
	top: 21%;
	height: 6%
}

@media (max-width: 820px) {
	body.single-attachment .device-preview[data-phone-preview][data-phone-mode="tablet"] .iphone-frame {
		width: min(300px, calc(100vw - 104px)) !important
	}
}

@media (prefers-reduced-motion: reduce) {
	.device-preview[data-phone-preview] .iphone-frame {
		transition: none
	}
}

/* ===== 媒体详情：电脑壁纸多设备预览 =====
   切换按钮在画框下方；五种模式只改变外壳比例和支架，屏幕里的同一张壁纸保持不变。 */
body.single-attachment .device-preview[data-desktop-preview] {
	flex-direction: column;
	gap: 0;
	padding: 28px 24px 30px;
	overflow: visible
}

body.single-attachment .device-preview[data-desktop-preview] .device-frame {
	position: relative;
	isolation: isolate;
	display: block;
	width: min(100%, 960px);
	height: auto;
	margin: 0 auto;
	padding: 0;
	border: 0;
	border-radius: 11px;
	background: #09090c;
	box-shadow: 0 18px 44px rgba(0, 0, 0, .36);
	box-sizing: border-box
}

body.single-attachment .device-preview[data-desktop-preview] .device-screen {
	position: absolute;
	inset: 6px;
	z-index: 1;
	width: auto;
	height: auto;
	border-radius: 4px;
	overflow: hidden
}

body.single-attachment .device-preview[data-desktop-preview] .device-screen img,
body.single-attachment .device-preview[data-desktop-preview] .device-screen video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block
}

/* 电脑：16:10 显示器 + 短颈 + 底座。 */
body.single-attachment .device-preview[data-desktop-preview][data-desktop-mode="computer"] .device-frame {
	aspect-ratio: 16 / 10;
	margin-bottom: 42px
}

body.single-attachment .device-preview[data-desktop-preview][data-desktop-mode="computer"] .device-screen {
	inset: 6px
}

body.single-attachment .device-preview[data-desktop-preview][data-desktop-mode="computer"] .device-frame::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -20px;
	width: 66px;
	height: 21px;
	background: #202025;
	transform: translateX(-50%);
	clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%)
}

body.single-attachment .device-preview[data-desktop-preview][data-desktop-mode="computer"] .device-frame::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -28px;
	width: 180px;
	height: 9px;
	border-radius: 4px;
	background: #1c1c21;
	transform: translateX(-50%)
}

/* 笔记本：窄边屏幕 + 一体式键盘底座。 */
body.single-attachment .device-preview[data-desktop-preview][data-desktop-mode="laptop"] .device-frame {
	width: min(92%, 900px);
	aspect-ratio: 16 / 10;
	margin-bottom: 28px;
	border-radius: 9px 9px 5px 5px
}

body.single-attachment .device-preview[data-desktop-preview][data-desktop-mode="laptop"] .device-screen {
	inset: 6px
}

body.single-attachment .device-preview[data-desktop-preview][data-desktop-mode="laptop"] .device-frame::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -19px;
	z-index: 0;
	width: 112%;
	height: 19px;
	border-radius: 0 0 18px 18px;
	background: #242429;
	transform: translateX(-50%);
	clip-path: polygon(2% 0, 98% 0, 100% 70%, 96% 100%, 4% 100%, 0 70%)
}

body.single-attachment .device-preview[data-desktop-preview][data-desktop-mode="laptop"] .device-frame::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 50%;
	z-index: 2;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #2f2f35;
	transform: translateX(-50%)
}

/* 平板横屏：4:3 窄边画框，右侧电源键，顶部摄像头。 */
body.single-attachment .device-preview[data-desktop-preview][data-desktop-mode="tablet"] .device-frame {
	width: min(82%, 800px);
	aspect-ratio: 4 / 3;
	border-radius: 26px
}

body.single-attachment .device-preview[data-desktop-preview][data-desktop-mode="tablet"] .device-screen {
	inset: 6px;
	border-radius: 20px
}

body.single-attachment .device-preview[data-desktop-preview][data-desktop-mode="tablet"] .device-frame::before {
	content: "";
	position: absolute;
	right: -3px;
	top: 24%;
	z-index: 2;
	width: 3px;
	height: 8%;
	border-radius: 2px;
	background: #303036
}

body.single-attachment .device-preview[data-desktop-preview][data-desktop-mode="tablet"] .device-frame::after {
	content: "";
	position: absolute;
	top: 4px;
	left: 50%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #2b2b31;
	transform: translateX(-50%)
}

/* 带鱼屏：21:9 超宽显示器。 */
body.single-attachment .device-preview[data-desktop-preview][data-desktop-mode="ultrawide"] .device-frame {
	width: min(100%, 1080px);
	aspect-ratio: 21 / 9;
	margin-bottom: 38px;
	border-radius: 8px
}

body.single-attachment .device-preview[data-desktop-preview][data-desktop-mode="ultrawide"] .device-screen {
	inset: 6px;
	border-radius: 3px
}

body.single-attachment .device-preview[data-desktop-preview][data-desktop-mode="ultrawide"] .device-frame::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -18px;
	width: 58px;
	height: 19px;
	background: #202025;
	transform: translateX(-50%);
	clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%)
}

body.single-attachment .device-preview[data-desktop-preview][data-desktop-mode="ultrawide"] .device-frame::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -26px;
	width: 160px;
	height: 9px;
	border-radius: 4px;
	background: #1c1c21;
	transform: translateX(-50%)
}

.desktop-preview-switcher {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	margin-top: 34px;
	position: relative;
	z-index: 3
}

.device-preview[data-desktop-mode="computer"] .desktop-preview-switcher,
.device-preview[data-desktop-mode="ultrawide"] .desktop-preview-switcher {
	margin-top: 42px
}

.device-preview[data-desktop-mode="laptop"] .desktop-preview-switcher {
	margin-top: 42px
}

.desktop-preview-mode {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 34px;
	padding: 6px 11px;
	border: 0;
	border-radius: 999px;
	background: rgba(128, 128, 128, .12);
	color: var(--muted);
	font: inherit;
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
	transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease)
}

.desktop-preview-mode:hover {
	transform: translateY(-1px);
	background: rgba(128, 128, 128, .18)
}

.desktop-preview-mode.is-active {
	background: var(--brand);
	color: var(--warn-text)
}

.desktop-preview-mode:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px
}

@media (max-width: 768px) {
	body.single-attachment .device-preview[data-desktop-preview] {
		padding: 16px 8px 22px
	}

	body.single-attachment .device-preview[data-desktop-preview] .device-frame {
		width: 100%;
		padding: 0
	}

	body.single-attachment .device-preview[data-desktop-preview][data-desktop-mode="laptop"] .device-frame,
	body.single-attachment .device-preview[data-desktop-preview][data-desktop-mode="tablet"] .device-frame {
		width: 94%
	}

	.desktop-preview-switcher {
		gap: 5px;
		margin-top: 28px
	}

	.device-preview[data-desktop-mode="computer"] .desktop-preview-switcher,
	.device-preview[data-desktop-mode="laptop"] .desktop-preview-switcher,
	.device-preview[data-desktop-mode="ultrawide"] .desktop-preview-switcher {
		margin-top: 34px
	}

	.desktop-preview-mode {
		min-height: 31px;
		padding: 5px 8px;
		font-size: 11px
	}

	.desktop-preview-mode svg {
		width: 15px;
		height: 15px
	}
}

@media (prefers-reduced-motion: reduce) {
	.desktop-preview-mode {
		transition: none
	}
}


/* ===== 导航筛选：分类 / 氛围 / 色系合并入口 =====
   三个列表仍使用原来的 nav-drop-list 和选项结构，只在上方增加页签。
   这里不重做下拉内容，只负责统一入口的显示、隐藏与切换。 */
.nav-filter-combined-panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: clamp(540px, 60vw, 760px);
	overflow: hidden;
	border-radius: 12px;
	background: rgba(255, 255, 255, .94);
	-webkit-backdrop-filter: blur(18px) saturate(1.25);
	backdrop-filter: blur(18px) saturate(1.25);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-4px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
	z-index: 120;
}

.nav-drop.open>.nav-filter-combined-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

.nav-filter-tabs {
	display: flex;
	gap: 4px;
	width: 100%;
	padding: 10px;
	border-radius: 12px 12px 0 0;
	background: rgba(255, 255, 255, .72);
	-webkit-backdrop-filter: blur(16px) saturate(1.5);
	backdrop-filter: blur(16px) saturate(1.5);
}

.nav-filter-tab {
	appearance: none;
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 5px 12px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #333;
	font: inherit;
	font-size: 12px;
	line-height: 1.5;
	white-space: nowrap;
	cursor: pointer;
}

.nav-filter-tab:hover {
	background: rgba(0, 0, 0, .05);
	color: #111;
}

.nav-filter-tab.is-active {
	background: rgba(0, 0, 0, .11);
	color: #111;
}

.nav-filter-tab-title {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
}

.nav-filter-tab-desc {
	font-size: 10.5px;
	font-weight: 400;
	line-height: 1.4;
	opacity: .58;
}

html.dark .nav-filter-combined-panel {
	background: rgba(10, 10, 12, .58);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}

html.dark .nav-filter-tabs {
	background: rgba(10, 10, 12, .34);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	backdrop-filter: blur(16px) saturate(1.4);
}

html.dark .nav-filter-tab {
	color: #ddd;
}

html.dark .nav-filter-tab:hover {
	background: rgba(255, 255, 255, .08);
	color: #fff;
}

html.dark .nav-filter-tab.is-active {
	background: rgba(255, 255, 255, .16);
	color: #fff;
}

.nav-filter-pane[hidden] {
	display: none;
}

.nav-filter-pane .nav-drop-list {
	position: static;
	width: 100% !important;
	min-width: 0;
	margin-top: 0;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* 三个面板统一占用同一个卡片宽度，下面仍沿用原来各自的选项栅格。 */
@media (min-width: 821px) {
	.nav-filter-pane[data-name="style"] .nav-drop-list,
	.nav-filter-pane[data-name="mood"] .nav-drop-list,
	.nav-filter-pane[data-name="color"] .nav-drop-list {
		left: auto;
		right: 0;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2px;
		padding: 8px;
		max-height: min(70vh, 520px);
		overflow-y: auto;
	}

	.nav-filter-pane[data-name="style"] .nav-drop-list>li:first-child .nav-drop-copy,
	.nav-filter-pane[data-name="mood"] .nav-drop-list>li:first-child .nav-drop-copy,
	.nav-filter-pane[data-name="color"] .nav-drop-list>li:first-child .nav-drop-copy {
		flex-direction: row;
		align-items: baseline;
		gap: 8px;
	}

	.nav-filter-pane[data-name="style"] .nav-drop-list>li:first-child>.nav-drop-item,
	.nav-filter-pane[data-name="mood"] .nav-drop-list>li:first-child>.nav-drop-item,
	.nav-filter-pane[data-name="color"] .nav-drop-list>li:first-child>.nav-drop-item {
		white-space: nowrap;
	}

	.nav-filter-pane[data-name="color"] .nav-drop-list {
		row-gap: 6px;
	}

	.nav-filter-pane[data-name="color"] .nav-drop-item--described {
		padding-top: 10px;
		padding-bottom: 10px;
		white-space: nowrap;
	}

	.nav-filter-pane[data-name="color"] .nav-drop-list>li:not(:first-child) .nav-drop-copy {
		flex-direction: row;
		align-items: center;
		gap: 8px;
	}

	.nav-filter-pane[data-name="color"] .nav-drop-list>li:not(:first-child) .nav-drop-desc--rich {
		display: inline-flex;
		align-items: center;
	}

	.nav-filter-pane[data-name="color"] .nav-drop-list>li:not(:first-child) .nav-color-swatches {
		margin-top: 0;
	}
}

@media (max-width: 820px) {
	.mobile-menu .nav-filter-combined-panel {
		display: none;
		position: static;
		width: 100%;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.mobile-menu .nav-drop.open>.nav-filter-combined-panel {
		display: block;
	}

	.mobile-menu .nav-filter-tabs {
		margin-top: 0;
	}

	.mobile-menu .nav-filter-pane .nav-drop-list {
		display: block;
		width: 100%;
	}
}


/* ===== 手机导航：四个分类图标 + 汉堡菜单内的四页签筛选卡片 =====
   分类入口从汉堡菜单移到导航胶囊；菜单只保留直接展开的筛选卡片。 */
.mobile-category-nav {
	display: none;
}

@media (max-width: 820px) {
	.nav-capsule {
		gap: 4px;
	}

	.brand {
		gap: 6px;
	}

	.brand-tag {
		display: block;
		max-width: 64px;
		min-width: 0;
		overflow: hidden;
		font-size: 10px;
		line-height: 1.3;
		text-overflow: ellipsis;
	}

	.mobile-category-nav {
		display: flex;
		align-items: center;
		gap: 4px;
		margin-left: 6px;
		flex: 0 0 auto;
	}

	.nav-capsule .mobile-category-link {
		display: inline-flex;
		position: relative;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: transparent !important;
		color: rgba(28, 28, 30, .66) !important;
	}

	.nav-capsule .mobile-category-link::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 38px;
		height: 38px;
		border-radius: 999px;
		background: transparent;
		transform: translate(-50%, -50%);
		transition: background-color .2s var(--ease);
	}

	.nav-capsule .mobile-category-link svg {
		position: relative;
		z-index: 1;
		width: 20px;
		height: 20px;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.8;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.nav-capsule .mobile-category-link:hover,
	.nav-capsule .mobile-category-link.current {
		color: #0f0f10 !important;
	}

	.nav-capsule .mobile-category-link:hover::before,
	.nav-capsule .mobile-category-link.current::before {
		background: rgba(0, 0, 0, .08);
	}

	html.dark .nav-capsule .mobile-category-link {
		color: rgba(255, 255, 255, .68) !important;
	}

	html.dark .nav-capsule .mobile-category-link:hover,
	html.dark .nav-capsule .mobile-category-link.current {
		color: #fff !important;
	}

	html.dark .nav-capsule .mobile-category-link:hover::before,
	html.dark .nav-capsule .mobile-category-link.current::before {
		background: rgba(255, 255, 255, .12);
	}

	.header-actions {
		margin-left: auto;
	}

	.header-actions .nav-motion-toggle,
	.header-actions .search-toggle,
	.header-actions .theme-toggle,
	.header-actions .menu-toggle {
		width: 38px;
		height: 38px;
		flex-basis: 38px;
	}

	.mobile-menu .nav-filters--mobile {
		width: 100%;
		margin: 12px 0 0;
	}

	.mobile-menu .nav-filter-mobile-drop>.nav-drop-btn {
		display: none;
	}

	.nav-filter-mobile-card {
		width: 100%;
	}

	.mobile-menu .nav-filter-combined-panel.nav-filter-combined-panel--static {
		display: block;
		position: static;
		width: 100%;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		box-shadow: none;
		clip-path: none;
	}

	.mobile-menu .nav-filter-mobile-drop.open .nav-filter-combined-panel.nav-filter-combined-panel--static {
		display: block;
		pointer-events: auto;
	}

	.nav-filter-mobile-card .nav-filter-tabs {
		gap: 2px;
		padding: 8px 6px;
	}

	.nav-filter-mobile-card .nav-filter-tab {
		padding: 7px 3px;
	}

	.nav-filter-mobile-card .nav-filter-tab-title {
		font-size: 12px;
	}

	.nav-filter-mobile-card .nav-filter-tab-desc {
		font-size: 9.5px;
	}

	.mobile-menu .nav-filter-mobile-card .nav-filter-pane .nav-drop-list {
		max-height: min(62vh, 560px);
		margin-top: 0;
		overflow-y: auto;
	}

	/* 分类、氛围、色系沿用电脑端三列卡片；手机宽度不足时文字单行省略。 */
	.mobile-menu .nav-filter-mobile-card .nav-filter-pane:not([data-name="sort"]) .nav-drop-list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2px;
		padding: 8px;
	}

	.mobile-menu .nav-filter-mobile-card .nav-filter-pane .nav-drop-item {
		min-width: 0;
		overflow: hidden;
	}

	.mobile-menu .nav-filter-mobile-card .nav-filter-pane .nav-drop-copy {
		width: 100%;
		min-width: 0;
	}

	/* 分类和氛围保持大字在上、小字在下；覆盖手机菜单旧的首项横排规则。 */
	.mobile-menu .nav-filter-mobile-card .nav-filter-pane[data-name="style"] .nav-drop-copy,
	.mobile-menu .nav-filter-mobile-card .nav-filter-pane[data-name="mood"] .nav-drop-copy {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.mobile-menu .nav-filter-mobile-card .nav-filter-pane .nav-drop-label,
	.mobile-menu .nav-filter-mobile-card .nav-filter-pane .nav-drop-desc {
		display: block;
		max-width: 100%;
		overflow: hidden;
		line-height: 1.4;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.mobile-menu .nav-filter-mobile-card .nav-filter-pane .nav-drop-label {
		font-size: 12px;
	}

	.mobile-menu .nav-filter-mobile-card .nav-filter-pane .nav-drop-desc {
		font-size: 10.5px;
	}

	.mobile-menu .nav-filter-mobile-card .nav-filter-pane[data-name="style"] .nav-drop-list>li:first-child .nav-drop-copy,
	.mobile-menu .nav-filter-mobile-card .nav-filter-pane[data-name="mood"] .nav-drop-list>li:first-child .nav-drop-copy,
	.mobile-menu .nav-filter-mobile-card .nav-filter-pane[data-name="color"] .nav-drop-list>li:first-child .nav-drop-copy {
		flex-direction: row;
		align-items: baseline;
		gap: 8px;
	}

	.mobile-menu .nav-filter-mobile-card .nav-filter-pane[data-name="color"] .nav-drop-list {
		row-gap: 6px;
	}

	.mobile-menu .nav-filter-mobile-card .nav-filter-pane[data-name="color"] .nav-drop-item--described {
		align-items: flex-start;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.mobile-menu .nav-filter-mobile-card .nav-filter-pane[data-name="color"] .nav-drop-list>li:not(:first-child) .nav-drop-copy {
		flex-direction: row;
		align-items: center;
		gap: 6px;
	}

	.mobile-menu .nav-filter-mobile-card .nav-filter-pane[data-name="color"] .nav-drop-desc--rich {
		display: inline-flex;
		align-items: center;
	}

	.mobile-menu .nav-filter-mobile-card .nav-filter-pane[data-name="color"] .nav-color-swatches {
		margin-top: 0;
	}
}

@media (max-width: 560px) {
	.nav-capsule {
		padding-left: 14px;
	}

	.mobile-category-nav {
		gap: 6px;
	}

	.nav-capsule .mobile-category-link {
		width: 28px;
		height: 28px;
	}

	.nav-capsule .mobile-category-link::before {
		width: 34px;
		height: 34px;
	}

	.header-actions {
		gap: 4px;
	}

	.header-actions .nav-motion-toggle,
	.header-actions .search-toggle,
	.header-actions .menu-toggle {
		width: 34px;
		height: 34px;
		flex-basis: 34px;
	}

	.header-actions .theme-toggle {
		width: 38px;
		height: 38px;
		flex-basis: 38px;
	}
}

@media (max-width: 380px) {
	.nav-capsule {
		gap: 1px;
		padding-left: 14px;
		padding-right: 4px;
	}

	.brand-name-logo {
		font-size: 18px !important;
	}

	.header-actions {
		gap: 2px !important;
	}
}

/* 仅具体筛选名称使用强调色，“不限”保持普通状态。 */
html:not(.dark) .nav-filter-tab-desc--current {
	color: #9a640f;
	font-weight: 600;
	opacity: 1;
}

html.dark .nav-filter-tab-desc--current {
	color: #ffd58a;
	font-weight: 600;
	opacity: 1;
}


/* ===== 手机端：导航上的单一“筛选”下拉 =====
   四页签卡片结构保持不变，仅从汉堡菜单移动到导航胶囊。
   分类文字入口仍保留在汉堡菜单里。 */
.mobile-nav-filter-entry {
	display: none;
}

@media (max-width: 820px) {
	.mobile-nav-filter-entry {
		display: flex;
		align-items: center;
		flex: 0 0 auto;
		margin-left: auto;
	}

	.mobile-nav-filter-entry .nav-filters {
		display: flex;
		margin: 0;
	}

	.mobile-nav-filter-entry .nav-filter-mobile-drop {
		position: static;
	}

	.mobile-nav-filter-entry .nav-drop-btn {
		font-size: 12px;
		padding: 5px 10px;
		white-space: nowrap;
	}

	.mobile-nav-filter-entry+.header-actions {
		margin-left: 0;
	}

	.nav-filter-mobile-drop .nav-filter-combined-panel.nav-filter-combined-panel--static {
		top: calc(100% + 7px);
		left: 0;
		right: 0;
		display: block;
		width: auto;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-4px);
		z-index: 220;
	}

	.nav-filter-mobile-drop.open .nav-filter-combined-panel.nav-filter-combined-panel--static {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
	}

	.nav-filter-mobile-card .nav-filter-pane .nav-drop-list {
		max-height: min(62vh, 560px);
		margin-top: 0;
		overflow-y: auto;
	}

	.nav-filter-mobile-card .nav-filter-pane:not([data-name="sort"]) .nav-drop-list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2px;
		padding: 8px;
	}

	.nav-filter-mobile-card .nav-filter-pane .nav-drop-item {
		min-width: 0;
		overflow: hidden;
	}

	.nav-filter-mobile-card .nav-filter-pane .nav-drop-copy {
		width: 100%;
		min-width: 0;
	}

	.nav-filter-mobile-card .nav-filter-pane[data-name="style"] .nav-drop-copy,
	.nav-filter-mobile-card .nav-filter-pane[data-name="mood"] .nav-drop-copy {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.nav-filter-mobile-card .nav-filter-pane .nav-drop-label,
	.nav-filter-mobile-card .nav-filter-pane .nav-drop-desc {
		display: block;
		max-width: 100%;
		overflow: hidden;
		line-height: 1.4;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.nav-filter-mobile-card .nav-filter-pane .nav-drop-label {
		font-size: 12px;
	}

	.nav-filter-mobile-card .nav-filter-pane .nav-drop-desc {
		font-size: 10.5px;
	}

	.nav-filter-mobile-card .nav-filter-pane[data-name="color"] .nav-drop-list {
		row-gap: 6px;
	}

	.nav-filter-mobile-card .nav-filter-pane[data-name="color"] .nav-drop-item--described {
		align-items: flex-start;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.nav-filter-mobile-card .nav-filter-pane[data-name="color"] .nav-drop-list>li:not(:first-child) .nav-drop-copy {
		flex-direction: row;
		align-items: center;
		gap: 6px;
	}

	.nav-filter-mobile-card .nav-filter-pane[data-name="color"] .nav-drop-desc--rich {
		display: inline-flex;
		align-items: center;
	}

	.nav-filter-mobile-card .nav-filter-pane[data-name="color"] .nav-color-swatches {
		margin-top: 0;
	}
}

/* ===== 手机汉堡菜单：从导航胶囊底部直接下拉 ===== */
@media (max-width: 820px) {
	.mobile-menu {
		display: block !important;
		top: calc(100% - 6px) !important;
		border: 0 !important;
		border-radius: 0 0 16px 16px;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-10px);
		transform-origin: top center;
		clip-path: inset(0 0 100% 0 round 0 0 16px 16px);
		transition: opacity .18s ease, transform .28s var(--ease),
			clip-path .3s var(--ease), visibility .3s;
		will-change: transform, clip-path, opacity;
	}

	.mobile-menu.open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
		clip-path: inset(0 0 0 0 round 0 0 16px 16px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mobile-menu {
		transition: none;
	}
}


/* ===== 导航下拉统一：圆角 + 毛玻璃 ===== */
html:not(.dark) .mobile-menu,
html:not(.dark) .nav-filter-combined-panel {
	border-radius: 16px;
	background: rgba(255, 255, 255, .94) !important;
	box-shadow: 0 12px 34px rgba(0, 0, 0, .18);
	-webkit-backdrop-filter: blur(18px) saturate(1.25);
	backdrop-filter: blur(18px) saturate(1.25);
}

html.dark .mobile-menu,
html.dark .nav-filter-combined-panel {
	border-radius: 16px;
	background: rgba(10, 10, 12, .58) !important;
	box-shadow: 0 12px 34px rgba(0, 0, 0, .46);
	-webkit-backdrop-filter: blur(18px) saturate(1.25);
	backdrop-filter: blur(18px) saturate(1.25);
}

.nav-filter-combined-panel {
	clip-path: inset(0 0 100% 0 round 16px);
	transition: opacity .18s ease, transform .28s var(--ease),
		clip-path .3s var(--ease), visibility .3s;
}

.nav-drop.open>.nav-filter-combined-panel {
	clip-path: inset(0 0 0 0 round 16px);
}

.nav-filter-tabs {
	border-radius: 16px 16px 0 0;
}

@media (max-width: 820px) {
	.mobile-menu {
		border-radius: 16px;
		clip-path: inset(0 0 100% 0 round 16px);
	}

	.mobile-menu.open {
		clip-path: inset(0 0 0 0 round 16px);
	}

	.nav-filter-mobile-drop .nav-filter-combined-panel.nav-filter-combined-panel--static {
		top: calc(100% + 6px);
		clip-path: inset(0 0 100% 0 round 16px);
	}

	.nav-filter-mobile-drop.open .nav-filter-combined-panel.nav-filter-combined-panel--static {
		clip-path: inset(0 0 0 0 round 16px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.nav-filter-combined-panel {
		transition: none;
	}
}

/* 手机端列表首项：分类 / 氛围 / 色系与说明保持同一行。 */
@media (max-width: 820px) {
	.nav-filter-mobile-card .nav-filter-pane[data-name="style"] .nav-drop-list>li:first-child .nav-drop-copy,
	.nav-filter-mobile-card .nav-filter-pane[data-name="mood"] .nav-drop-list>li:first-child .nav-drop-copy,
	.nav-filter-mobile-card .nav-filter-pane[data-name="color"] .nav-drop-list>li:first-child .nav-drop-copy {
		flex-direction: row;
		align-items: baseline;
		gap: 6px;
		white-space: nowrap;
	}

	.nav-filter-mobile-card .nav-filter-pane[data-name="style"] .nav-drop-list>li:first-child .nav-drop-label,
	.nav-filter-mobile-card .nav-filter-pane[data-name="mood"] .nav-drop-list>li:first-child .nav-drop-label,
	.nav-filter-mobile-card .nav-filter-pane[data-name="color"] .nav-drop-list>li:first-child .nav-drop-label {
		flex: 0 0 auto;
	}

	.nav-filter-mobile-card .nav-filter-pane[data-name="style"] .nav-drop-list>li:first-child .nav-drop-desc,
	.nav-filter-mobile-card .nav-filter-pane[data-name="mood"] .nav-drop-list>li:first-child .nav-drop-desc,
	.nav-filter-mobile-card .nav-filter-pane[data-name="color"] .nav-drop-list>li:first-child .nav-drop-desc {
		flex: 0 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* 菜单内不再有“筛选”按钮，卡片直接显示在四个分类下面。 */
	.mobile-menu .nav-filter-mobile-drop .nav-filter-combined-panel.nav-filter-combined-panel--static {
		display: block;
		position: static;
		top: auto;
		right: auto;
		left: auto;
		width: 100%;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		clip-path: none;
	}

	/* 菜单里的筛选内容直接铺在菜单毛玻璃上，不再形成第二层卡片。 */
	.mobile-menu .nav-filters--mobile {
		width: calc(100% + 16px);
		margin: 12px -8px 0;
	}

	.mobile-menu .nav-filter-mobile-card .nav-filter-combined-panel.nav-filter-combined-panel--static {
		border-radius: 0 !important;
		background: transparent !important;
		box-shadow: none !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
	}

	.mobile-menu .nav-filter-mobile-card .nav-filter-tabs {
		border-radius: 0;
		background: transparent !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
	}

	.mobile-menu .nav-filter-pane .nav-drop-list,
	html.dark .mobile-menu .nav-filter-pane .nav-drop-list {
		border-radius: 0;
		background: transparent !important;
		background-image: none !important;
		box-shadow: none !important;
	}

	/* 四个分类只收紧纵向间距，横向点击区域保持不变。 */
	.mobile-menu .mobile-nav {
		gap: 0;
	}

	.mobile-menu .mobile-nav>a {
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

/* 深色筛选卡片：选项悬停和选中原来共用 #3a3a3a，在半透明深底上略沉。
   这里只处理下拉内容里的这两个状态，不改上面的分类 / 氛围 / 色系页签；
   用半透明白色提亮，并保持选中态比悬停态再亮一级。手机端复用同一组状态。 */
html.dark .nav-filter-combined-panel .nav-drop-item:hover {
	background: rgba(255, 255, 255, .22);
}

html.dark .nav-filter-combined-panel .nav-drop-item.active {
	background: rgba(255, 255, 255, .30);
}

/* 页签普通态只给一层极轻的半透明底：浅色页签栏是白色，完全透明会和父层
   连成一片；深色用等量的白色叠层，让两种主题都能看出页签边界。
   悬停和选中仍保持原值，也不沿用下面内容项的浅色状态。 */
html:not(.dark) .nav-filter-combined-panel .nav-filter-tab {
	background: rgba(0, 0, 0, .025);
}

html:not(.dark) .nav-filter-combined-panel .nav-filter-tab:hover {
	background: rgba(0, 0, 0, .05);
	color: #111;
}

html:not(.dark) .nav-filter-combined-panel .nav-filter-tab.is-active {
	background: rgba(0, 0, 0, .11);
	color: #111;
}

html.dark .nav-filter-combined-panel .nav-filter-tab {
	background: rgba(255, 255, 255, .045);
}

html.dark .nav-filter-combined-panel .nav-filter-tab:hover {
	background: rgba(255, 255, 255, .08);
	color: #fff;
}

html.dark .nav-filter-combined-panel .nav-filter-tab.is-active {
	background: rgba(255, 255, 255, .16);
	color: #fff;
}

/* ===== 发布处理中提示 =====
   前台发布先建草稿，媒体全部处理完才公开；这个页面只接住处理中文章的直接链接。
   新组件不使用边框和背景模糊，避免与站内其他内容叠成多层面板。 */
.xianer-processing-dots {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.xianer-processing-dots i {
	display: block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #c9942e;
	animation: xianer-processing-pulse 1s ease-in-out infinite;
}

.xianer-processing-dots i:nth-child(2) {
	animation-delay: .16s;
}

.xianer-processing-dots i:nth-child(3) {
	animation-delay: .32s;
}

@keyframes xianer-processing-pulse {
	0%, 70%, 100% { transform: translateY(0); opacity: .38; }
	35% { transform: translateY(-4px); opacity: 1; }
}

.xianer-processing-page {
	min-height: min(68vh, 680px);
	display: grid;
	place-items: center;
	padding: 56px 20px 72px;
}

.xianer-processing-card {
	width: min(100%, 520px);
	padding: clamp(30px, 6vw, 48px) clamp(22px, 5vw, 44px);
	border-radius: 24px;
	background: rgba(255, 255, 255, .82);
	color: var(--ink, #17191e);
	text-align: center;
	box-shadow: 0 22px 70px rgba(0, 0, 0, .16);
}

html.dark .xianer-processing-card {
	background: rgba(24, 26, 31, .9);
	color: #fff;
	box-shadow: 0 22px 70px rgba(0, 0, 0, .4);
}

.xianer-processing-dots {
	justify-content: center;
	margin-bottom: 20px;
}

.xianer-processing-dots i {
	width: 9px;
	height: 9px;
}

.xianer-processing-card h1 {
	margin: 0;
	color: inherit;
	font-size: clamp(24px, 4vw, 34px);
	line-height: 1.25;
}

.xianer-processing-card p {
	max-width: 410px;
	margin: 14px auto 0;
	color: var(--muted, #6b7280);
	font-size: 14px;
	line-height: 1.8;
}

html.dark .xianer-processing-card p {
	color: rgba(255, 255, 255, .62);
}

.xianer-processing-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 20px;
	margin-top: 26px;
}

.xianer-processing-retry {
	padding: 10px 20px;
	border: 0;
	border-radius: 999px;
	background: #c9942e;
	color: #fff;
	font: inherit;
	font-size: 14px;
	cursor: pointer;
	box-shadow: 0 8px 20px rgba(201, 148, 46, .25);
}

.xianer-processing-actions > a {
	color: var(--muted, #6b7280);
	font-size: 13px;
	text-decoration: none;
}

html.dark .xianer-processing-actions > a {
	color: rgba(255, 255, 255, .62);
}

.xianer-processing-actions > a:hover {
	color: #c9942e;
}

@media (prefers-reduced-motion: reduce) {
	.xianer-processing-dots i {
		animation: none;
		opacity: .8;
	}
}

/* 手机端输入控件至少 16px：iOS Safari 聚焦小于 16px 的输入框时会强制放大整页，
   失焦后还可能停在放大状态。只在窄屏覆盖字号，不禁用页面缩放，也不影响按钮、
   复选框、滑块和文件选择控件。 */
@media (max-width: 820px) {
	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
	textarea,
	select {
		font-size: 16px !important;
	}
}

/* ===== 顶部搜索：从放大镜向左伸缩 =====
   放大镜和搜索框在同一个横向容器里；搜索框绝对定位到按钮左侧，只扩展自身宽度，
   不再向下弹出二级面板，也不挤压主题切换和菜单按钮。 */
.header-search-shell {
	position: relative;
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	height: 38px;
	border-radius: 999px;
	transition: background-color .18s var(--ease);
}

.header-search-shell.is-open {
	background: var(--bg-soft);
}

html.dark .header-search-shell.is-open {
	background: rgba(255, 255, 255, .12);
}

.header-actions .header-search-shell .header-search-drop {
	position: relative;
	top: auto;
	right: auto;
	left: auto;
	display: block;
	width: 0;
	min-width: 0;
	height: 38px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: transparent !important;
	border: 0 !important;
	border-radius: 999px;
	box-shadow: none !important;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: width .28s var(--ease), margin-left .28s var(--ease),
		opacity .16s var(--ease), visibility 0s linear .28s;
	z-index: 160;
}

.header-actions .header-search-shell .header-search-drop.open {
	width: clamp(160px, 14vw, 190px);
	margin-left: 0;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: width .28s var(--ease), margin-left .28s var(--ease),
		opacity .16s var(--ease), visibility 0s linear 0s;
}

.header-actions .header-search-shell .header-search-drop form {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 38px;
	margin: 0;
}

.header-actions .header-search-shell .header-search-drop form input[type=search] {
	width: 100%;
	height: 38px;
	padding: 0 48px 0 16px;
	border: 0 !important;
	border-radius: 999px;
	background: transparent !important;
	color: #1c1c1e;
	font-size: 14px;
	box-shadow: none;
}

html.dark .header-actions .header-search-shell .header-search-drop form input[type=search] {
	background: transparent !important;
	color: #f3f3f5;
	box-shadow: none;
}

.header-actions .header-search-shell .header-search-drop .xianer-image-search-btn {
	right: 0;
}

.header-actions .search-toggle.is-open {
	background: transparent;
	border-radius: 999px;
}

html.dark .header-actions .search-toggle.is-open {
	background: transparent;
}

.header-actions .header-search-shell.is-open .search-toggle,
.header-actions .header-search-shell.is-open .search-toggle:hover {
	background: transparent;
}

@media (max-width: 820px) {
	.header-actions .header-search-shell .header-search-drop.open {
		width: clamp(84px, calc(100vw - 272px), 230px);
	}

	.header-actions .header-search-shell .header-search-drop form input[type=search] {
		font-size: 16px !important;
	}

	.header-actions .header-search-shell .header-search-drop form input[type=search]::placeholder {
		font-size: 14px;
	}

	.nav-capsule.search-open .brand-tag {
		display: none;
	}
}

@media (max-width: 560px) {
	.nav-capsule {
		height: 50px;
	}

	.header-search-shell {
		height: 34px;
	}

	.header-actions .nav-motion-toggle,
	.header-actions .search-toggle,
	.header-actions .theme-toggle,
	.header-actions .menu-toggle {
		width: 34px;
		height: 34px;
		flex-basis: 34px;
	}

	.header-actions .header-search-shell .header-search-drop,
	.header-actions .header-search-shell .header-search-drop form,
	.header-actions .header-search-shell .header-search-drop form input[type=search] {
		height: 34px;
	}

}

@media (max-width: 380px) {
	.header-actions .header-search-shell .header-search-drop form input[type=search]::placeholder {
		font-size: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.header-actions .header-search-shell .header-search-drop {
		transition: none;
	}
}

/* ===== 回到顶部 / 用户入口：统一半透明磨砂 =====
   右下角两个浮动按钮使用同一层深色半透明玻璃；尺寸和位置由各自原有规则
   负责，这里只统一背景、模糊、阴影和悬停浓度。 */
html:not(.dark) .back-top,
html:not(.dark) .user-entry {
	background: rgba(17, 17, 20, .38) !important;
	border: 0 !important;
	color: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
	-webkit-backdrop-filter: blur(14px) saturate(1.3);
	backdrop-filter: blur(14px) saturate(1.3);
}

html.dark .back-top,
html.dark .user-entry {
	background: rgba(17, 17, 20, .48) !important;
	border: 0 !important;
	color: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .32);
	-webkit-backdrop-filter: blur(14px) saturate(1.3);
	backdrop-filter: blur(14px) saturate(1.3);
}

html:not(.dark) .back-top:hover,
html:not(.dark) .user-entry:hover {
	background: rgba(17, 17, 20, .58) !important;
}

html.dark .back-top:hover,
html.dark .user-entry:hover {
	background: rgba(17, 17, 20, .64) !important;
}