/* xnx_block_user 首页会员区块样式
   仅布局与交互必需规则；圆角/颜色/阴影/边框等视觉参数全部继承全局 x-card 与
   Bootstrap CSS 变量（var(--bs-*)），dark 模式自动跟随系统 */

/* ===== Tab 头（Bootstrap nav-pills 原生样式，仅收紧内边距） ===== */
.xbu-tabs { margin-bottom: 0.5rem; }
.xbu-tabs .nav-link { padding: 0.15rem 0.6rem; border-radius: 3px; }
@media screen and (max-width: 768px) {
	.xbu-tabs .nav-link { padding: 0.15rem 0.4rem; }
}

/* ===== 会员横向走马灯（滚动视口 + 右侧固定上墙占位卡） ===== */
.xbu-members { display: flex; gap: 0.5rem; align-items: flex-start; }
.xbu-members-viewport {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	padding-bottom: 0.25rem;
	scrollbar-width: none;
}
.xbu-members-viewport::-webkit-scrollbar { display: none; }
.xbu-members-viewport.xbu-members-marquee { overflow: hidden; }
.xbu-members-viewport.xbu-members-marquee:hover .xbu-members-track { animation-play-state: paused; }
.xbu-members-track {
	display: flex;
	gap: 0.5rem;
	width: max-content;
	animation: xbu-marquee 30s linear infinite;
}
@keyframes xbu-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.xbu-members-track { animation: none; }
}
.xbu-member-card {
	flex: 0 0 auto;
	width: 96px;
	padding: 0.6rem 0.35rem 0;
	text-align: center;
	color: inherit;
	text-decoration: none;
	border-radius: var(--bs-border-radius);
	transition: background-color .15s, transform .15s;
}
.xbu-member-card:hover { background: var(--bs-tertiary-bg); transform: translateY(-2px); text-decoration: none; }
.xbu-members-marquee .xbu-member-card:hover { transform: none; }
.xbu-member-avatar { display: flex; justify-content: center; }
.xbu-member-name { margin-top: 0.35rem; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xbu-member-meta { margin-top: 2px; font-size: .75em; color: var(--bs-secondary-color); white-space: nowrap; }
/* 推荐会员剩余天数角标 */
.xbu-member-badge {
	display: inline-block;
	margin-top: 2px;
	font-size: .7em;
	line-height: 1.4;
	padding: 0 0.4em;
	border-radius: 999px;
	background: var(--bs-tertiary-bg);
	color: var(--bs-secondary-color);
}

/* ===== 上墙占位卡（固定在滚动视口右侧，不进走马灯循环） ===== */
.xbu-member-add {
	border: 1px dashed var(--bs-border-color);
	color: var(--bs-secondary-color);
	cursor: pointer;
}
.xbu-member-add:hover { color: var(--bs-primary); border-color: var(--bs-primary); background: transparent; }
.xbu-member-add-icon { font-size: 1.6rem; line-height: 40px; }

/* ===== 空态与加载占位 ===== */
.xbu-empty { padding: 1.25rem 0.5rem; text-align: center; color: var(--bs-secondary-color); }
.xbu-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	min-height: 60px;
	color: var(--bs-secondary-color);
}