/* XingTu Online editor — mobile-first, app-like layout */

.xt-editor {
	--xt-bg: #0d0f12;
	--xt-panel: #16191f;
	--xt-line: rgba(255,255,255,.08);
	--xt-text: #e8eaef;
	--xt-mute: #8d93a1;
	--xt-brand: #c6f432;
	background: var(--xt-bg);
	color: var(--xt-text);
	border-radius: var(--radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 520px;
	height: min(78vh, 820px);
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
}
.xt-editor.is-dragover { outline: 3px dashed var(--xt-brand); outline-offset: -6px; }
.xt-editor [hidden] { display: none !important; }

/* ---------- Drop zone ---------- */
.xt-drop {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 32px 20px;
	gap: 14px;
}
.xt-drop-icon {
	width: 72px; height: 72px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #e2ff7a, var(--xt-brand) 60%, #9fce1d);
	box-shadow: 0 0 40px rgba(198,244,50,.35);
	display: flex; align-items: center; justify-content: center;
	font-size: 30px;
	color: #111;
}
.xt-drop h2 { margin: 6px 0 0; font-size: 22px; color: #fff; }
.xt-drop p { margin: 0; color: var(--xt-mute); font-size: 14px; max-width: 420px; }
.xt-drop-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.xt-drop-privacy { font-size: 12px; color: #6f7581; margin-top: 4px; }
.xt-drop-privacy::before { content: "🔒 "; }
.xt-error { color: #ff8a8a; }

.xt-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 14px;
	border: 2px solid transparent;
	cursor: pointer;
	font-family: inherit;
	transition: transform .12s ease, background .15s ease;
}
.xt-btn:active { transform: scale(.96); }
.xt-btn-primary { background: var(--xt-brand); color: #111; }
.xt-btn-primary:hover { background: #d4ff4a; }
.xt-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.xt-btn-ghost:hover { border-color: #fff; }
.xt-btn:disabled { opacity: .5; cursor: wait; }

/* ---------- Topbar ---------- */
.xt-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);
}
.xt-topbar-group { display: flex; gap: 6px; }
.xt-icon-btn {
	background: transparent;
	color: var(--xt-text);
	border: 1px solid var(--xt-line);
	border-radius: 10px;
	padding: 8px 12px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	white-space: nowrap;
}
.xt-icon-btn:hover { border-color: rgba(255,255,255,.3); }
.xt-icon-btn.is-active { background: var(--xt-brand); color: #111; border-color: var(--xt-brand); }
.xt-icon-btn.xt-primary { background: var(--xt-brand); color: #111; border-color: var(--xt-brand); }

/* ---------- Stage ---------- */
.xt-stage {
	flex: 1;
	min-height: 240px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #000 repeating-conic-gradient(#0d0f12 0% 25%, #111418 0% 50%) 50% / 24px 24px;
}
.xt-canvas-wrap { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
#xt-canvas { display: block; max-width: 100%; max-height: 100%; }

.xt-crop-box {
	position: absolute;
	border: 2px solid var(--xt-brand);
	box-shadow: 0 0 0 9999px rgba(0,0,0,.55);
	cursor: move;
	touch-action: none;
}
.xt-crop-box::before, .xt-crop-box::after {
	content: ""; position: absolute; pointer-events: none;
	border-color: rgba(255,255,255,.35); border-style: solid;
}
.xt-crop-box::before { left: 33.33%; right: 33.33%; top: 0; bottom: 0; border-width: 0 1px; }
.xt-crop-box::after { top: 33.33%; bottom: 33.33%; left: 0; right: 0; border-width: 1px 0; }
.xt-handle {
	position: absolute;
	width: 22px; height: 22px;
	background: var(--xt-brand);
	border-radius: 50%;
	border: 2px solid #111;
	touch-action: none;
}
.xt-handle[data-handle="nw"] { left: -11px; top: -11px; cursor: nwse-resize; }
.xt-handle[data-handle="ne"] { right: -11px; top: -11px; cursor: nesw-resize; }
.xt-handle[data-handle="sw"] { left: -11px; bottom: -11px; cursor: nesw-resize; }
.xt-handle[data-handle="se"] { right: -11px; bottom: -11px; cursor: nwse-resize; }

/* ---------- Tabs ---------- */
.xt-tabs {
	display: flex;
	background: var(--xt-panel);
	border-top: 1px solid var(--xt-line);
}
.xt-tab {
	flex: 1;
	background: none;
	border: 0;
	color: var(--xt-mute);
	padding: 12px 4px 10px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	border-bottom: 2px solid transparent;
}
.xt-tab-icon { font-size: 18px; line-height: 1; }
.xt-tab.is-active { color: var(--xt-brand); border-bottom-color: var(--xt-brand); }

/* ---------- Panels ---------- */
.xt-panels { background: var(--xt-panel); padding: 12px 12px 14px; min-height: 132px; }
.xt-panel[hidden] { display: none; }

.xt-presets {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding-bottom: 6px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.xt-presets::-webkit-scrollbar { display: none; }
.xt-preset {
	flex: 0 0 auto;
	background: none;
	border: 0;
	color: var(--xt-mute);
	cursor: pointer;
	font-family: inherit;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 2px;
	width: 64px;
}
.xt-preset-swatch {
	width: 54px; height: 54px;
	border-radius: 14px;
	border: 2px solid transparent;
	background: linear-gradient(135deg, #f2c9b0 0%, #d98c6f 40%, #3d2b2b 100%);
}
.xt-preset.is-active .xt-preset-swatch { border-color: var(--xt-brand); box-shadow: 0 0 0 2px rgba(198,244,50,.35); }
.xt-preset.is-active { color: #fff; }
.xt-preset-name { font-size: 11px; font-weight: 600; white-space: nowrap; }

/* preset swatch tints */
.xt-swatch-clear   { filter: brightness(1.1) saturate(.85) hue-rotate(-8deg); }
.xt-swatch-cool    { filter: saturate(.9) hue-rotate(20deg); }
.xt-swatch-pink    { filter: brightness(1.1) hue-rotate(-20deg) saturate(1.1); }
.xt-swatch-peach   { filter: brightness(1.08) saturate(1.05) sepia(.15); }
.xt-swatch-japan   { filter: brightness(1.12) saturate(.75) contrast(.9); }
.xt-swatch-ccd     { filter: contrast(1.2) saturate(1.25); }
.xt-swatch-vintage { filter: sepia(.45) contrast(.9); }
.xt-swatch-cinema  { filter: contrast(1.15) hue-rotate(10deg); }
.xt-swatch-warm    { filter: sepia(.3) saturate(1.2); }
.xt-swatch-mono    { filter: grayscale(1) contrast(1.15); }

.xt-slider {
	display: grid;
	grid-template-columns: 96px 1fr 40px;
	align-items: center;
	gap: 10px;
	padding: 5px 0;
	font-size: 13px;
}
.xt-slider-label { color: var(--xt-mute); font-weight: 600; }
.xt-slider output { text-align: right; font-variant-numeric: tabular-nums; color: #fff; font-size: 12px; }
.xt-slider input[type=range] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 4px;
	background: rgba(255,255,255,.15);
	border-radius: 2px;
	outline: none;
}
.xt-slider input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--xt-brand);
	border: 3px solid #111;
	cursor: pointer;
}
.xt-slider input[type=range]::-moz-range-thumb {
	width: 18px; height: 18px;
	border-radius: 50%;
	background: var(--xt-brand);
	border: 3px solid #111;
	cursor: pointer;
}
.xt-sliders-scroll { max-height: 190px; overflow-y: auto; padding-right: 4px; }
.xt-hint { font-size: 12px; color: var(--xt-mute); margin: 8px 0 0; }

.xt-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.xt-chip {
	background: transparent;
	color: var(--xt-text);
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 999px;
	padding: 7px 14px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
}
.xt-chip.is-active { background: var(--xt-brand); color: #111; border-color: var(--xt-brand); }
.xt-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }

.xt-format { display: flex; gap: 14px; margin-bottom: 8px; font-size: 14px; }
.xt-format label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

.xt-quota-over {
	margin-top: 10px;
	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;
}
.xt-quota-over p { margin: 0; font-size: 13px; color: var(--xt-text); flex: 1 1 240px; }

.xt-toast {
	position: absolute;
	left: 50%; top: 14px;
	transform: translateX(-50%);
	background: rgba(0,0,0,.85);
	color: #fff;
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 13px;
	z-index: 5;
	pointer-events: none;
}

@media (min-width: 860px) {
	.xt-editor { height: 720px; }
	.xt-panels { min-height: 150px; }
	.xt-slider { grid-template-columns: 120px 1fr 44px; }
	.xt-tab { flex-direction: row; gap: 8px; font-size: 13px; }
}