/* SP Community —— 视频页(对齐交友墙风格,融子比白卡) */
.spv-wrap { --spv-accent: var(--theme-color, #1fc4a7); margin: 0 auto; }
.spv-wrap, .spv-wrap * { box-sizing: border-box; }

/* 分类筛选 */
.spv-filter {
	display: flex; flex-wrap: wrap; gap: 8px;
	padding: 14px; margin-bottom: 14px;
	background: var(--main-bg-color, #fff);
	border: 1px solid var(--main-border-color, rgba(50,50,50,.06));
	border-radius: var(--main-radius, 10px);
}
.spv-cat {
	padding: 6px 16px; border-radius: 999px; cursor: pointer;
	border: 1px solid var(--main-border-color, rgba(50,50,50,.12));
	background: var(--main-bg-color, #fff); color: var(--main-color, #444);
	font-size: 13px; transition: all .15s; -webkit-appearance: none; appearance: none;
}
.spv-cat.on { background: var(--spv-accent); color: #fff; border-color: var(--spv-accent); }

/* 网格 */
.spv-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px;
}
.spv-card {
	background: var(--main-bg-color, #fff);
	border: 1px solid var(--main-border-color, rgba(50,50,50,.06));
	border-radius: var(--main-radius, 10px);
	overflow: hidden; cursor: pointer; min-width: 0;
	transition: box-shadow .18s, transform .18s;
}
.spv-card:hover { box-shadow: 0 6px 22px var(--main-shadow, rgba(116,116,116,.12)); transform: translateY(-2px); }
.spv-card.hide { display: none; }

/* 封面 16:9 */
.spv-thumb {
	position: relative; width: 100%; aspect-ratio: 16/9;
	background-size: cover; background-position: center; background-color: #e9edf2;
	display: flex; align-items: center; justify-content: center;
}
.spv-noimg { font-size: 40px; opacity: .6; }
.spv-play {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
	width: 48px; height: 48px; border-radius: 50%;
	background: rgba(0,0,0,.5); color: #fff; font-size: 18px;
	display: flex; align-items: center; justify-content: center;
	padding-left: 3px; transition: background .15s, transform .15s;
}
.spv-card:hover .spv-play { background: var(--spv-accent); transform: translate(-50%,-50%) scale(1.08); }
.spv-dur {
	position: absolute; right: 8px; bottom: 8px;
	background: rgba(0,0,0,.7); color: #fff; font-size: 11px;
	padding: 2px 7px; border-radius: 5px;
}

/* 卡片整体是链接 */
a.spv-card { text-decoration: none; color: inherit; display: block; }
/* 列表页懒加载 iframe 只做封面(首帧),不拦点击 → 点击走卡片链接进文章页 */
.spv-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.spv-embed[data-loaded] .spv-noimg,
.spv-embed[data-loaded] .spv-play { display: none; }

.spv-info { padding: 10px 12px 12px; }
.spv-meta { display: flex; gap: 12px; margin-top: 8px; font-size: 12px; color: var(--muted-color, #999); }

/* 分类栏(主) */
.spv-catbar {
	display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px;
	padding-bottom: 12px; border-bottom: 1px solid var(--main-border-color, rgba(50,50,50,.08));
}
.spv-cat2 {
	padding: 8px 20px; border-radius: 10px; text-decoration: none; font-size: 14px; font-weight: 600;
	background: var(--muted-bg-color, #f2f3f5); color: var(--main-color, #444);
	transition: all .15s;
}
.spv-cat2:hover { color: var(--spv-accent); }
.spv-cat2.on { background: var(--spv-accent); color: #fff; }

/* 排序条 */
.spv-sortbar {
	display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
}
.spv-sort {
	padding: 6px 16px; border-radius: 999px; text-decoration: none; font-size: 13px;
	border: 1px solid var(--main-border-color, rgba(50,50,50,.12));
	background: var(--main-bg-color, #fff); color: var(--main-color, #444);
	transition: all .15s;
}
.spv-sort.on { background: var(--spv-accent); color: #fff; border-color: var(--spv-accent); }

/* 点击即时反馈:按下变暗 + 跳转中显示 loading 遮罩 */
a.spv-card { -webkit-tap-highlight-color: transparent; }
a.spv-card:active { transform: scale(.98); }
a.spv-card.spv-loading { opacity: .55; }
a.spv-card.spv-loading .spv-thumb::after {
	content: ""; position: absolute; left: 50%; top: 50%;
	width: 30px; height: 30px; margin: -15px 0 0 -15px;
	border: 3px solid rgba(255,255,255,.4); border-top-color: #fff;
	border-radius: 50%; animation: spv-spin .7s linear infinite; z-index: 5;
}
@keyframes spv-spin { to { transform: rotate(360deg); } }

/* 分页 */
.spv-pager { margin-top: 20px; text-align: center; }
.spv-pager .page-numbers {
	display: inline-block; min-width: 34px; padding: 6px 10px; margin: 0 3px;
	border-radius: 8px; border: 1px solid var(--main-border-color, rgba(50,50,50,.12));
	color: var(--main-color, #444); text-decoration: none; font-size: 13px;
}
.spv-pager .page-numbers.current { background: var(--spv-accent); color: #fff; border-color: var(--spv-accent); }
.spv-title {
	font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--key-color, #2f3338);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.spv-tag {
	display: inline-block; margin-top: 8px; font-size: 11px;
	padding: 2px 9px; border-radius: 999px;
	background: var(--muted-bg-color, #eafaf4); color: var(--spv-accent);
}
.spv-empty { padding: 40px 0; text-align: center; color: var(--muted-color, #999); }

/* lightbox */
.spv-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; }
.spv-modal-mask { position: absolute; inset: 0; background: rgba(0,0,0,.82); }
.spv-modal-box {
	position: relative; z-index: 1; width: min(92vw, 880px);
	background: #000; border-radius: 12px; overflow: hidden;
	box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.spv-close {
	position: absolute; right: 8px; top: 8px; z-index: 3;
	width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
	background: rgba(0,0,0,.55); color: #fff; font-size: 22px; line-height: 1;
	-webkit-appearance: none; appearance: none;
}
.spv-player { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; }
.spv-player iframe, .spv-player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.spv-modal-title { padding: 10px 14px; color: #fff; font-size: 14px; background: #111; }

@media (max-width: 480px) {
	.spv-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
	.spv-title { font-size: 13px; }
}

/* 首页预览块 */
.spv-preview .spv-prev-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.spv-prev-title { font-size:17px; font-weight:700; color:var(--key-color,#2f3338); }
.spv-prev-more { font-size:13px; color:var(--spv-accent); text-decoration:none; }
.spv-prev-more:hover { opacity:.8; }

/* 预览块:更多链接靠右 */
.spv-preview .spv-prev-head { justify-content:flex-end; }

/* 视频底部入口:纯文字 */
.spv-prev-foot { text-align:center; margin-top:14px; }
.spv-prev-foot .spv-prev-more { display:inline-block; font-size:13px; text-decoration:none; color:var(--spv-accent); transition:opacity .15s; }
.spv-prev-foot .spv-prev-more:hover { opacity:.7; }