/* ============ 触发按钮 - 居中科技胶囊 ============ */

.hdm-instance {
	display: block;
	width: 100%;
	text-align: center;
	padding: 18px 0;
	box-sizing: border-box;
}

.hdm-trigger {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 48px;
	margin: 0;
	border: 0;
	border-radius: 999px;
	background:
		radial-gradient(120% 140% at 50% 0%, rgba(0, 190, 255, 0.22), transparent 68%),
		linear-gradient(180deg, #0e2034 0%, #060f1c 100%);
	color: #e8fbff;
	font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.16em;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
	overflow: hidden;
	box-shadow:
		0 0 0 1px rgba(0, 229, 255, 0.45),
		0 0 0 5px rgba(0, 200, 255, 0.06),
		0 0 22px rgba(0, 190, 255, 0.30),
		0 0 52px rgba(0, 130, 255, 0.14),
		inset 0 1px 0 rgba(255, 255, 255, 0.14),
		inset 0 -14px 24px rgba(0, 110, 210, 0.18);
	transition: transform 0.15s ease, box-shadow 0.3s ease;
	animation: hdm-btn-glow 3.2s ease-in-out infinite;
}

@keyframes hdm-btn-glow {
	0%, 100% {
		box-shadow:
			0 0 0 1px rgba(0, 229, 255, 0.42),
			0 0 0 5px rgba(0, 200, 255, 0.05),
			0 0 18px rgba(0, 190, 255, 0.26),
			0 0 44px rgba(0, 130, 255, 0.12),
			inset 0 1px 0 rgba(255, 255, 255, 0.14),
			inset 0 -14px 24px rgba(0, 110, 210, 0.18);
	}
	50% {
		box-shadow:
			0 0 0 1px rgba(0, 235, 255, 0.65),
			0 0 0 5px rgba(0, 200, 255, 0.10),
			0 0 28px rgba(0, 210, 255, 0.42),
			0 0 68px rgba(0, 150, 255, 0.22),
			inset 0 1px 0 rgba(255, 255, 255, 0.18),
			inset 0 -14px 24px rgba(0, 110, 210, 0.18);
	}
}

.hdm-trigger::before {
	content: '';
	position: absolute;
	inset: -50% -80%;
	background: linear-gradient(
		100deg,
		transparent 42%,
		rgba(120, 240, 255, 0.18) 50%,
		transparent 58%
	);
	transform: translateX(-60%);
	animation: hdm-btn-scan 5.5s ease-in-out infinite;
	pointer-events: none;
}

@keyframes hdm-btn-scan {
	0%, 55% { transform: translateX(-60%); }
	85%, 100% { transform: translateX(60%); }
}

.hdm-trigger-label {
	position: relative;
	z-index: 2;
	text-shadow:
		0 0 6px rgba(0, 229, 255, 0.75),
		0 0 16px rgba(0, 170, 255, 0.45);
	transition: text-shadow 0.25s ease;
}

.hdm-trigger:active {
	transform: scale(0.97);
}

.hdm-trigger:focus-visible {
	outline: 2px solid rgba(0, 229, 255, 0.85);
	outline-offset: 5px;
}

@media (hover: hover) {
	.hdm-trigger:hover {
		animation-play-state: paused;
		box-shadow:
			0 0 0 1px rgba(0, 240, 255, 0.8),
			0 0 0 6px rgba(0, 200, 255, 0.12),
			0 0 32px rgba(0, 220, 255, 0.5),
			0 0 76px rgba(0, 150, 255, 0.26),
			inset 0 1px 0 rgba(255, 255, 255, 0.2),
			inset 0 -14px 24px rgba(0, 110, 210, 0.18);
	}
	.hdm-trigger:hover .hdm-trigger-label {
		text-shadow:
			0 0 8px rgba(0, 245, 255, 1),
			0 0 22px rgba(0, 200, 255, 0.75);
	}
}

/* ============ 全屏遮罩 ============ */
.hdm-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	overflow: hidden;
	cursor: pointer;
	animation: hdm-fade-in 0.2s ease;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
	overscroll-behavior: none;
}
.hdm-overlay.hdm-closing {
	opacity: 0;
	transition: opacity 0.25s ease;
}
@keyframes hdm-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ============ 滚动轨道 ============ */
.hdm-track {
	position: absolute;
	top: 50%;
	left: 0;
	white-space: nowrap;
	will-change: transform;
	transform: translate(100vw, -50%);
}
.hdm-text {
	display: inline-block;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: 0.04em;
	transition: font-size 0.12s ease;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* ============ 字体特效 ============ */
.hdm-fx-glow {
	text-shadow:
		0 0 8px var(--hdm-color),
		0 0 24px var(--hdm-color),
		0 0 60px var(--hdm-color);
}

.hdm-fx-outline {
	-webkit-text-stroke: 2px var(--hdm-stroke);
	paint-order: stroke fill;
}

.hdm-fx-neon {
	text-shadow:
		0 0 4px var(--hdm-color),
		0 0 12px var(--hdm-color),
		0 0 28px var(--hdm-color),
		0 0 56px var(--hdm-color);
	animation: hdm-neon 1.6s ease-in-out infinite;
}
@keyframes hdm-neon {
	0%, 100% { opacity: 1; }
	45%      { opacity: 0.72; }
	55%      { opacity: 0.92; }
}

.hdm-fx-rainbow {
	color: transparent !important;
	background-image: linear-gradient(90deg, #ff004c, #ff8a00, #ffe600, #39ff14, #00e5ff, #7a5cff, #ff004c);
	background-size: 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	animation: hdm-flow 3s linear infinite;
}
@keyframes hdm-flow { to { background-position: 300% 0; } }

.hdm-fx-fire {
	color: transparent !important;
	background-image: linear-gradient(0deg, #ff2d00, #ff7a00, #ffc400, #ffe600);
	-webkit-background-clip: text;
	background-clip: text;
	animation: hdm-flicker 0.5s ease-in-out infinite alternate;
}
@keyframes hdm-flicker {
	from { filter: drop-shadow(0 0 6px rgba(255, 90, 0, 0.6)) brightness(1); }
	to   { filter: drop-shadow(0 0 18px rgba(255, 140, 0, 0.95)) brightness(1.15); }
}

.hdm-fx-pulse {
	text-shadow: 0 0 20px var(--hdm-color);
	animation: hdm-pulse 1s ease-in-out infinite;
}
@keyframes hdm-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.12); }
}

.hdm-fx-shake { animation: hdm-shake 0.4s linear infinite; }
@keyframes hdm-shake {
	0%, 100% { transform: translate(0, 0) rotate(0); }
	20%      { transform: translate(-2px, 2px) rotate(-1.2deg); }
	40%      { transform: translate(2px, -1px) rotate(1deg); }
	60%      { transform: translate(-1px, -2px) rotate(-0.8deg); }
	80%      { transform: translate(2px, 1px) rotate(0.9deg); }
}

.hdm-fx-3d {
	text-shadow:
		1px 1px 0 var(--hdm-dark),
		2px 2px 0 var(--hdm-dark),
		3px 3px 0 var(--hdm-dark),
		4px 4px 0 var(--hdm-dark),
		6px 6px 14px rgba(0, 0, 0, 0.45);
}

/* ============ 控制面板 ============ */
.hdm-panel {
	position: absolute;
	left: 50%;
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	width: min(720px, calc(100% - 32px));
	max-height: min(62vh, 560px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	transform: translate(-50%, 16px);
	padding: 12px 16px;
	background: rgba(20, 20, 20, 0.82);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 16px;
	color: #fff;
	font: 14px/1.4 system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
	cursor: default;
	z-index: 2;
	touch-action: pan-y;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
.hdm-panel.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, 0);
}

.hdm-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.hdm-row + .hdm-row { margin-top: 10px; }
.hdm-row-fx { align-items: flex-start; }

.hdm-label {
	opacity: 0.62;
	font-size: 13px;
	white-space: nowrap;
	min-width: 32px;
}

.hdm-btn {
	min-width: 40px;
	height: 36px;
	padding: 0 10px;
	border: 0;
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	transition: background 0.15s, transform 0.1s;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}
.hdm-btn:active { transform: scale(0.94); }

.hdm-val {
	min-width: 40px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	font-size: 14px;
}

.hdm-range {
	flex: 1;
	min-width: 120px;
	height: 36px;
	accent-color: #fff;
	touch-action: manipulation;
}

.hdm-color {
	width: 44px;
	height: 36px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 8px;
	background: transparent;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.hdm-swatches {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}
.hdm-swatch {
	width: 26px;
	height: 26px;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	cursor: pointer;
	transition: transform 0.12s;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}
.hdm-swatch:active { transform: scale(0.92); }
.hdm-swatch-recent { border-style: dashed; }
.hdm-swatch-sep {
	width: 1px;
	height: 20px;
	background: rgba(255, 255, 255, 0.25);
	display: inline-block;
}

.hdm-select {
	height: 36px;
	padding: 0 10px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font-size: 14px;
	cursor: pointer;
	touch-action: manipulation;
}
.hdm-select option { color: #111; }

.hdm-effects {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	flex: 1;
	min-width: 0;
}
.hdm-fx-btn {
	padding: 7px 12px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font-size: 13px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}
.hdm-fx-btn:active { transform: scale(0.95); }
.hdm-fx-btn.is-active {
	background: #fff;
	border-color: #fff;
	color: #111;
	font-weight: 600;
}

.hdm-input {
	flex: 1;
	min-width: 140px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font-size: 14px;
	touch-action: manipulation;
}
.hdm-input:focus { outline: 1px solid rgba(255, 255, 255, 0.5); }

.hdm-close {
	margin-left: auto;
	background: rgba(255, 255, 255, 0.92);
	color: #111;
	font-weight: 600;
	font-size: 14px;
	min-width: 60px;
}

/* ============ 页面滚动锁 ============ */
body.hdm-lock {
	overflow: hidden !important;
	overscroll-behavior: none;
}

/* ============ hover 增强（仅鼠标设备） ============ */
@media (hover: hover) {
	.hdm-btn:hover { background: rgba(255, 255, 255, 0.26); }
	.hdm-fx-btn:hover { background: rgba(255, 255, 255, 0.18); }
	.hdm-swatch:hover { transform: scale(1.18); }
	.hdm-close:hover { background: #fff; }
}

/* ============ 手机适配（竖屏） ============ */
@media (max-width: 640px) {
	.hdm-instance { padding: 14px 0; }
	.hdm-trigger {
		padding: 13px 36px;
		font-size: 14px;
		letter-spacing: 0.14em;
	}

	.hdm-panel {
		left: 8px;
		right: 8px;
		width: auto;
		transform: translate(0, 16px);
		bottom: calc(8px + env(safe-area-inset-bottom, 0px));
		max-height: 70vh;
		padding: 10px 12px;
		border-radius: 14px;
		font-size: 13px;
	}
	.hdm-panel.is-visible { transform: translate(0, 0); }

	.hdm-row { gap: 8px; }
	.hdm-row + .hdm-row { margin-top: 8px; }

	.hdm-label { font-size: 12px; min-width: 28px; }

	.hdm-btn { min-width: 36px; height: 34px; font-size: 15px; }
	.hdm-val { min-width: 32px; font-size: 13px; }

	.hdm-range { min-width: 100px; height: 34px; }
	.hdm-color { width: 40px; height: 34px; }
	.hdm-swatch { width: 24px; height: 24px; }
	.hdm-swatch-sep { height: 18px; }

	.hdm-select { height: 34px; font-size: 13px; }
	.hdm-fx-btn { padding: 6px 10px; font-size: 12px; }
	.hdm-input { height: 34px; font-size: 13px; min-width: 120px; }
	.hdm-close { min-width: 56px; font-size: 13px; height: 34px; }
}

@media (max-width: 380px) {
	.hdm-instance { padding: 12px 0; }
	.hdm-trigger {
		padding: 12px 30px;
		font-size: 13px;
		letter-spacing: 0.12em;
	}
	.hdm-panel { padding: 8px 10px; max-height: 76vh; }
	.hdm-btn { min-width: 32px; height: 32px; font-size: 14px; }
	.hdm-fx-btn { padding: 5px 8px; font-size: 11px; }
}

/* ============ 横屏矮屏 ============ */
@media (orientation: landscape) and (max-height: 500px) {
	.hdm-panel {
		max-height: 90vh;
		bottom: calc(6px + env(safe-area-inset-bottom, 0px));
		padding: 8px 12px;
	}
	.hdm-row + .hdm-row { margin-top: 6px; }
	.hdm-btn { height: 32px; }
	.hdm-color { height: 32px; }
	.hdm-select { height: 32px; }
	.hdm-input { height: 32px; }
	.hdm-range { height: 32px; }
}

/* ============ 减少动画偏好 ============ */
@media (prefers-reduced-motion: reduce) {
	.hdm-trigger { animation: none; }
	.hdm-trigger::before { animation: none; opacity: 0; }
	.hdm-fx-neon,
	.hdm-fx-rainbow,
	.hdm-fx-fire,
	.hdm-fx-pulse,
	.hdm-fx-shake {
		animation: none !important;
	}
	.hdm-fx-rainbow,
	.hdm-fx-fire {
		background-image: none;
		color: var(--hdm-color) !important;
	}
}