/**
 * 图片裁剪 / 改尺寸 / 格式转换 / 压缩（工具页）
 *
 * 骨架全部复用 tools.css 的 .xat-*（container / xat-head / xat-title / xat-notice /
 * xat-layout / xat-side / xat-panel / xat-panel-title / xat-tabs / xat-tab /
 * xat-search / xat-medialist / xat-media / xat-loadmore / xat-linkrow / xat-url /
 * xat-btn / xat-btn-primary / xat-btn-ghost / xat-btn-block / xat-hint），
 * 这一份只写它自己的东西：预览台、裁剪框、队列、分段选择、数值输入。
 *
 * 站内约定：不用 backdrop-filter，不画边框线，块与块靠底色和间距区分。
 * 加载方式见 functions.php 的 xianer_page_styles()，版本号走 filemtime。
 */

/*
 * 按钮统一走「半透明底」，不铺实色卡片。
 *
 * 站内主色是黑白，实色底（白卡 / 黑块）在深色模式下会变成一块块亮斑，很扎眼。
 * 换成半透明叠加层：不管底下是页面底还是半透明面板，深浅都自动跟着走，
 * 只用三档浓度区分 常态 / 悬停 / 选中。
 */
.xe-page {
	padding: 8px 0 40px;

	--xe-fill: rgba(0, 0, 0, 0.045);
	--xe-fill-h: rgba(0, 0, 0, 0.085);
	--xe-fill-on: rgba(0, 0, 0, 0.18);
}

html.dark .xe-page {
	--xe-fill: rgba(255, 255, 255, 0.08);
	--xe-fill-h: rgba(255, 255, 255, 0.15);
	--xe-fill-on: rgba(255, 255, 255, 0.3);
}

/* 好几个块是 display:flex，类选择器会盖掉浏览器对 [hidden] 的默认 display:none */
.xe-page [hidden] {
	display: none !important;
}

/* 滑块跟着站内的黑白主色走，别留浏览器默认的蓝 */
.xe-page input[type='range'] {
	accent-color: var(--brand);
}

.dark .xe-page input[type='range'] {
	accent-color: #e4e4e7;
}

/* ---------- 通用按钮：半透明，不铺实色 ---------- */

/*
 * tools.css 里的 .xat-btn 是实色的（主按钮铺 --pc-accent，次要按钮铺 --bg），
 * 那是给电商风工具页用的。这里全部换成半透明叠加：
 *   次要按钮平时全透明，悬停才浮一层；主按钮常驻一层浅底，悬停再加浓。
 * 这样深色下不会冒出一块亮斑，浅色下也不会变成一张白卡片。
 *
 * 选择器写到 .xat-btn.xat-btn-xxx 这个长度，是为了压过 tools.css 里
 * `.dark .xat-btn-primary { color:#111116 }` 那条，别让深色模式给出黑字。
 */
.xe-page .xat-btn {
	border-radius: var(--radius-sm);
	font-family: inherit;
	transition: background 0.18s var(--ease), color 0.18s var(--ease),
		opacity 0.18s var(--ease);
}

.xe-page .xat-btn.xat-btn-ghost {
	background: transparent;
	color: var(--text);
}

.xe-page .xat-btn.xat-btn-ghost:hover:not(:disabled) {
	background: var(--xe-fill-h);
	color: var(--ink);
}

.xe-page .xat-btn.xat-btn-primary {
	background: var(--xe-fill);
	color: var(--ink);
	font-weight: 600;
}

.xe-page .xat-btn.xat-btn-primary:hover:not(:disabled) {
	background: var(--xe-fill-on);
}

.xe-page .xat-btn:disabled {
	opacity: 0.38;
}

/* 缩放条上的 ± 和小方块按钮：同样透明，悬停才浮出来 */
.xe-page .xat-iconbtn {
	background: transparent;
	color: var(--muted);
	border-radius: 8px;
	transition: background 0.16s var(--ease), color 0.16s var(--ease);
}

.xe-page .xat-iconbtn:hover {
	background: var(--xe-fill-h);
	color: var(--ink);
}

/* ---------- 顶部状态 ---------- */

.xe-status {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: -4px 0 20px;
}

.xe-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(128, 128, 128, 0.12);
	color: var(--text);
}

.xe-chip i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ok);
	flex: 0 0 auto;
}

.xe-chip.is-warn i {
	background: #d97706;
}

/* ---------- 顶部：四个步骤（可单做，也可全做） ---------- */

/*
 * 这里是整个页面的入口，做得比别处重：半透明底 + 图标 + 大字。
 * 选中就加浓一层再换成主文字色，不翻成实色块 —— 深色模式下一块块反白太抢眼。
 */

.xe-steps {
	margin: 0 0 16px;
}

.xe-steps-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
	padding: 0 2px;
}

.xe-steps-title {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--text);
}

.xe-steps-tip {
	font-size: 11.5px;
	color: var(--muted);
	text-align: right;
}

.xe-steps-row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.08fr);
	gap: 8px;
}

/* 图标在左、标题和小字在右 —— 用 grid 划两行，图标跨两行垂直居中。
   minmax(0,1fr) 不能省，否则长副文案会把 1fr 撑破、卡片被顶宽。 */
.xe-step {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		'ico name'
		'ico sub';
	align-content: center;
	column-gap: 10px;
	row-gap: 1px;
	padding: 11px 12px;
	border: none;
	border-radius: var(--radius);
	background: var(--xe-fill);
	color: var(--text);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: background 0.16s var(--ease), color 0.16s var(--ease),
		transform 0.16s var(--ease);
}

.xe-step:hover {
	background: var(--xe-fill-h);
	transform: translateY(-1px);
}

.xe-step:active {
	transform: translateY(0);
}

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

/* 选中：底色加浓一档，文字提到最亮的那个层级。
   不画描边线了 —— 靠 --xe-fill-on 这一档浓度差就分得出来，
   加一圈线反而像老式单选框。 */
.xe-step.is-on {
	background: var(--xe-fill-on);
	color: var(--ink);
}

.xe-step.is-on .xe-step-ico {
	opacity: 1;
}

.xe-step-ico {
	grid-area: ico;
	align-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	opacity: 0.86;
}

.xe-step-ico svg {
	width: 32px;
	height: 32px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.55;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.xe-step-name {
	grid-area: name;
	align-self: end;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
}

.xe-step-sub {
	grid-area: sub;
	align-self: start;
	font-size: 11px;
	line-height: 1.3;
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.xe-step.is-on .xe-step-sub {
	color: inherit;
	opacity: 0.68;
}

/* 步骤序号：只在「同时做多件」时出现，标出执行顺序。反色小圆点，深浅都压得住 */
.xe-step-no {
	position: absolute;
	top: 8px;
	right: 8px;
	display: none;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--brand);
	color: var(--bg);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* 序号徽标挂在右上角，多选模式下给右侧留一点位置，免得压住副文案末尾 */
.xe-steps.is-multi .xe-step {
	padding-right: 26px;
}

.xe-steps.is-multi .xe-step.is-on .xe-step-no {
	display: flex;
}

/* 「四步全做」不是第五个步骤，是快捷方式：常态就比四个步骤重一档 */
.xe-step-all {
	background: var(--xe-fill-h);
}

.xe-step-all .xe-step-ico {
	opacity: 1;
}

/* ---------- 添加图片：本地 / 媒体库 / 链接 ---------- */

.xe-src-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px;
}

.xe-src-head .xat-panel-title {
	margin: 0;
}

.xe-src-tabs {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	border-radius: 8px;
	background: rgba(128, 128, 128, 0.1);
	flex: 0 0 auto;
}

.xe-src-tab {
	border: none;
	background: transparent;
	color: var(--muted);
	font-family: inherit;
	font-size: 12px;
	line-height: 1;
	padding: 5px 9px;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.16s var(--ease), color 0.16s var(--ease);
}

.xe-src-tab.active {
	background: var(--xe-fill-on);
	color: var(--ink);
	font-weight: 700;
}

/* 三个来源一次只露一个；用 class 而不是 [hidden]，免得和 .xe-page [hidden] 打架 */
.xe-src-pane {
	display: none;
}

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

.xe-drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 22px 12px;
	border-radius: var(--radius-sm);
	background: rgba(128, 128, 128, 0.08);
	text-align: center;
	cursor: pointer;
	transition: background 0.18s var(--ease);
}

.xe-drop:hover,
.xe-drop.is-over {
	background: rgba(128, 128, 128, 0.17);
}

.xe-drop-ico {
	font-size: 20px;
	line-height: 1;
	opacity: 0.8;
}

.xe-drop-text {
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
}

.xe-drop-hint {
	font-size: 12px;
	color: var(--muted);
}

/* 媒体库：3 列等比瀑布流（列由 JS 建，翻页只往列尾追加，不会重排跳位） */
#xe-mlist {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	max-height: 300px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

#xe-mlist .masonry-col {
	flex: 1;
	min-width: 0;
}

#xe-mlist .xat-media {
	display: block;
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0 0 6px;
	border-radius: 7px;
	background: rgba(128, 128, 128, 0.14);
}

#xe-mlist .xat-media img {
	position: static;
	width: 100%;
	height: auto;
	transition: transform 0.24s var(--ease), opacity 0.16s var(--ease);
}

#xe-mlist .xat-media.is-loading {
	pointer-events: none;
}

#xe-mlist .xat-media.is-loading img {
	opacity: 0.4;
}

.xe-src-pane[data-pane='link'] .xat-btn {
	flex: 0 0 auto;
	padding-left: 13px;
	padding-right: 13px;
}

.xe-wm-opt {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	font-size: 12px;
	color: var(--muted);
	cursor: pointer;
}

.xe-wm-opt input {
	margin: 0;
	flex: 0 0 auto;
}

.xe-up-link {
	color: var(--gold-text);
	text-decoration: none;
	font-weight: 600;
}

.dark .xe-up-link {
	color: var(--gold);
}

/* ---------- 中栏：预览台 ---------- */

/*
 * 中栏是 grid 的 1fr，默认 min-width:auto 会被内容撑开：把图放到 200% 时
 * canvas 变宽，整页跟着横向滚动，预览台自己的滚动条反而不出现。
 * 显式归零，让溢出只发生在 .xe-stage 内部。
 */
.xe-main {
	min-width: 0;
}

.xe-stage-panel .xat-panel-title {
	margin: 0;
}

.xe-stage-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.xe-stage-meta {
	font-size: 12px;
	font-weight: 400;
	color: var(--muted);
	margin-left: 8px;
}

.xe-viewtabs {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	border-radius: 8px;
	background: rgba(128, 128, 128, 0.1);
}

.xe-viewtab {
	border: none;
	background: transparent;
	color: var(--muted);
	font-family: inherit;
	font-size: 12px;
	line-height: 1;
	padding: 5px 10px;
	border-radius: 6px;
	cursor: pointer;
}

.xe-viewtab.active {
	background: var(--xe-fill-on);
	color: var(--ink);
	font-weight: 700;
}

.xe-viewtab:disabled {
	opacity: 0.45;
	cursor: default;
}

/* 舞台：内容比容器大时靠滚动，auto 外边距负责居中（不用 justify-content，
   那个在内容溢出时会把上/左边缘裁掉）。
   高度给足：用固定高而不是 min-height，否则空内容时只有 300px，横图会被高度卡住，
   白白浪费中栏一半宽度，看着就是「图怎么这么小」。 */
.xe-stage {
	position: relative;
	display: flex;
	height: clamp(320px, 56vh, 600px);
	min-width: 0;
	overflow: auto;
	overscroll-behavior: contain;
	padding: 14px;
	border-radius: var(--radius-sm);
	/* 底色留一点透明（86%），底下的页面背景能隐约透出来，保持站内那层通透感；
	   但又不能全透 —— 全透的话站点背景图会跟预览内容搅在一起，
	   判断「这张图到底什么样」就不准了。 */
	background-color: rgba(250, 250, 251, 0.86);
	background-image:
		linear-gradient(45deg, rgba(128, 128, 128, 0.1) 25%, transparent 25%, transparent 75%, rgba(128, 128, 128, 0.1) 75%),
		linear-gradient(45deg, rgba(128, 128, 128, 0.1) 25%, transparent 25%, transparent 75%, rgba(128, 128, 128, 0.1) 75%);
	background-size: 16px 16px;
	background-position: 0 0, 8px 8px;
}

.xe-wrap {
	position: relative;
	margin: auto;
	flex: 0 0 auto;
	overflow: hidden;
	border-radius: 4px;
	line-height: 0;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
}

#xe-view {
	display: block;
	width: 100%;
	height: auto;
	touch-action: none;
}

/* 裁剪框：外圈用超大 box-shadow 压暗，比 4 块遮罩简单且没有接缝 */
.xe-crop {
	position: absolute;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.95);
	box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.48);
	cursor: move;
	touch-action: none;
}

.xe-crop[hidden] {
	display: none !important;
}

/* 三分线：从 1/3 起铺，正好落在 1/3、2/3 两处（不从 0 起，免得第一条压在边框上） */
.xe-grid {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.5;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.9) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 1px, transparent 1px);
	background-size: 33.3333% 100%, 100% 33.3333%;
	background-position: 33.3333% 0, 0 33.3333%;
}

.xe-h {
	position: absolute;
	width: 12px;
	height: 12px;
	background: #fff;
	border-radius: 3px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
	transform: translate(-50%, -50%);
}

.xe-h[data-h='nw'] { left: 0; top: 0; cursor: nwse-resize; }
.xe-h[data-h='n'] { left: 50%; top: 0; cursor: ns-resize; }
.xe-h[data-h='ne'] { left: 100%; top: 0; cursor: nesw-resize; }
.xe-h[data-h='e'] { left: 100%; top: 50%; cursor: ew-resize; }
.xe-h[data-h='se'] { left: 100%; top: 100%; cursor: nwse-resize; }
.xe-h[data-h='s'] { left: 50%; top: 100%; cursor: ns-resize; }
.xe-h[data-h='sw'] { left: 0; top: 100%; cursor: nesw-resize; }
.xe-h[data-h='w'] { left: 0; top: 50%; cursor: ew-resize; }

/* 框内右下角的实时尺寸标签：放框外会被 .xe-wrap 的 overflow 裁掉 */
.xe-sizetag {
	position: absolute;
	right: 5px;
	bottom: 5px;
	font-size: 11px;
	line-height: 1;
	padding: 3px 7px;
	border-radius: 5px;
	background: rgba(0, 0, 0, 0.72);
	color: #fff;
	white-space: nowrap;
	pointer-events: none;
	z-index: 2;
}

.xe-empty {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: var(--muted);
	font-size: 13px;
	text-align: center;
	pointer-events: none;
}

.xe-empty span {
	font-size: 28px;
	opacity: 0.7;
}

/* 缩放条：百分比是「相对原图像素的真实比例」，100% = 1:1 像素 */
.xe-zoom {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--muted);
}

.xe-zoom input[type='range'] {
	width: 104px;
}

.xe-zoom-num {
	min-width: 44px;
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var(--text);
}

/* 「适应」：一键回到铺满预览台（也是打开图片时的默认状态） */
.xe-zoom-fit {
	border: none;
	background: transparent;
	color: var(--muted);
	font-family: inherit;
	font-size: 11.5px;
	line-height: 1;
	padding: 5px 6px;
	margin-left: 2px;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.16s var(--ease), color 0.16s var(--ease);
}

.xe-zoom-fit:hover {
	background: var(--xe-fill-h);
	color: var(--ink);
}

.xe-page .xat-iconbtn:disabled,
.xe-zoom-fit:disabled {
	opacity: 0.38;
	cursor: default;
	background: transparent;
	color: var(--muted);
}

/* ---------- 队列 ---------- */

.xe-q-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

.xe-q-head .xat-panel-title {
	margin: 0;
}

.xe-count {
	font-size: 12px;
	font-weight: 400;
	color: var(--muted);
	margin-left: 6px;
}

.xe-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 8px;
}

.xe-card {
	position: relative;
	display: flex;
	gap: 8px;
	align-items: center;
	padding: 6px;
	border-radius: var(--radius-sm);
	background: rgba(128, 128, 128, 0.07);
	cursor: pointer;
	transition: background 0.16s var(--ease);
	/* 队列上限 100 张，滚出视口的卡片跳过布局和绘制；
	   56px = 44 缩略图 + 上下 6px 内边距 */
	content-visibility: auto;
	contain-intrinsic-size: auto 56px;
}

.xe-card:hover {
	background: rgba(128, 128, 128, 0.13);
}

.xe-card.is-active {
	background: rgba(128, 128, 128, 0.19);
	outline: 1.5px solid var(--brand);
	outline-offset: -1.5px;
}

.dark .xe-card.is-active {
	outline-color: #fff;
}

.xe-thumb {
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	border-radius: 7px;
	overflow: hidden;
	background: rgba(128, 128, 128, 0.16);
	line-height: 0;
}

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

.xe-card-body {
	display: block;
	min-width: 0;
	flex: 1;
}

.xe-card-name {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.xe-card-sub {
	display: block;
	font-size: 11px;
	color: var(--muted);
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.xe-card-sub.is-err {
	color: #c0392b;
}

.xe-card-dl {
	position: absolute;
	right: 4px;
	top: 4px;
	width: 22px;
	height: 22px;
	display: none;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	background: var(--ok);
	color: #fff;
	font-size: 12px;
	text-decoration: none;
	line-height: 1;
}

.xe-card.is-done .xe-card-dl {
	display: flex;
}

/* ---------- 右栏：操作面板 ---------- */

.xe-param-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px;
}

.xe-param-head .xat-panel-title {
	margin: 0;
}

/* 右侧标出当前模式，省得用户滚动时忘了自己在「只做压缩」还是四步全做 */
.xe-param-hint {
	flex: 0 0 auto;
	font-size: 11px;
	line-height: 1;
	padding: 5px 8px;
	border-radius: 999px;
	background: rgba(128, 128, 128, 0.1);
	color: var(--muted);
	white-space: nowrap;
}

/* 分组小标题：序号圆点 + 名称 + 一句说明 */
.xe-group {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 9px;
	font-size: 12px;
	font-weight: 700;
	color: var(--text);
	line-height: 1.3;
}

.xe-gno {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--brand);
	color: var(--bg);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
}

.xe-gsub {
	margin-left: auto;
	font-size: 11px;
	font-weight: 400;
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 多步时把标题右侧的说明换成「只做这步」，一键退回单功能模式 */
.xe-solo {
	margin-left: auto;
	flex: 0 0 auto;
	border: none;
	background: transparent;
	color: var(--brand);
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	padding: 4px 0 4px 8px;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.xe-solo:hover {
	opacity: 0.7;
}

/* 一步时只露一个面板；多步时依次排开，靠间距分开（站内不画分隔线） */
.xe-pane {
	display: none;
}

.xe-pane.active {
	display: block;
}

.xe-pane.active ~ .xe-pane.active {
	margin-top: 18px;
}

.xe-row {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 8px;
}

.xe-row-label {
	font-size: 12px;
	color: var(--muted);
	flex: 0 0 34px;
}

.xe-field {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 1;
	min-width: 0;
	padding: 4px 8px;
	border-radius: 8px;
	background: rgba(128, 128, 128, 0.1);
}

.xe-field input {
	width: 100%;
	min-width: 0;
	border: none;
	background: transparent;
	color: var(--text);
	font-family: inherit;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	padding: 2px 0;
	outline: none;
}

.xe-field span {
	font-size: 11px;
	color: var(--muted);
	flex: 0 0 auto;
}

.xe-seg {
	display: flex;
	gap: 4px;
	padding: 4px;
	border-radius: var(--radius-sm);
	background: rgba(128, 128, 128, 0.1);
	margin-bottom: 10px;
}

.xe-seg-btn {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	color: var(--text);
	font-size: 12.5px;
	font-family: inherit;
	padding: 6px 0;
	border-radius: 7px;
	cursor: pointer;
	transition: background 0.16s var(--ease), color 0.16s var(--ease);
}

.xe-seg-btn.active {
	background: var(--xe-fill-on);
	color: var(--ink);
	font-weight: 700;
}

.xe-seg-btn:disabled {
	opacity: 0.45;
	cursor: default;
}

/* 比例 / 预设：一排小胶囊，可换行 */
.xe-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-bottom: 10px;
}

.xe-chipbtn {
	border: none;
	background: var(--xe-fill);
	color: var(--text);
	font-family: inherit;
	font-size: 11.5px;
	line-height: 1;
	padding: 6px 9px;
	border-radius: 7px;
	cursor: pointer;
	transition: background 0.16s var(--ease), color 0.16s var(--ease);
}

.xe-chipbtn:hover {
	background: var(--xe-fill-h);
}

.xe-chipbtn.active {
	background: var(--xe-fill-on);
	color: var(--ink);
	font-weight: 700;
}

.xe-lock {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--muted);
	cursor: pointer;
	margin-bottom: 8px;
}

.xe-lock input {
	margin: 0;
}

.xe-range-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
}

.xe-range-row input[type='range'] {
	flex: 1;
	min-width: 0;
}

.xe-range-val {
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: var(--text);
	min-width: 42px;
	text-align: right;
}

/* ---------- 输出 / 进度 ---------- */

.xe-out {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 12px;
}

.xe-out-line {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-size: 12px;
	color: var(--muted);
}

.xe-out-line b {
	color: var(--text);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.xe-prog-bar {
	height: 6px;
	border-radius: 999px;
	background: rgba(128, 128, 128, 0.16);
	overflow: hidden;
	margin: 8px 0 8px;
}

.xe-prog-bar i {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: var(--ok);
	transition: width 0.22s var(--ease);
}

.xe-prog-txt {
	font-size: 12px;
	color: var(--muted);
	margin: 0;
	line-height: 1.5;
}

.xe-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.xe-tip-mini {
	font-size: 11.5px;
	color: var(--muted);
	margin: 6px 0 0;
	line-height: 1.45;
}

.xe-vip-tag {
	display: inline-block;
	font-size: 10px;
	line-height: 1;
	padding: 3px 5px;
	border-radius: 5px;
	background: rgba(201, 148, 46, 0.16);
	color: var(--gold-text);
	margin-left: 6px;
	vertical-align: 1px;
}

.dark .xe-vip-tag {
	color: var(--gold);
}

/* ---------- 轻提示 ---------- */

.xe-toast {
	position: fixed;
	left: 50%;
	bottom: 34px;
	transform: translateX(-50%) translateY(12px);
	padding: 9px 16px;
	border-radius: 10px;
	background: rgba(17, 17, 17, 0.92);
	color: #fff;
	font-size: 13px;
	line-height: 1.4;
	max-width: min(86vw, 420px);
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
	z-index: var(--z-toast, 1200);
}

.xe-toast.show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* 深色模式下棋盘格得压暗，不然一块浅灰底会把整页的黑色调破掉 */
.dark .xe-stage {
	background-color: rgba(12, 12, 16, 0.86);
	background-image:
		linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.05) 75%),
		linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.05) 75%);
}

/* ---------- 响应式 ---------- */

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

	/* 手机上单列时，把两栏里的面板拆成同级网格项，重新排队：
	   添加图片 → 预览 + 队列 → 参数 → 输出 → 打包 → 处理说明（说明放最后，别挡路） */
	.xe-side-add,
	.xe-side-param {
		display: contents;
	}

	.xe-side-add > .xat-panel:nth-child(1) { order: 1; }
	.xe-main { order: 2; }
	.xe-side-param > .xat-panel:nth-child(1) { order: 3; }
	.xe-side-param > .xat-panel:nth-child(2) { order: 4; }
	.xe-side-param > .xat-panel:nth-child(3) { order: 5; }
	.xe-side-add > .xat-panel:nth-child(2) { order: 9; }

	.xe-stage {
		height: 46vh;
		min-height: 240px;
	}

	.xe-list {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}

	/* 5 列到 900 以下每格只剩 150 上下，副文案「JPG / PNG / WebP」差几像素放不下。
	   把图标、间距、内边距各收一点把宽度抢回来，大多数平板宽度下还能整行显示；
	   再窄就按基础样式走省略号 —— 不换行，换行会把五张卡的高度全带歪。 */
	.xe-step {
		column-gap: 8px;
		padding: 10px 10px;
	}

	.xe-step-ico,
	.xe-step-ico svg {
		width: 28px;
		height: 28px;
	}
}

@media (max-width: 720px) {
	/* 四张卡片挤一行会窄到看不清副文案，改 2×2；「四步全做」独占一行当主行动按钮 */
	.xe-steps-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.xe-step {
		column-gap: 8px;
		padding: 10px 10px;
	}

	/* 窄屏格子只有 170 上下，32 的图标太占地方，缩一档 */
	.xe-step-ico,
	.xe-step-ico svg {
		width: 26px;
		height: 26px;
	}

	.xe-step-name {
		font-size: 12.5px;
	}

	.xe-step-all {
		grid-column: 1 / -1;
		justify-content: center;
		column-gap: 10px;
	}

	.xe-steps-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	.xe-steps-tip {
		text-align: left;
	}
}

@media (max-width: 480px) {
	.xe-status {
		margin-bottom: 14px;
	}

	.xe-stage {
		min-height: 220px;
		padding: 8px;
	}

	.xe-sizetag {
		font-size: 10px;
	}

	/* 手机上 8 个手柄太密，横向两条容易被误触，只留四角 */
	.xe-h[data-h='n'],
	.xe-h[data-h='s'],
	.xe-h[data-h='e'],
	.xe-h[data-h='w'] {
		display: none;
	}
}