/* ============================================================================
 * 通用 Loading —— 全屏遮罩 + 按钮内联转圈
 * ----------------------------------------------------------------------------
 * 与 loading.js 配套，由 admin.html / login.html / settings.html 共同引入。
 * 用法（JS 侧）：见 loading.js 顶部注释。
 *
 * 设计要点：
 *   · 视觉与全局设计变量（--rose / --slate-*）保持一致；变量缺失时给了字面兜底，
 *     因此 login.css / settings.css 若未定义同名变量也不会掉色。
 *   · 默认隐藏（opacity + visibility），由 loading.js 加 .is-visible 显示，
 *     过渡动画自带，避免 JS 逐帧改样式。
 *   · .ym-loading-init 是**可选**的层级修正，给「先于 JS 显示」的静态首屏遮罩用，
 *     保证它盖住整页（纯 CSS，不依赖脚本）。本工具默认自建遮罩节点，不需要它。
 * ========================================================================= */

/* ---------- 全屏遮罩 ---------- */
.ym-loading {
	position: fixed;
	inset: 0;
	z-index: 9990;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .66);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	font-family: "PingFang SC", "Microsoft YaHei", "Inter", sans-serif;
	opacity: 0;
	visibility: hidden;
	/* 隐藏时不拦截点击，显示的 .is-visible 才接管指针事件 */
	pointer-events: none;
	transition: opacity .18s ease, visibility .18s ease;
}

.ym-loading.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	/* 遮罩期间禁掉触摸滚动，避免手指拖动穿透到底层页面 */
	touch-action: none;
}

/* 可选的层级修正：给页面里「先于 JS 显示」的静态首屏遮罩加上这个类，
 * 让它盖住整页。例如：<div id="InitLoading" class="ym-loading ym-loading-init is-visible">…</div>
 * —— 加了之后 loading.js 会自动接管该节点并复用。不加也不影响工具使用。 */
.ym-loading.ym-loading-init {
	z-index: 9999;
}

/* ---------- 居中卡片 ---------- */
.ym-loading-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	min-width: 136px;
	max-width: 268px;
	padding: 22px 26px;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--slate-200, #E2E8F0);
	border-radius: 14px;
	box-shadow: 0 12px 34px -10px rgba(15, 23, 42, .22), 0 2px 8px rgba(15, 23, 42, .06);
}

/* ---------- 圆环 ---------- */
.ym-loading-ring {
	width: 30px;
	height: 30px;
	box-sizing: border-box;
	border: 3px solid var(--rose-100, #FFE4E6);
	border-top-color: var(--rose, #E11D48);
	border-radius: 50%;
	animation: ym-loading-spin .72s linear infinite;
}

@keyframes ym-loading-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ---------- 文案 ---------- */
.ym-loading-text {
	font-size: 13px;
	line-height: 1.55;
	color: var(--slate-500, #64748B);
	text-align: center;
	word-break: break-word;
}

/* ---------- 按钮内联转圈 ----------
 * 用 currentColor 描边，因此白底按钮、玫红按钮都能自动适配，无需额外配色。 */
.ym-spinner {
	display: inline-block;
	width: 13px;
	height: 13px;
	box-sizing: border-box;
	margin-right: 6px;
	vertical-align: -1.5px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	opacity: .8;
	animation: ym-loading-spin .72s linear infinite;
}

/* ---------- 无障碍 / 降低动效 ---------- */
@media (prefers-reduced-motion: reduce) {
	.ym-loading {
		transition: none;
	}

	.ym-loading-ring,
	.ym-spinner {
		/* 保留转动但放慢，既表明"在忙"又不刺激前庭敏感用户 */
		animation-duration: 1.8s;
	}
}