/* XingTu background remover — shares .xt-btn / .xt-toast / .xt-drop-* from editor.css */

.xt-bg {
	--xt-bg: #0d0f12;
	--xt-panel: #16191f;
	--xt-line: rgba(255,255,255,.08);
	--xt-text: #e8eaef;
	--xt-mute: #8d93a1;
	--xt-brand: #c6f432;
	position: relative;
	background: var(--xt-bg);
	color: var(--xt-text);
	border-radius: var(--radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 480px;
}
.xt-bg.is-dragover { outline: 3px dashed var(--xt-brand); outline-offset: -6px; }
.xt-bg [hidden] { display: none !important; }
.xt-bg .xt-drop { flex: 1; }

.xtbg-work { display: flex; flex-direction: column; flex: 1; }

.xtbg-topbar {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding: 8px 10px; background: var(--xt-panel); border-bottom: 1px solid var(--xt-line);
}
.xtbg-group { display: flex; gap: 6px; }

.xtbg-stage {
	position: relative;
	height: min(60vh, 560px);
	min-height: 260px;
	display: flex; align-items: center; justify-content: center;
	background: #0a0c0f;
	overflow: hidden;
}
.xtbg-stage.is-transparent #xtbg-canvas {
	background: repeating-conic-gradient(#2a2f38 0% 25%, #1b1f26 0% 50%) 50% / 20px 20px;
}
.xtbg-stage.is-painting #xtbg-canvas { cursor: crosshair; touch-action: none; }
#xtbg-canvas { display: block; max-width: 100%; max-height: 100%; }

.xtbg-status {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	background: rgba(0,0,0,.75); color: #fff; padding: 12px 18px; border-radius: 12px;
	font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 10px; z-index: 4;
}
.xtbg-status::before {
	content: ""; width: 16px; height: 16px; border-radius: 50%;
	border: 2px solid rgba(255,255,255,.3); border-top-color: var(--xt-brand);
	animation: xtbg-spin .8s linear infinite;
}
@keyframes xtbg-spin { to { transform: rotate(360deg); } }

.xtbg-panel { background: var(--xt-panel); padding: 10px 12px 14px; display: grid; gap: 10px; }
.xtbg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.xtbg-label { font-size: 12px; font-weight: 700; color: var(--xt-mute); text-transform: uppercase; letter-spacing: .05em; min-width: 64px; }
.xtbg-slider { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--xt-mute); }
.xtbg-slider input[type=range] { width: 130px; accent-color: var(--xt-brand); }
.xtbg-slider output { color: #fff; min-width: 26px; text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; }
.xtbg-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(255,255,255,.3); margin-right: 6px; vertical-align: -2px; }
.xtbg-row input[type=color] { width: 36px; height: 30px; border-radius: 8px; border: 1px solid rgba(255,255,255,.2); background: #0d0f12; padding: 2px; cursor: pointer; }

.xtbg-export { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.xtbg-format { display: flex; gap: 12px; font-size: 13px; }
.xtbg-format label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.xtbg-quota { font-size: 12px; color: var(--xt-mute); margin: 0; }
.xtbg-quota-over {
	padding: 12px 14px; border-radius: 12px;
	background: rgba(198,244,50,.08); border: 1px solid rgba(198,244,50,.35);
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
}
.xtbg-quota-over p { margin: 0; font-size: 13px; flex: 1 1 240px; }

@media (min-width: 860px) {
	.xtbg-stage { height: 560px; }
}