/**
 * 公益寻亲插件 - 主页面样式（PC端）
 * nm_xunren
 *
 * 设计语言：温暖人文杂志风（Editorial Humanitarian）
 * - 衬线字体作为视觉锚点，传递庄重与温度
 * - 暖红色调主色，配合米色纸质背景
 * - 克制留白、富有节奏的排版层级
 * - 严禁蓝紫渐变配色，严禁 emoji
 */

/* ========== 设计令牌（CSS 变量） ========== */
:root {
	/* 主色系 - 暖红公益色 */
	--nm-xr-accent: #C8392B;
	--nm-xr-accent-dark: #9E2A1F;
	--nm-xr-accent-light: #E85D4A;
	--nm-xr-accent-50: #FBF1EE;
	--nm-xr-accent-100: #F6DFD8;
	--nm-xr-accent-200: #EFBFB4;
	--nm-xr-accent-300: #E59A8A;

	/* 背景与表面 */
	--nm-xr-warm-bg: #FAF6F0;
	--nm-xr-surface: #FFFFFF;
	--nm-xr-surface-alt: #F5EFE6;
	--nm-xr-surface-deep: #EDE4D3;
	--nm-xr-border: #E5D5C0;
	--nm-xr-border-light: #F0E5D4;
	--nm-xr-border-strong: #C9B391;

	/* 文字色 */
	--nm-xr-text: #1F1611;
	--nm-xr-text-secondary: #5C4A3D;
	--nm-xr-text-muted: #9C8A78;
	--nm-xr-text-inverse: #FFFFFF;
	--nm-xr-text-cream: #F5EFE6;

	/* 性别色 - 朴实自然 */
	--nm-xr-male: #3D6B8C;
	--nm-xr-female: #B83A6E;

	/* 圆角 */
	--nm-xr-radius-sm: 4px;
	--nm-xr-radius: 8px;
	--nm-xr-radius-lg: 14px;
	--nm-xr-radius-pill: 999px;

	/* 阴影 - 层次分明、不浮夸 */
	--nm-xr-shadow-xs: 0 1px 0 rgba(80, 50, 30, 0.04);
	--nm-xr-shadow-sm: 0 1px 3px rgba(80, 50, 30, 0.06), 0 1px 2px rgba(80, 50, 30, 0.04);
	--nm-xr-shadow: 0 4px 12px rgba(80, 50, 30, 0.07), 0 1px 3px rgba(80, 50, 30, 0.04);
	--nm-xr-shadow-md: 0 8px 24px rgba(80, 50, 30, 0.10), 0 2px 6px rgba(80, 50, 30, 0.05);
	--nm-xr-shadow-lg: 0 20px 48px rgba(80, 50, 30, 0.14), 0 4px 12px rgba(80, 50, 30, 0.06);

	/* 字体 */
	--nm-xr-font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", "Times New Roman", serif;
	--nm-xr-font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
	--nm-xr-font-mono: "SF Mono", "Menlo", "Consolas", monospace;

	--nm-xr-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--nm-xr-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
	--nm-xr-transition-slow: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ========== 关键帧动画 ========== */
@keyframes nmXrFadeInUp {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes nmXrFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes nmXrPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(200, 57, 43, 0.55); }
	50% { box-shadow: 0 0 0 8px rgba(200, 57, 43, 0); }
}
@keyframes nmXrHeartbeat {
	0%, 100% { transform: scale(1); }
	15% { transform: scale(1.12); }
	30% { transform: scale(1); }
	45% { transform: scale(1.08); }
	60% { transform: scale(1); }
}
@keyframes nmXrUnderline {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}
@keyframes nmXrDrift {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(20px, -12px); }
}

/* ========== 页面容器 ========== */
.nm-xr-page {
	margin: 0 auto;
	padding: 32px 24px 48px;
	max-width: 1360px;
	box-sizing: border-box;
	color: var(--nm-xr-text);
	font-size: 14px;
	line-height: 1.65;
	font-family: var(--nm-xr-font-sans);
}
.nm-xr-page *,
.nm-xr-page *::before,
.nm-xr-page *::after { box-sizing: border-box; }
.nm-xr-page a:hover { text-decoration: none !important; }

/* ========== 顶部报头横幅 ========== */
.nm-xr-header {
	position: relative;
	overflow: hidden;
	border-radius: var(--nm-xr-radius-lg);
	padding: 36px 40px 32px;
	margin-bottom: 24px;
	background:
		radial-gradient(ellipse at 85% 20%, rgba(255, 220, 180, 0.16) 0%, transparent 55%),
		radial-gradient(ellipse at 15% 90%, rgba(255, 180, 140, 0.12) 0%, transparent 50%),
		linear-gradient(135deg, #C8392B 0%, #9E2A1F 60%, #7A1F15 100%);
	color: var(--nm-xr-text-inverse);
	box-shadow: var(--nm-xr-shadow-md);
}
/* 装饰光斑 */
.nm-xr-header::before {
	content: '';
	position: absolute;
	top: -30%;
	right: -6%;
	width: 360px;
	height: 360px;
	background: radial-gradient(circle, rgba(255, 230, 200, 0.14) 0%, transparent 65%);
	border-radius: 50%;
	pointer-events: none;
	animation: nmXrDrift 14s ease-in-out infinite;
}
.nm-xr-header::after {
	content: '';
	position: absolute;
	bottom: -50%;
	left: 25%;
	width: 240px;
	height: 240px;
	background: radial-gradient(circle, rgba(255, 200, 150, 0.10) 0%, transparent 65%);
	border-radius: 50%;
	pointer-events: none;
	animation: nmXrDrift 18s ease-in-out infinite reverse;
}

.nm-xr-header-inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}
.nm-xr-header-main { flex: 1; min-width: 260px; }

/* 报头标识：小标签 + 标题 */
.nm-xr-header-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: rgba(255, 230, 210, 0.85);
	margin-bottom: 14px;
	padding: 4px 12px 4px 0;
	border-bottom: 1px solid rgba(255, 220, 200, 0.35);
}
.nm-xr-header-eyebrow::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #FFD4B8;
	box-shadow: 0 0 8px rgba(255, 212, 184, 0.8);
}
.nm-xr-header-title {
	margin: 0 0 10px;
	font-size: 36px;
	font-weight: 700;
	letter-spacing: -0.5px;
	line-height: 1.15;
	font-family: var(--nm-xr-font-serif);
	display: flex;
	align-items: center;
	gap: 16px;
}
.nm-xr-header-title-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.22);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	animation: nmXrHeartbeat 2.4s ease-in-out infinite;
}
.nm-xr-header-title-icon svg { width: 22px; height: 22px; fill: #fff; }
.nm-xr-header-slogan {
	margin: 0;
	font-size: 15px;
	opacity: 0.88;
	letter-spacing: 0.5px;
	line-height: 1.6;
	font-family: var(--nm-xr-font-serif);
	font-style: italic;
}
.nm-xr-header-stats {
	display: flex;
	gap: 0;
	flex-shrink: 0;
	flex-wrap: wrap;
	align-items: stretch;
}
.nm-xr-stat {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 6px 24px;
	border-left: 1px solid rgba(255, 220, 200, 0.25);
}
.nm-xr-stat:first-child { border-left: none; padding-left: 0; }
.nm-xr-stat-value {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.5px;
	font-family: var(--nm-xr-font-serif);
	font-feature-settings: "tnum";
}
.nm-xr-stat-label {
	font-size: 11px;
	opacity: 0.75;
	margin-top: 4px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}
.nm-xr-header-source {
	position: relative;
	z-index: 1;
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 220, 200, 0.18);
	font-size: 12px;
	opacity: 0.78;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	letter-spacing: 0.3px;
}
.nm-xr-header-source svg { width: 14px; height: 14px; fill: currentColor; opacity: 0.85; }

/* ========== 筛选搜索区域 ========== */
.nm-xr-filter {
	background: var(--nm-xr-surface);
	border: 1px solid var(--nm-xr-border);
	border-radius: var(--nm-xr-radius-lg);
	padding: 20px 24px;
	margin-bottom: 28px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	box-shadow: var(--nm-xr-shadow-sm);
	position: relative;
}
.nm-xr-filter::before {
	content: '';
	position: absolute;
	left: 24px;
	top: -1px;
	width: 48px;
	height: 3px;
	background: var(--nm-xr-accent);
	border-radius: 0 0 3px 3px;
}
.nm-xr-filter-group {
	display: flex;
	align-items: center;
	gap: 10px;
}
.nm-xr-filter-group > label {
	font-size: 11px;
	font-weight: 600;
	color: var(--nm-xr-text-muted);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	white-space: nowrap;
}
.nm-xr-filter-search { flex: 1; min-width: 260px; }

.nm-xr-select,
.nm-xr-input {
	height: 40px;
	padding: 0 14px;
	border: 1px solid var(--nm-xr-border-strong);
	border-radius: var(--nm-xr-radius-sm);
	background: var(--nm-xr-surface) !important;
	color: var(--nm-xr-text) !important;
	font-size: 13px;
	font-family: inherit;
	transition: var(--nm-xr-transition-fast);
	outline: none;
}
.nm-xr-select {
	padding-right: 32px;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235C4A3D' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 10px;
	cursor: pointer;
}
.nm-xr-input { min-width: 0; }
.nm-xr-filter-search .nm-xr-input { flex: 1; }
.nm-xr-year { width: 96px; }
.nm-xr-year-sep {
	color: var(--nm-xr-text-muted);
	font-size: 13px;
	font-family: var(--nm-xr-font-serif);
	font-style: italic;
}
.nm-xr-select:hover,
.nm-xr-input:hover { border-color: var(--nm-xr-accent-300); background: var(--nm-xr-surface-alt); }
.nm-xr-select:focus,
.nm-xr-input:focus {
	border-color: var(--nm-xr-accent);
	box-shadow: 0 0 0 3px rgba(200, 57, 43, 0.12);
	background: var(--nm-xr-surface);
}

/* ========== 按钮 ========== */
.nm-xr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	height: 40px;
	padding: 0 22px;
	border: 1px solid var(--nm-xr-border-strong);
	border-radius: var(--nm-xr-radius-sm);
	background: var(--nm-xr-surface);
	color: var(--nm-xr-text-secondary);
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	line-height: 1;
	cursor: pointer;
	transition: var(--nm-xr-transition-fast);
	white-space: nowrap;
	letter-spacing: 0.3px;
}
.nm-xr-btn:hover {
	border-color: var(--nm-xr-accent);
	color: var(--nm-xr-accent);
	transform: translateY(-1px);
	box-shadow: var(--nm-xr-shadow-sm);
}
.nm-xr-btn-primary {
	background: var(--nm-xr-accent);
	border-color: var(--nm-xr-accent);
	color: #fff;
}
.nm-xr-btn-primary:hover {
	background: var(--nm-xr-accent-dark);
	border-color: var(--nm-xr-accent-dark);
	color: #fff;
	box-shadow: 0 4px 12px rgba(200, 57, 43, 0.28);
}
.nm-xr-btn-ghost {
	background: transparent;
	border-color: var(--nm-xr-border);
	color: var(--nm-xr-text-muted);
}
.nm-xr-btn-ghost:hover {
	border-color: var(--nm-xr-accent-300);
	color: var(--nm-xr-accent);
	background: var(--nm-xr-accent-50);
}
.nm-xr-btn svg { width: 15px; height: 15px; fill: currentColor; }

/* ========== 卡片网格 ========== */
.nm-xr-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 22px;
	margin-bottom: 32px;
}
.nm-xr-grid.is-loading { opacity: 0.55; pointer-events: none; transition: opacity 0.2s; }
.nm-xr-grid.is-fading { animation: nmXrFadeIn 0.35s ease; }

/* ========== 单张卡片 - 杂志式排版 ========== */
.nm-xr-card {
	display: flex;
	flex-direction: column;
	background: var(--nm-xr-surface);
	border: 1px solid var(--nm-xr-border-light);
	border-radius: var(--nm-xr-radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	box-shadow: var(--nm-xr-shadow-xs);
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.3s ease;
	position: relative;
	opacity: 0;
	animation: nmXrFadeInUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.nm-xr-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--nm-xr-shadow-lg);
	border-color: var(--nm-xr-accent-200);
}
.nm-xr-card:nth-child(1) { animation-delay: 0.03s; }
.nm-xr-card:nth-child(2) { animation-delay: 0.08s; }
.nm-xr-card:nth-child(3) { animation-delay: 0.13s; }
.nm-xr-card:nth-child(4) { animation-delay: 0.18s; }
.nm-xr-card:nth-child(5) { animation-delay: 0.23s; }
.nm-xr-card:nth-child(6) { animation-delay: 0.28s; }
.nm-xr-card:nth-child(7) { animation-delay: 0.33s; }
.nm-xr-card:nth-child(8) { animation-delay: 0.38s; }
.nm-xr-card:nth-child(n+9) { animation-delay: 0.42s; }

/* 卡片照片区 */
.nm-xr-card-photo {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 4;
	background: var(--nm-xr-surface-alt);
	overflow: hidden;
}
.nm-xr-card-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
	background: var(--nm-xr-surface-alt);
	filter: saturate(0.92);
}
.nm-xr-card:hover .nm-xr-card-img { transform: scale(1.06); filter: saturate(1.05); }
.nm-xr-card-img.is-loading { opacity: 0; }
.nm-xr-card-img.is-loaded { opacity: 1; animation: nmXrFadeIn 0.4s ease; }
/* 底部渐变蒙层，强化文字可读性 */
.nm-xr-card-photo::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 45%;
	background: linear-gradient(to top, rgba(31, 22, 17, 0.55) 0%, rgba(31, 22, 17, 0.15) 50%, transparent 100%);
	pointer-events: none;
}
/* ========== 状态标签 ========== */
.nm-xr-status {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px 5px 9px;
	border-radius: var(--nm-xr-radius-pill);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.8px;
	line-height: 1;
	white-space: nowrap;
	border: 1px solid transparent;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.nm-xr-status::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}
.nm-xr-status-searching {
	background: rgba(200, 57, 43, 0.92);
	color: #fff;
	animation: nmXrPulse 2.2s ease-in-out infinite;
}
.nm-xr-status-found {
	background: rgba(45, 110, 70, 0.92);
	color: #fff;
}

/* ========== 卡片正文 ========== */
.nm-xr-card-body {
	padding: 18px 20px 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
	position: relative;
}
/* 正文左上角的衬线装饰角标 */
.nm-xr-card-body::before {
	content: '';
	position: absolute;
	top: 13px;
	left: 0;
	width: 3px;
	height: 24px;
	background: var(--nm-xr-accent);
	border-radius: 0 2px 2px 0;
	opacity: 0;
	transition: opacity 0.3s ease, height 0.3s ease;
}
.nm-xr-card:hover .nm-xr-card-body::before { opacity: 1; height: 36px; }

.nm-xr-card-name {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	color: var(--nm-xr-text);
	line-height: 1.3;
	font-family: var(--nm-xr-font-serif);
	display: flex;
	align-items: center;
	gap: 10px;
	transition: var(--nm-xr-transition-fast);
	letter-spacing: -0.2px;
}
.nm-xr-card:hover .nm-xr-card-name { color: var(--nm-xr-accent); }

.nm-xr-card-gender {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	border-radius: var(--nm-xr-radius-pill);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.5px;
}
.nm-xr-gender-male {
	background: rgba(61, 107, 140, 0.10);
	color: var(--nm-xr-male);
}
.nm-xr-gender-female {
	background: rgba(184, 58, 110, 0.10);
	color: var(--nm-xr-female);
}
.nm-xr-gender-unknown {
	background: var(--nm-xr-surface-alt);
	color: var(--nm-xr-text-muted);
}

.nm-xr-card-meta {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}
.nm-xr-meta-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 12.5px;
	line-height: 1.55;
}
.nm-xr-meta-label {
	flex-shrink: 0;
	color: var(--nm-xr-text-muted);
	min-width: 56px;
	font-weight: 500;
	letter-spacing: 0.3px;
}
.nm-xr-meta-label::after { content: '：'; }
.nm-xr-meta-value {
	flex: 1;
	color: var(--nm-xr-text-secondary);
	word-break: break-all;
}
.nm-xr-meta-value.is-empty {
	color: var(--nm-xr-text-muted);
	opacity: 0.55;
	font-style: italic;
}

.nm-xr-card-source {
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px dashed var(--nm-xr-border-light);
	font-size: 11px;
	color: var(--nm-xr-text-muted);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	letter-spacing: 0.3px;
}
.nm-xr-card-source-text { display: inline-flex; align-items: center; gap: 5px; }
.nm-xr-card-source-text::before {
	content: '';
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--nm-xr-border-strong);
}
.nm-xr-card-detail {
	color: var(--nm-xr-accent);
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: var(--nm-xr-transition-fast);
	letter-spacing: 0.3px;
}
.nm-xr-card:hover .nm-xr-card-detail { gap: 7px; }
.nm-xr-card-detail svg { width: 11px; height: 11px; fill: currentColor; }

/* ========== 底部区域 ========== */
.nm-xr-footer {
	margin-top: 40px;
	padding: 36px 32px 32px;
	background:
		radial-gradient(ellipse at 50% 0%, var(--nm-xr-accent-50) 0%, transparent 60%),
		var(--nm-xr-surface);
	border: 1px solid var(--nm-xr-border);
	border-radius: var(--nm-xr-radius-lg);
	text-align: center;
	box-shadow: var(--nm-xr-shadow-sm);
	position: relative;
	overflow: hidden;
}
.nm-xr-footer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 64px;
	height: 3px;
	background: var(--nm-xr-accent);
	border-radius: 0 0 3px 3px;
}
.nm-xr-footer-appeal {
	position: relative;
	font-size: 20px;
	font-weight: 700;
	color: var(--nm-xr-accent-dark);
	margin-bottom: 18px;
	padding: 0 36px;
	letter-spacing: 1px;
	font-family: var(--nm-xr-font-serif);
	line-height: 1.4;
}
.nm-xr-footer-appeal::before,
.nm-xr-footer-appeal::after {
	content: '';
	position: absolute;
	top: 14px;
	width: 28px;
	height: 1px;
	background: var(--nm-xr-accent-200);
}
.nm-xr-footer-appeal::before { left: 0; }
.nm-xr-footer-appeal::after { right: 0; }
.nm-xr-footer-actions {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}
.nm-xr-footer-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 24px;
	border-radius: var(--nm-xr-radius-pill);
	background: var(--nm-xr-accent);
	border: 1px solid var(--nm-xr-accent);
	color: #fff !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: var(--nm-xr-transition-fast);
	letter-spacing: 0.3px;
	box-shadow: 0 3px 10px rgba(200, 57, 43, 0.25);
}
.nm-xr-footer-link:hover {
	background: var(--nm-xr-accent-dark);
	border-color: var(--nm-xr-accent-dark);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(200, 57, 43, 0.35);
}
.nm-xr-footer-link svg { width: 14px; height: 14px; fill: currentColor; }
.nm-xr-footer-copyright {
	padding-top: 16px;
	border-top: 1px dashed var(--nm-xr-border-light);
	font-size: 12px;
	color: var(--nm-xr-text-muted);
	line-height: 1.8;
	letter-spacing: 0.3px;
}
.nm-xr-footer-source {
	margin-top: 6px;
	font-size: 11px;
	color: var(--nm-xr-text-muted);
	opacity: 0.7;
	font-style: italic;
	letter-spacing: 0.3px;
}

/* 顶部加载指示条 */
.nm-xr-loading-bar {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 9998;
	overflow: hidden;
	background: var(--nm-xr-accent-100);
}
.nm-xr-loading-bar.is-active { display: block; }
.nm-xr-loading-bar::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 40%;
	background: linear-gradient(90deg, var(--nm-xr-accent), var(--nm-xr-accent-light));
	border-radius: 0 3px 3px 0;
	animation: nmXrLoadingMove 1.1s ease-in-out infinite;
}
@keyframes nmXrLoadingMove {
	0% { left: -40%; }
	100% { left: 100%; }
}

/* ========== 空状态 ========== */
.nm-xr-empty {
	text-align: center;
	padding: 72px 24px;
	background: var(--nm-xr-surface);
	border: 1px dashed var(--nm-xr-border-strong);
	border-radius: var(--nm-xr-radius-lg);
	position: relative;
}
.nm-xr-empty::before {
	content: '';
	position: absolute;
	top: 24px;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 1px;
	background: var(--nm-xr-border-strong);
}
.nm-xr-empty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	margin-bottom: 20px;
	border-radius: 50%;
	background: var(--nm-xr-accent-50);
	border: 1px solid var(--nm-xr-accent-100);
}
.nm-xr-empty-icon svg { width: 38px; height: 38px; fill: var(--nm-xr-accent-300); }
.nm-xr-empty-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--nm-xr-text-secondary);
	margin-bottom: 8px;
	font-family: var(--nm-xr-font-serif);
	letter-spacing: 0.5px;
}
.nm-xr-empty-desc {
	font-size: 13px;
	color: var(--nm-xr-text-muted);
	max-width: 380px;
	margin: 0 auto;
	line-height: 1.75;
}

/* ========== 错误提示 ========== */
.nm-xr-error {
	text-align: center;
	padding: 48px 24px;
	background: var(--nm-xr-accent-50);
	border: 1px solid var(--nm-xr-accent-100);
	border-radius: var(--nm-xr-radius-lg);
	color: var(--nm-xr-accent-dark);
}
.nm-xr-error-icon { margin-bottom: 12px; }
.nm-xr-error-icon svg { width: 38px; height: 38px; fill: var(--nm-xr-accent); }
.nm-xr-error-text {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 14px;
	font-family: var(--nm-xr-font-serif);
	letter-spacing: 0.3px;
}
.nm-xr-error-retry {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 20px;
	border-radius: var(--nm-xr-radius-pill);
	background: var(--nm-xr-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	border: none;
	cursor: pointer;
	transition: var(--nm-xr-transition-fast);
	letter-spacing: 0.3px;
}
.nm-xr-error-retry:hover {
	background: var(--nm-xr-accent-dark);
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(200, 57, 43, 0.3);
}

/* ========== 工具类 ========== */
.nm-xr-hidden { display: none !important; }

/* ========== 筛选折叠按钮（移动端由 JS 注入） ========== */
.nm-xr-filter-toggle {
	display: none;
}

/* ========== 响应式断点 ========== */
/* 1200px+：4 列 */
@media (min-width: 1200px) {
	.nm-xr-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* 992px - 1200px：3 列 */
@media (max-width: 1199px) and (min-width: 992px) {
	.nm-xr-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.nm-xr-header { padding: 32px 32px 28px; }
	.nm-xr-header-title { font-size: 30px; }
	.nm-xr-header-stats { gap: 0; }
	.nm-xr-stat { padding: 4px 18px; }
}

/* 768px - 992px：2 列 */
@media (max-width: 991px) and (min-width: 768px) {
	.nm-xr-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.nm-xr-header { padding: 28px 26px 24px; }
	.nm-xr-header-title { font-size: 26px; }
	.nm-xr-header-stats { gap: 0; }
	.nm-xr-stat { padding: 4px 16px; }
	.nm-xr-stat-value { font-size: 24px; }
}

/* <768px：由 mobile.css 接管 */
@media (max-width: 767px) {
	.nm-xr-page { padding: 14px 12px 28px; }
	.nm-xr-header { padding: 22px 18px 20px; border-radius: var(--nm-xr-radius); }
	.nm-xr-header-title { font-size: 22px; }
	.nm-xr-header-stats { gap: 0; width: 100%; }
	.nm-xr-stat { padding: 4px 14px; }
	.nm-xr-stat-value { font-size: 20px; }
}

/* ============ 翻页组件（纯 JS 渲染，完全脱离 Discuz .pg 体系） ============ */
.nm-xr-pagination{
	all: initial;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
	padding: 20px 0 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	font-family: inherit !important;
}
.nm-xr-pagination *{
	all: unset;
	box-sizing: border-box !important;
	font-family: inherit !important;
}
.nm-xr-pagination a,
.nm-xr-pagination span{
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 38px !important;
	height: 38px !important;
	padding: 0 12px !important;
	border: 1px solid var(--nm-xr-border, #E5D5C0) !important;
	border-radius: var(--nm-xr-radius-sm, 4px) !important;
	font-size: 13px !important;
	line-height: 1 !important;
	color: var(--nm-xr-text-secondary, #5C4A3D) !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: all .2s ease;
	background: var(--nm-xr-surface, #fff) !important;
	font-weight: 500 !important;
	white-space: nowrap !important;
}
.nm-xr-pagination a:hover{
	border-color: var(--nm-xr-accent, #C8392B) !important;
	color: var(--nm-xr-accent, #C8392B) !important;
	background: var(--nm-xr-surface, #fff) !important;
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(200, 57, 43, 0.12);
}
.nm-xr-pagination .nm-xr-page-current{
	background: var(--nm-xr-accent, #C8392B) !important;
	border-color: var(--nm-xr-accent, #C8392B) !important;
	color: #fff !important;
	font-weight: 700 !important;
	cursor: default;
	box-shadow: 0 2px 8px rgba(200, 57, 43, 0.28);
}
.nm-xr-pagination .nm-xr-page-disabled{
	color: #C9B391 !important;
	cursor: default;
	background: var(--nm-xr-surface-alt, #F5EFE6) !important;
	border-color: var(--nm-xr-border-light, #F0E5D4) !important;
}
.nm-xr-pagination .nm-xr-page-disabled:hover{
	transform: none !important;
	box-shadow: none !important;
	border-color: var(--nm-xr-border-light, #F0E5D4) !important;
	color: #C9B391 !important;
	background: var(--nm-xr-surface-alt, #F5EFE6) !important;
}
.nm-xr-pagination .nm-xr-page-ellipsis{
	border: none !important;
	background: transparent !important;
	cursor: default;
	min-width: auto !important;
	padding: 0 6px !important;
	color: var(--nm-xr-text-muted, #9C8A78) !important;
}
.nm-xr-pagination .nm-xr-page-ellipsis:hover{
	transform: none !important;
	box-shadow: none !important;
	border: none !important;
	background: transparent !important;
	color: var(--nm-xr-text-muted, #9C8A78) !important;
}
.nm-xr-pagination .nm-xr-page-prev,
.nm-xr-pagination .nm-xr-page-next{
	padding: 0 16px !important;
	font-weight: 600 !important;
}
.nm-xr-pagination .nm-xr-pagination-info{
	border: none !important;
	background: transparent !important;
	color: var(--nm-xr-text-muted, #9C8A78) !important;
	font-size: 12px !important;
	cursor: default;
	margin-left: 12px !important;
	min-width: auto !important;
	height: auto !important;
	padding: 0 6px !important;
	letter-spacing: 0.3px !important;
}
.nm-xr-pagination .nm-xr-pagination-info:hover{
	transform: none !important;
	box-shadow: none !important;
	border: none !important;
	background: transparent !important;
	color: var(--nm-xr-text-muted, #9C8A78) !important;
}
/* 响应式：移动端翻页适配 */
@media (max-width: 767px){
	.nm-xr-pagination{
		gap: 4px !important;
		padding: 14px 0 !important;
	}
	.nm-xr-pagination a,
	.nm-xr-pagination span{
		min-width: 34px !important;
		height: 34px !important;
		font-size: 12px !important;
		padding: 0 10px !important;
	}
	.nm-xr-pagination .nm-xr-page-prev,
	.nm-xr-pagination .nm-xr-page-next{
		padding: 0 12px !important;
	}
	.nm-xr-pagination .nm-xr-pagination-info{
		width: 100% !important;
		margin: 6px 0 0 !important;
		text-align: center !important;
	}
}