/**
 * 工具页样式（只在工具页加载）
 *
 * 为什么单独一个文件：这一段原来在 style.css 里（第 4602-5356 行，755 行），
 * 但首页 / 分类 / 详情 / 文章页一个类都用不到 —— 拆出来之后那些页面直接少下 20KB。
 * style.css 留给全站共用的东西（token、排版、头部页脚、卡片网格、详情页、评论区）。
 *
 * 加载方式见 functions.php 的 xianer_page_styles()：按 is_page_template 判断，
 * 版本号用 filemtime，改完刷新即可，不用清缓存。
 *
 * 新增工具的规矩：
 *   1) 样式先往这个文件里加一段（用 /* ===== 工具名 ===== *\/ 起头）；
 *   2) 某个工具的体积确实偏大（比如主图工具那种上千行），再拆
 *      assets/css/tool-<名字>.css 并在 xianer_page_styles() 里按模板单独 enqueue；
 *   3) 不要再往模板里写内联 <style>（那样每次刷新都跟着 HTML 重下，浏览器缓存不了）。
 *
 * 内容顺序：工具页框架（.xat-*，壁纸/头像/主图三个工具共用）→ 手机壁纸工具 → 头像工具。
 */
/* ===== 头像制作工具页 ===== */
.xat-page {
	padding: 8px 0 40px;
}

.xat-head {
	text-align: center;
	margin: 6px 0 22px;
}

.xat-title {
	font-size: 26px;
	font-weight: 700;
	color: var(--text);
	margin: 0 0 6px;
}


.xat-layout {
	display: grid;
	grid-template-columns: 260px 1fr 260px;
	gap: 18px;
	align-items: start;
}

.xat-panel {
	background: rgba(255, 255, 255, 0.6);
	border-radius: var(--radius);
	border: none;
	box-shadow: none;
	padding: 14px;
	margin-bottom: 18px;
}

.xat-panel-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
	margin: 0 0 12px;
}

.xat-tabs {
	display: flex;
	gap: 6px;
	margin-bottom: 12px;
	background: var(--bg);
	border-radius: var(--radius-sm);
	padding: 4px;
}

.xat-tab {
	flex: 1;
	border: none;
	background: transparent;
	color: var(--text);
	font-size: 13px;
	padding: 7px 0;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

.xat-tab.active {
	background: var(--card);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
	font-weight: 600;
}

.xat-src-pane {
	display: none;
}

.xat-src-pane.active {
	display: block;
}

.xat-medialist {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	max-height: 300px;
	overflow: auto;
}

.xat-media {
	position: relative;
	padding: 0;
	border: none;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	background: var(--bg);
	height: 0;
	padding-bottom: 100%;
}

.xat-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.2s var(--ease);
}

.xat-media:hover img {
	transform: scale(1.06);
}

/* 媒体库：点一下立刻有反馈（载入中），不用干等图片下载 —— 和「主图制作工具」同一套 */
.xat-media.is-loading {
	cursor: progress
}

.xat-media.is-loading {
	opacity: .5
}

.xat-media.is-loading::after {
	content: '载入中…';
	position: absolute;
	z-index: 3;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 11px;
	line-height: 1;
	padding: 3px 6px;
	border-radius: 6px;
	background: rgba(0, 0, 0, .66);
	color: #fff;
	white-space: nowrap
}


.xat-drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 1.5px dashed rgba(128, 128, 128, 0.35);
	border-radius: var(--radius-sm);
	padding: 26px 12px;
	text-align: center;
	cursor: pointer;
	color: var(--text);
	transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.xat-drop:hover {
	border-color: var(--pc-accent, #6c8cff);
	background: var(--bg);
}

.xat-drop input[type="file"] {
	display: none;
}

.xat-drop-icon {
	font-size: 26px;
	line-height: 1;
}

.xat-drop-text {
	font-size: 13px;
	font-weight: 500;
}

.xat-drop-hint {
	font-size: 12px;
	color: #999;
}

.xat-linkrow {
	display: flex;
	gap: 8px;
}

.xat-url {
	flex: 1;
	border: none;
	border-radius: var(--radius-sm);
	padding: 9px 10px;
	font-size: 13px;
	background: rgba(128, 128, 128, 0.12);
	color: var(--text);
	min-width: 0;
}

.xat-url:focus {
	outline: none;
	border-color: var(--pc-accent, #6c8cff);
}

.xat-hint {
	font-size: 12px;
	color: #999;
	margin: 8px 2px 0;
}

.xat-btn {
	border: none;
	border-radius: var(--radius-sm);
	padding: 9px 14px;
	font-size: 13px;
	cursor: pointer;
	transition: background 0.18s var(--ease), color 0.18s var(--ease), opacity 0.18s var(--ease);
}

.xat-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.xat-btn-primary {
	background: var(--pc-accent, #6c8cff);
	color: #fff;
}

.xat-btn-primary:hover:not(:disabled) {
	filter: brightness(1.05);
}

.xat-btn-ghost {
	background: var(--bg);
	color: var(--text);
}

.xat-btn-ghost:hover:not(:disabled) {
	background: #eceef2;
}

.xat-btn-block {
	width: 100%;
	margin-top: 8px;
}

.xat-ctrl-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

.xat-ctrl-label {
	font-size: 13px;
	color: var(--text);
	min-width: 40px;
}

.xat-iconbtn {
	width: 30px;
	height: 30px;
	border: none;
	border-radius: 8px;
	background: rgba(128, 128, 128, 0.12);
	color: var(--text);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.xat-iconbtn:hover {
	background: #eceef2;
}

.xat-ctrl-row input[type="range"] {
	flex: 1;
	min-width: 0;
	accent-color: var(--pc-accent, #6c8cff);
}

.xat-tip {
	font-size: 12px;
	color: #999;
	margin: 6px 2px 0;
	line-height: 1.5;
}

.xat-stagewrap {
	position: sticky;
	top: 14px;
}

.xat-stage {
	position: relative;
	aspect-ratio: 1 / 1;
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	border-radius: var(--radius);
	overflow: hidden;
	background: rgba(255, 255, 255, 0.4);
	border: none;
	box-shadow: none;
	user-select: none;
	-webkit-user-select: none;
	touch-action: none;
}

.xat-stage-inner {
	position: absolute;
	inset: 0;
}

.xat-stage-inner.dragging {
	cursor: grabbing;
}

.xat-stage-inner #xatImg {
	position: absolute;
	display: none;
	max-width: none;
	max-height: none;
	pointer-events: none;
	cursor: grab;
	transform-origin: center center;
}

.xat-mask {
	position: absolute;
	background: rgba(0, 0, 0, 0.55);
	z-index: 2;
}

.xat-mask-t {
	left: 0;
	right: 0;
	top: 0;
}

.xat-mask-b {
	left: 0;
	right: 0;
	height: 0;
}

.xat-mask-l {
	left: 0;
	width: 0;
}

.xat-mask-r {
	right: 0;
	width: 0;
}

.xat-box {
	position: absolute;
	z-index: 3;
	border: 2px solid #fff;
	background: transparent;
	border-radius: 4px;
	pointer-events: none;
	box-sizing: border-box;
}

.xat-grid {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right, rgba(255, 255, 255, 0.7) 1px, transparent 1px) 33.33% 0 / 1px 100%,
		linear-gradient(to right, rgba(255, 255, 255, 0.7) 1px, transparent 1px) 66.66% 0 / 1px 100%,
		linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 1px, transparent 1px) 0 33.33% / 100% 1px,
		linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 1px, transparent 1px) 0 66.66% / 100% 1px;
	background-repeat: no-repeat;
}

.xat-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: #aaa;
	font-size: 15px;
}

.xat-placeholder span {
	font-size: 46px;
	line-height: 1;
}

.xat-placeholder p {
	margin: 0;
	text-align: center;
}

.xat-preview {
	display: flex;
	gap: 14px;
}

.xat-preview-card {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
}

.xat-preview-label {
	font-size: 12px;
	color: #999;
}

.xat-avatar {
	width: 88px;
	height: 88px;
	display: block;
	background-size: cover;
	background-position: center;
}

.xat-avatar-wx {
	border-radius: 14px;
	background-color: #e9e9ee;
}

.xat-avatar-dy {
	border-radius: 50%;
	background-color: #0b0b0f;
	box-shadow: 0 0 0 4px #25f4ee, 0 0 0 8px #fe2c55;
}

.xat-sizes {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	margin-bottom: 6px;
}

.xat-size {
	position: relative;
	border: none;
	background: rgba(128, 128, 128, 0.12);
	color: var(--text);
	border-radius: 8px;
	padding: 8px 0;
	font-size: 13px;
	cursor: pointer;
	transition: all 0.15s var(--ease);
}

/* 1024 那档是 VIP 功能：右上角挂个小金标 */
.xat-size .xat-vip-tag {
	position: absolute;
	right: 3px;
	top: 3px;
	font-size: 9px;
	line-height: 1;
	padding: 2px 3px;
	border-radius: 4px;
	background: #c9942e;
	color: #fff;
	font-weight: 600
}

.xat-size.is-locked {
	opacity: .72
}

.xat-size.active {
	border-color: var(--pc-accent, #6c8cff);
	background: var(--pc-accent, #6c8cff);
	color: #fff;
}

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

	.xat-stagewrap {
		position: static;
		order: -1;
	}

	.xat-stage {
		max-width: 460px;
		margin: 0 auto;
	}

	.xat-preview {
		justify-content: center;
	}
}

@media (max-width: 480px) {
	.xat-medialist {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* 深色模式：--pc-accent 为浅色，激活/主按钮用浅底深字保证可读 */
.dark .xat-size.active,
.dark .xat-btn-primary {
	color: #111116;
}

/* 深色模式：半透明面板，与详情页一致 */
.dark .xat-panel {
	background: rgba(255, 255, 255, 0.05);
}

.dark .xat-stage {
	background: rgba(255, 255, 255, 0.04);
}

/* 媒体库搜索框 */
.xat-search {
	width: 100%;
	padding: 9px 12px;
	font-size: 13px;
	color: var(--text);
	background: rgba(128, 128, 128, 0.12);
	border: none;
	border-radius: 8px;
	margin-bottom: 10px;
	outline: none;
	box-sizing: border-box;
}

.xat-search::placeholder {
	opacity: 0.55;
}

.xat-search:focus {
	background: rgba(128, 128, 128, 0.2);
}

/* 媒体库加载更多 */
.xat-loadmore {
	display: block;
	width: 100%;
	margin-top: 10px;
	padding: 9px 0;
	font-size: 13px;
	color: var(--text);
	background: rgba(128, 128, 128, 0.12);
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s var(--ease);
}

.xat-loadmore:hover {
	background: rgba(128, 128, 128, 0.2);
}

/* 头像分类页：首卡"头像制作工具"入口（正方形卡片） */
.xat-entry-card .wp-thumb.xat-entry-thumb {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: linear-gradient(135deg, #5b7cfa 0%, #8a5bff 100%);
	text-align: center;
	color: #fff;
	text-decoration: none;
}


/* ===== 手机壁纸工具 ===== */
.xat-devices {
	display: flex;
	flex-direction: column;
	gap: 6px;
}


.xat-mode {
	flex: 1;
	padding: 8px 6px;
	font-size: 13px;
	text-align: center;
	color: var(--text);
	background: rgba(128, 128, 128, 0.1);
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.15s var(--ease);
}

.xat-mode.active {
	background: rgba(91, 124, 250, 0.25);
	font-weight: 600;
}

.xat-modebar {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 10px;
}

.xat-cat {
	padding: 8px 18px;
	font-size: 14px;
	color: var(--text);
	background: rgba(128, 128, 128, 0.12);
	border: none;
	border-radius: 20px;
	cursor: pointer;
	transition: all 0.15s var(--ease);
}

.xat-cat.active {
	background: rgba(91, 124, 250, 0.25);
	font-weight: 600;
}

.xat-devices-inline {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-bottom: 10px;
}

.xat-devices-inline .xat-dev {
	text-align: center;
	padding: 6px 12px;
	font-size: 12px;
}

.xat-dev {
	padding: 9px 10px;
	font-size: 13px;
	text-align: left;
	color: var(--text);
	background: rgba(128, 128, 128, 0.12);
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s var(--ease);
}

.xat-dev:hover {
	background: rgba(128, 128, 128, 0.2);
}

.xat-dev.active {
	background: var(--pc-accent, #6c8cff);
	color: #fff;
	font-weight: 600;
}

.dark .xat-dev.active {
	color: #111116;
}

@media (max-width: 600px) {
	.xat-cat {
		padding: 5px 12px;
		font-size: 12px;
		border-radius: 14px;
	}

	.xat-devices-inline {
		gap: 4px;
		margin-bottom: 8px;
	}

	.xat-devices-inline .xat-dev {
		padding: 4px 8px;
		font-size: 11px;
	}

	.xat-modebar {
		gap: 5px;
		margin-bottom: 8px;
	}
}

.wp-preview {
	display: flex;
	justify-content: center;
	padding: 4px 0;
}

.wp-phone {
	display: block;
	width: 110px;
	height: 220px;
	border-radius: 18px;
	background: #111;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.wp-outinfo {
	font-size: 12px;
	color: var(--text);
	margin: 0 0 10px;
	opacity: 0.8;
}

.hot-tags .hot-tag-tool {
	font-weight: 700;
}

.xat-notice {
	font-size: 12px;
	opacity: 0.6;
	margin: 6px 0 0;
}

.wallpaper-grid[data-orientation='square'] .xat-entry-thumb {
	aspect-ratio: 1 / 1;
}

/* ==================== 工具页统一版权声明 ====================
 * 4 个工具页（ETF 组合回测 / 头像制作 / 手机壁纸 / 主图制作）页尾都用这一行，
 * 页面上只需 <?php get_template_part( 'inc/tool-copyright' ); ?>；文案在 inc/tool-copyright.php。
 * 定投模拟器、息栈不加。
 */
.tool-copyright {
	margin: 34px auto 14px;
	padding: 0 16px;
	text-align: center;
	font-size: 12.5px;
	line-height: 1.9;
	opacity: .5
}

@media (max-width: 480px) {
	.tool-copyright {
		margin-top: 24px;
		font-size: 12px
	}
}

/* ----- 工具页的深色覆盖 -----
   这 4 条原来是跟着上面 .xat-* 那一段一起的；P6 清死 CSS 时被我的判定 bug 误删
   （选择器里只有 .dark + 一个类的规则处理不对），这里从备份补回来。 */
.dark .xat-size.active,
.dark .xat-btn-primary {
	color: #111116
}

.dark .xat-panel {
	background: rgba(255, 255, 255, .05)
}

.dark .xat-stage {
	background: rgba(255, 255, 255, .04)
}

.dark .xat-dev.active {
	color: #111116
}

/* ===== 交互壁纸导入教程 ===== */
.tut-wrap {
	max-width: 960px;
	margin: 0 auto
}

.tut-intro {
	background: rgba(128, 128, 128, .08);
	border-radius: var(--radius);
	padding: 16px 18px;
	color: var(--text);
	font-size: 14px;
	line-height: 1.85;
	margin-bottom: 22px
}

.tut-intro b {
	color: var(--pc-accent, #6c8cff)
}

.tut-sec-title {
	font-size: 18px;
	color: var(--text);
	margin: 26px 0 14px;
	font-weight: 700
}

.tut-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 8px
}

.tut-card {
	background: rgba(255, 255, 255, .6);
	border-radius: var(--radius);
	padding: 18px;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .06)
}

.dark .tut-card {
	background: rgba(255, 255, 255, .05)
}

.tut-card .tut-tag {
	display: inline-block;
	font-size: 11px;
	padding: 2px 9px;
	border-radius: 10px;
	background: rgba(108, 140, 255, .18);
	color: var(--pc-accent, #6c8cff);
	margin-bottom: 8px
}

.tut-card h3 {
	margin: 0 0 8px;
	font-size: 16px;
	color: var(--text)
}

.tut-card p {
	font-size: 13px;
	color: var(--text);
	opacity: .8;
	margin: 0;
	line-height: 1.7
}

.tut-steps {
	display: flex;
	flex-direction: column;
	gap: 12px
}

.tut-step {
	display: flex;
	gap: 14px;
	background: rgba(128, 128, 128, .06);
	border-radius: var(--radius-sm);
	padding: 14px 16px
}

.tut-step .num {
	flex: 0 0 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--pc-accent, #6c8cff);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700
}

.tut-step .body h4 {
	margin: 2px 0 6px;
	font-size: 14px;
	color: var(--text)
}

.tut-step .body p {
	margin: 0;
	font-size: 13px;
	color: var(--text);
	opacity: .78;
	line-height: 1.7
}

.tut-faq {
	margin-top: 4px
}

.tut-faq details {
	background: rgba(128, 128, 128, .06);
	border-radius: var(--radius-sm);
	padding: 12px 16px;
	margin-bottom: 10px
}

.tut-faq summary {
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
	cursor: pointer;
	outline: none
}

.tut-faq details p {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--text);
	opacity: .78;
	line-height: 1.7
}

.tut-cta {
	text-align: center;
	margin: 30px 0 6px
}

.tut-cta .xat-btn-primary {
	font-size: 15px;
	padding: 12px 28px;
	text-decoration: none;
	display: inline-block
}

@media (max-width: 700px) {
	.tut-cards {
		grid-template-columns: 1fr
	}
}

/* 动态壁纸制作工具：只用左右两栏（控制面板 + 预览），覆盖 xat-layout 默认三列 */
.xat-layout--2 {
	grid-template-columns: 260px 1fr
}