/*
此源码是基于 XgpNwb 的二次修改
Github：https://github.com/NianBroken/Firework_Simulator
Gitee：https://gitee.com/nianbroken/Firework_Simulator
*/

/* 自定义滚动条样式 */
::-webkit-scrollbar {
	/* 选择整体滚动条 */
	width: 0px; /* 设置滚动条的宽度 */
}

::-webkit-scrollbar-track {
	/* 选择滚动条背景 */
	background: #f1f1f1; /* 设置滚动条背景颜色 */
}

::-webkit-scrollbar-thumb {
	/* 选择滚动条手柄 */
	background: #888; /* 设置滚动条手柄的颜色 */
}

::-webkit-scrollbar-thumb:hover {
	/* 鼠标悬停时选择滚动条手柄 */
	background: #555; /* 设置鼠标悬停时滚动条手柄的颜色 */
}

* {
	position: relative;
	box-sizing: border-box;
}

html,
body {
	height: 100%;
	margin: 0;
}

html {
	background-color: #000;
	--bg-height: 45vh;
	--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
}
@media (max-width: 840px) {
	html {
		--bg-height: 18vh;
	}
}

body {
	overflow: hidden;
	color: rgba(255, 255, 255, 0.5);
	font-family: var(--font-ui);
	line-height: 1.25;
	letter-spacing: 0.06em;
}
body::before {
	content: "";
	position: fixed;
	left: 0;
	right: 0;
	bottom: -12px;
	height: var(--bg-height);
	width: 100%;
	background-image: url(../images/bj.jpg);
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 100% var(--bg-height);
	z-index: -1;
}

.moon {
	position: fixed;
	top: 70px;
	left: 75px;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: radial-gradient(circle at 38% 35%, #f7eec8, #e9d890 55%, #c9b765 80%, #a8904a);
	box-shadow:
		0 0 40px rgba(255, 248, 200, 0.35),
		0 0 120px rgba(255, 248, 200, 0.18),
		inset -12px -8px 30px rgba(150, 125, 50, 0.25);
	z-index: -1;
	pointer-events: none;
	opacity: 0.85;
}
@media (max-width: 840px) {
	.moon {
		top: 64px;
		left: 40px;
		width: 60px;
		height: 60px;
	}
}

.hide {
	opacity: 0;
	visibility: hidden;
}

.remove {
	display: none !important;
}

.blur {
	filter: blur(12px);
}

/* SPA 烟花视图包裹层：必须撑满 body，否则 .container 的 height:100% 失效、加载提示无法垂直居中 */
#view-fireworks {
	height: 100%;
}

.container {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.loading-init {
	width: 100%;
	align-self: center;
	text-align: center;
	text-transform: uppercase;
}
.loading-init__header {
	font-size: 1.2em;
}
.loading-init__status {
	margin-top: 1em;
	font-size: 0.8em;
	opacity: 0.75;
	animation: loading-pulse 1.6s ease-in-out infinite;
}
@keyframes loading-pulse {
	0%,
	100% {
		opacity: 0.35;
	}
	50% {
		opacity: 0.85;
	}
}
@media (prefers-reduced-motion: reduce) {
	.loading-init__status {
		animation: none;
		opacity: 0.75;
	}
}

.stage-container {
	overflow: hidden;
	box-sizing: initial;
	border: 1px solid #222;
	margin: -1px;
}
@media (max-width: 840px) {
	.stage-container {
		border: none;
		margin: 0;
	}
}

.canvas-container {
	width: 100%;
	height: 100%;
	background-color: transparent;
	transition: filter 0.3s;
}
.canvas-container canvas {
	position: absolute;
	mix-blend-mode: lighten;
	transform: translateZ(0);
}

.controls {
	position: absolute;
	top: 0;
	width: 100%;
	padding-bottom: 50px;
	display: flex;
	justify-content: flex-end;
	transition: opacity 0.3s, visibility 0.3s;
}
@media (min-width: 840px) {
	.controls {
		visibility: visible;
	}
	.controls.hide:hover {
		opacity: 1;
	}
}

.menu {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.42);
	transition: opacity 0.3s, visibility 0.3s;
}
.menu__inner-wrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 10px 0;
	transition: opacity 0.3s;
}
.menu__header {
	margin-top: 5px;
	margin-bottom: 8px;
	font-size: 2em;
	text-transform: uppercase;
}
.menu__subheader {
	margin-bottom: 5px;
	font-size: 0.86em;
	opacity: 0.8;
}
.menu form {
	width: 100%;
	max-width: 400px;
	padding: 0 10px;
	margin-right: 80px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
.menu .form-option {
	display: flex;
	align-items: center;
	margin: 16px 0;
	transition: opacity 0.3s;
}
.menu .form-option label {
	display: block;
	width: 50%;
	padding-right: 12px;
	text-align: right;
	text-transform: uppercase;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.menu .form-option--select select {
	display: block;
	width: 50%;
	height: 30px;
	font-size: 1rem;
	font-family: var(--font-ui);
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0.06em;
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.5);
}
.menu .form-option--select select option {
	background-color: black;
}
.menu .form-option--checkbox input {
	display: block;
	width: 26px;
	height: 26px;
	margin: 0;
	opacity: 0.5;
}
@media (max-width: 840px) {
	.menu .form-option select,
	.menu .form-option input {
		outline: none;
	}
}

.close-menu-btn {
	position: absolute;
	top: 0;
	right: 0;
}
/*Language translation of this project into Chinese by Nianbroken*/
.btn {
	opacity: 0.16;
	width: 50px;
	height: 50px;
	display: flex;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: default;
	transition: opacity 0.3s;
}
.btn--bright {
	opacity: 0.5;
}
@media (min-width: 840px) {
	.btn:hover {
		opacity: 0.32;
	}
	.btn--bright:hover {
		opacity: 0.75;
	}
}
.btn svg {
	display: block;
	margin: auto;
}

.credits {
	margin-top: auto;
	margin-bottom: 10px;
	padding-top: 6px;
	font-size: 0.8em;
	opacity: 0.75;
	text-align: center;
}
.credits a {
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
}
.credits a:hover,
.credits a:active {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: underline;
}

.help-modal {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	visibility: hidden;
	transition-property: visibility;
	transition-duration: 0.25s;
}
.help-modal__overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 0;
	transition-property: opacity;
	transition-timing-function: ease-in;
	transition-duration: 0.25s;
}
/*Language translation of this project into Chinese by Nianbroken*/
.help-modal__dialog {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 400px;
	max-height: calc(100vh - 100px);
	margin: 10px;
	padding: 20px;
	border-radius: 0.3em;
	background-color: rgba(0, 0, 0, 0.4);
	opacity: 0;
	transform: scale(0.9, 0.9);
	transition-property: opacity, transform;
	transition-timing-function: ease-in;
	transition-duration: 0.25s;
}
@media (min-width: 840px) {
	.help-modal__dialog {
		font-size: 1.25rem;
		max-width: 500px;
	}
}
.help-modal__header {
	font-size: 1.75em;
	text-transform: uppercase;
	text-align: center;
}
.help-modal__body {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1em 0;
	padding: 1em 0;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.75);
}
.help-modal__close-btn {
	flex-shrink: 0;
	outline: none;
	border: none;
	border-radius: 2px;
	padding: 0.25em 0.75em;
	margin-top: 0.36em;
	font-family: var(--font-ui);
	font-size: 1em;
	color: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background-color: rgba(255, 255, 255, 0.25);
	transition: color 0.3s, background-color 0.3s;
}
.help-modal__close-btn:hover,
.help-modal__close-btn:active,
.help-modal__close-btn:focus {
	color: #fff;
	background-color: #09f;
}
.help-modal.active {
	visibility: visible;
	transition-duration: 0.4s;
}
.help-modal.active .help-modal__overlay {
	opacity: 1;
	transition-timing-function: ease-out;
	transition-duration: 0.4s;
}
.help-modal.active .help-modal__dialog {
	opacity: 1;
	transform: scale(1, 1);
	transition-timing-function: ease-out;
	transition-duration: 0.4s;
}

/* 设置菜单内「创作专属烟花 / 修改这个烟花」入口 */
.menu__links {
	margin: 4px 80px 0 0;
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}
.menu__create-link,
.menu__edit-link {
	display: inline-block;
	padding: 6px 16px;
	font-size: 0.86em;
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 999px;
	transition: color 0.3s, border-color 0.3s;
}
.menu__create-link {
	position: relative;
	padding: 7px 20px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #fff;
	border: none;
	border-radius: 999px;
	background: linear-gradient(135deg, #ff5f9e, #a45cff 55%, #5f7cff);
}
.menu__edit-link {
	color: rgba(255, 195, 255, 0.72);
	border-color: rgba(230, 10, 255, 0.45);
}
@media (min-width: 840px) {
	.menu__create-link:hover {
		color: #fff;
		filter: brightness(1.15);
	}
	.menu__edit-link:hover {
		color: #fff;
		border-color: #e60aff;
	}
}

/* ============ SPA 视图：创作 / 修改 / 不存在 ============ */
/* 表单类视图交给 body 滚动（默认 body overflow hidden） */
body.form-view {
	overflow-y: auto;
}

.create-page {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 24px;
}
/* hidden 属性必须压制 .create-page 的 display:flex，否则 SPA 视图切换失效（熄灭/表单卡片会一直叠加显示） */
.create-page[hidden] {
	display: none;
}
.create-card {
	width: 100%;
	max-width: 520px;
	background: rgba(10, 10, 16, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 12px;
	padding: 32px 36px;
	box-shadow: 0 0 60px rgba(120, 80, 255, 0.18);
}
.create-card h1 {
	margin: 0 0 4px;
	font-size: 1.5em;
	color: #fff;
}
.create-card .sub {
	margin: 0 0 24px;
	font-size: 0.85em;
	opacity: 0.7;
}
.create-card .back-btn {
	display: block;
	margin-top: 10px;
	padding: 12px;
	text-align: center;
	font-size: 0.95rem;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 6px;
	transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.create-card .back-btn:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.75);
	background: rgba(255, 255, 255, 0.06);
}

.form-row {
	margin-bottom: 16px;
}
.form-row label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	opacity: 0.75;
}
.form-row input[type="text"],
.form-row input[type="password"],
.form-row textarea,
.form-row select {
	width: 100%;
	padding: 9px 10px;
	color: rgba(255, 255, 255, 0.85);
	background-color: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 4px;
	font-size: 1rem;
	font-family: inherit;
	box-sizing: border-box;
}
.form-row textarea {
	min-height: 108px;
	resize: vertical;
	line-height: 1.7;
}
.form-row select option {
	background-color: #111;
}
.form-row .row-inline {
	display: flex;
	gap: 14px;
}
.form-row .row-inline > div {
	flex: 1;
}
.checkbox-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.85em;
	opacity: 0.85;
	cursor: pointer;
}
.checkbox-row input {
	width: 18px;
	height: 18px;
	accent-color: #e60aff;
}

.btn-submit {
	width: 100%;
	margin-top: 8px;
	padding: 12px;
	font-family: inherit;
	font-size: 1rem;
	letter-spacing: 0.12em;
	color: #fff;
	background: linear-gradient(135deg, #e60aff, #1e7fff);
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: opacity 0.3s, transform 0.15s;
}
.btn-submit:hover {
	opacity: 0.85;
}
.btn-submit:active {
	transform: translateY(1px);
}
.btn-submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.hint {
	margin-top: 6px;
	font-size: 0.72em;
	opacity: 0.55;
}

.error-tip {
	display: none;
	margin-top: 12px;
	padding: 10px 12px;
	font-size: 0.85em;
	color: #ff9a9a;
	border: 1px solid rgba(255, 120, 120, 0.4);
	border-radius: 6px;
	background: rgba(255, 80, 80, 0.08);
}
.error-tip.show {
	display: block;
}

.success-tip {
	display: none;
	margin-top: 14px;
	padding: 11px 12px;
	font-size: 0.85em;
	color: #9fff9a;
	border: 1px solid rgba(126, 255, 122, 0.35);
	border-radius: 6px;
	background: rgba(126, 255, 122, 0.06);
}
.success-tip.show {
	display: block;
}

.result {
	display: none;
	margin-top: 20px;
	padding: 16px;
	border: 1px solid rgba(126, 255, 122, 0.35);
	background: rgba(126, 255, 122, 0.06);
	border-radius: 8px;
}
.result.show {
	display: block;
}
.result .result-title {
	margin: 0 0 8px;
	font-size: 0.9em;
	color: #9fff9a;
}
.result .link-box {
	display: flex;
	gap: 8px;
}
.result input.link {
	flex: 1;
	padding: 8px 10px;
	font-size: 0.85em;
	color: #fff;
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 4px;
	min-width: 0;
}
.result .btn-copy,
.result .btn-go {
	padding: 8px 14px;
	font-size: 0.85em;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 4px;
	background: transparent;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.3s, color 0.3s;
}
.result .btn-copy:hover {
	background: rgba(255, 255, 255, 0.15);
}
.result .btn-go {
	text-decoration: none;
	background: rgba(30, 127, 255, 0.35);
	border-color: rgba(30, 127, 255, 0.8);
}
.result .btn-go:hover {
	background: rgba(30, 127, 255, 0.55);
}
.result .line-label {
	margin: 12px 0 6px;
	font-size: 0.78em;
	opacity: 0.85;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.link-row {
	display: flex;
	gap: 10px;
	margin: 14px 0 10px;
	padding: 12px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 8px;
	flex-wrap: wrap;
}
.link-row a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
	word-break: break-all;
}
.link-row a:hover {
	color: #fff;
}

.foot-links {
	margin-top: 16px;
	text-align: center;
	font-size: 0.85em;
}
.foot-links a {
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
}
.foot-links a:hover {
	color: #fff;
}

.notfound-card {
	text-align: center;
}
.notfound-actions {
	margin-top: 18px;
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}
.back-link {
	display: inline-block;
	padding: 9px 18px;
	color: #fff;
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 6px;
	transition: background 0.3s;
}
.back-link:hover {
	background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 520px) {
	.create-card {
		padding: 24px 18px;
	}
	.create-page {
		padding: 16px 12px;
	}
}

/* ============ 许愿孔明灯 ============ */
/* 夜空灯笼层（fixed 全屏，pointer-events 默认穿透，只拦截灯笼本身） */
#wish-layer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 600;
}
/* 设置菜单打开时：隐藏灯笼并让其不拦截点击，避免遮挡菜单操作 */
#wish-layer.menu-open .lantern {
	visibility: hidden;
	pointer-events: none;
}

/* 右下角悬浮许愿按钮（圆形） */
.wish-btn {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 900;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-family: var(--font-ui);
	font-size: 0.72em;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.7);
	background: rgba(8, 8, 14, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 50%;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: color 0.3s, border-color 0.3s, background 0.3s, opacity 0.3s;
}
@media (min-width: 840px) {
	.wish-btn:hover {
		color: #fff;
		border-color: rgba(255, 190, 90, 0.75);
		background: rgba(26, 20, 10, 0.7);
	}
}
@media (max-width: 640px) {
	.wish-btn {
		right: 12px;
		bottom: 12px;
		width: 48px;
		height: 48px;
		font-size: 0.68em;
	}
}

/* 孔明灯：直接出现在天空中，永久轻盈漂浮，不消失（满员时新愿望顶替最旧的一盏） */
.lantern {
	position: absolute;
	left: 6%;
	top: 12%;
	width: 60px;
	opacity: 1;
	cursor: pointer;
	pointer-events: auto;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	transform-origin: 50% 100%;
	animation: lantern-in 1.2s ease-out, lantern-float var(--dur, 40s) ease-in-out infinite alternate;
	filter: drop-shadow(0 0 14px rgba(255, 170, 60, 0.35));
	transition: filter 0.3s;
}
@media (min-width: 840px) {
	.lantern:hover {
		filter: drop-shadow(0 0 22px rgba(255, 190, 90, 0.7));
	}
}
.lantern img {
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
	animation: lantern-sway var(--sway-dur, 3.6s) ease-in-out infinite alternate;
}
.lantern__tag {
	position: absolute;
	left: 50%;
	top: 100%;
	margin-top: 4px;
	transform: translateX(-50%);
	max-width: 140px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 2px 8px;
	font-family: var(--font-ui);
	font-size: 10px;
	letter-spacing: 0.04em;
	color: rgba(255, 220, 160, 0.9);
	background: rgba(0, 0, 0, 0.35);
	/* border: 1px solid rgba(255, 190, 90, 0.3);
	border-radius: 999px;
	text-shadow: 0 1px 3px #000; */
}

@keyframes lantern-in {
	from {
		opacity: 0;
	}
}
@keyframes lantern-float {
	from {
		transform: translate3d(0, 0, 0) scale(1);
	}
	to {
		transform: translate3d(var(--sway, 0px), -6vh, 0) scale(0.85);
	}
}
@keyframes lantern-sway {
	from {
		transform: rotate(-4deg) translateX(-5px);
	}
	to {
		transform: rotate(4deg) translateX(5px);
	}
}
/* 手机端：drop-shadow 滤镜逐帧重算、与粒子烟花抢帧，小屏直接去掉光晕；昵称标签同步收紧 */
@media (max-width: 840px) {
	.lantern {
		filter: none;
	}
	.lantern__tag {
		font-size: 9px;
		max-width: 96px;
		padding: 1px 6px;
	}
}

/* 许愿面板 */
.wish-panel,
.wish-detail {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1500;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
/* hidden 属性必须压制 display:flex，否则弹窗关不掉 */
.wish-panel[hidden],
.wish-detail[hidden] {
	display: none;
}
.wish-panel__card,
.wish-detail__card {
	width: 100%;
	max-width: 400px;
	padding: 24px 26px;
	background: rgba(10, 10, 16, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 12px;
	box-shadow: 0 0 60px rgba(255, 160, 60, 0.18);
}
.wish-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}
.wish-panel__title {
	margin: 0;
	font-size: 1.15em;
	color: #fff;
}
.wish-panel__close {
	width: 30px;
	height: 30px;
	font-family: var(--font-ui);
	font-size: 1em;
	line-height: 1;
	color: rgba(255, 255, 255, 0.6);
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 50%;
	cursor: pointer;
	transition: color 0.3s, border-color 0.3s;
}
.wish-panel__close:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.6);
}
.wish-panel__hint {
	margin: 14px 0 0;
	font-size: 0.72em;
	opacity: 0.55;
}

/* 愿望详情 */
.wish-detail__overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.45);
}
.wish-detail__card {
	position: relative;
}
.wish-detail__wish {
	margin: 4px 0 18px;
	font-size: 1.05em;
	line-height: 1.7;
	color: #fff;
	word-break: break-all;
}
.wish-detail__close {
	position: absolute;
	top: 14px;
	right: 14px;
}
.wish-detail__meta {
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 0.82em;
}
.wish-detail__line {
	display: flex;
	gap: 10px;
	margin-bottom: 6px;
}
.wish-detail__k {
	flex-shrink: 0;
	opacity: 0.55;
}

/* 操作反馈 toast */
.wish-toast {
	position: fixed;
	left: 50%;
	bottom: 84px;
	transform: translateX(-50%);
	z-index: 1600;
	max-width: calc(100vw - 32px);
	padding: 10px 20px;
	font-size: 0.85em;
	color: #fff;
	background: rgba(10, 10, 16, 0.82);
	border: 1px solid rgba(255, 190, 90, 0.4);
	border-radius: 999px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s;
	text-align: center;
}
.wish-toast.show {
	opacity: 1;
}

/* ============ 联系开发者弹窗（微信二维码） ============ */
.menu__contact-link {
	padding: 6px 16px;
	font-family: inherit;
	font-size: 0.86em;
	letter-spacing: inherit;
	color: rgba(255, 213, 150, 0.8);
	background: transparent;
	border: 1px solid rgba(255, 190, 90, 0.45);
	border-radius: 999px;
	cursor: pointer;
	transition: color 0.3s, border-color 0.3s;
}
@media (min-width: 840px) {
	.menu__contact-link:hover {
		color: #fff;
		border-color: #ffbe5a;
	}
}

.contact-modal {
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2500;
	visibility: hidden;
	transition: visibility 0.25s;
}
.contact-modal.active {
	visibility: visible;
}
.contact-modal__overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.6);
}
.contact-modal__card {
	position: relative;
	width: 100%;
	max-width: 340px;
	margin: 10px;
	padding: 24px 26px 26px;
	text-align: center;
	background: rgba(10, 10, 16, 0.95);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 12px;
	box-shadow: 0 0 60px rgba(120, 80, 255, 0.18);
}
.contact-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 30px;
	height: 30px;
	font-family: inherit;
	font-size: 1em;
	line-height: 1;
	color: rgba(255, 255, 255, 0.6);
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 50%;
	cursor: pointer;
	transition: color 0.3s, border-color 0.3s;
}
.contact-modal__close:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.6);
}
.contact-modal__title {
	margin: 0 0 4px;
	font-size: 1.2em;
	color: #fff;
}
.contact-modal__sub {
	margin: 0 0 16px;
	font-size: 0.82em;
	opacity: 0.7;
}
.contact-modal__img {
	display: block;
	width: 100%;
	max-width: 250px;
	margin: 0 auto;
	border-radius: 8px;
	background: #fff;
}

.menu__about-link {
	padding: 4px 12px;
	font-family: inherit;
	font-size: 0.72em;
	letter-spacing: inherit;
	color: rgba(255, 255, 255, 0.35);
	background: transparent;
	border: 1px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	transition: color 0.3s, border-color 0.3s;
}
.menu__about-link:hover {
	color: rgba(255, 255, 255, 0.6);
	border-color: rgba(255, 255, 255, 0.18);
}

.about-info {
	margin-top: 6px;
	text-align: left;
}
.about-info p {
	margin: 10px 0;
	font-size: 0.85em;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
}
.about-info__link {
	color: rgba(255, 213, 150, 0.9);
	text-decoration: none;
}
.about-info__link:hover {
	text-decoration: underline;
}

/* ============ 管理后台（手机端） ============ */
.admin-card {
	max-width: 580px;
	padding: 26px 22px 30px;
}
.admin-field .btn-submit {
	margin-top: 0;
}
.admin-msg {
	display: none;
	margin: 12px 0;
	padding: 10px 12px;
	font-size: 0.85em;
	border-radius: 6px;
}
.admin-msg.show {
	display: block;
}
.admin-msg.err {
	color: #ff9a9a;
	border: 1px solid rgba(255, 120, 120, 0.4);
	background: rgba(255, 80, 80, 0.08);
}
.admin-msg.ok {
	color: #9fff9a;
	border: 1px solid rgba(126, 255, 122, 0.35);
	background: rgba(126, 255, 122, 0.06);
}
.admin-tabs {
	display: flex;
	gap: 8px;
	margin: 18px 0 14px;
}
.admin-tab {
	flex: 1;
	padding: 9px 0;
	font-family: inherit;
	font-size: 0.92em;
	letter-spacing: inherit;
	color: rgba(255, 255, 255, 0.6);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 6px;
	cursor: pointer;
	transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.admin-tab.is-active {
	color: #fff;
	border-color: #e60aff;
	background: rgba(230, 10, 255, 0.18);
}
.admin-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.admin-item {
	padding: 12px 14px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.03);
}
.admin-item__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.98em;
	color: #fff;
	word-break: break-all;
}
.admin-item__badge {
	flex-shrink: 0;
	padding: 1px 8px;
	font-size: 0.7em;
	border-radius: 999px;
}
.admin-item__badge.on {
	color: #9fff9a;
	border: 1px solid rgba(126, 255, 122, 0.5);
}
.admin-item__badge.off {
	color: #ff9a9a;
	border: 1px solid rgba(255, 120, 120, 0.5);
}
.admin-item__meta {
	margin-top: 4px;
	font-size: 0.76em;
	opacity: 0.6;
	word-break: break-all;
}
.admin-item__wish {
	margin-top: 4px;
	font-size: 0.92em;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
	word-break: break-all;
}
.admin-item__actions {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	flex-wrap: wrap;
}
.admin-btn {
	padding: 5px 14px;
	font-family: inherit;
	font-size: 0.8em;
	letter-spacing: inherit;
	color: #fff;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 6px;
	cursor: pointer;
	transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.admin-btn:hover {
	background: rgba(255, 255, 255, 0.08);
}
.admin-btn.danger {
	color: #ff9a9a;
	border-color: rgba(255, 120, 120, 0.55);
}
.admin-btn.ok {
	color: #9fff9a;
	border-color: rgba(126, 255, 122, 0.5);
}
.admin-btn.link {
	text-decoration: none;
	color: rgba(140, 190, 255, 0.9);
	border-color: rgba(30, 127, 255, 0.6);
}
.admin-empty {
	padding: 40px 0;
	text-align: center;
	font-size: 0.85em;
	opacity: 0.5;
}