/* 交友墙 验证版 —— 清新白底，复用主题主色变量 var(--theme-color) */
.spc-wrap { --spc-accent: var(--theme-color, #1fc4a7); margin: 0 auto; }

/* 筛选区 */
.spc-filter {
	background: var(--main-bg-color, #fff);
	border: 1px solid var(--main-border-color, rgba(50,50,50,.06));
	border-radius: var(--main-radius, 10px);
	padding: 14px 16px;
	margin-bottom: 16px;
}
.spc-wrap, .spc-wrap * { box-sizing: border-box; }
.spc-f-line { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; padding: 7px 0; }
.spc-f-line + .spc-f-line { border-top: 1px dashed var(--main-border-color, rgba(50,50,50,.06)); }
.spc-f-label { flex: 0 0 48px; color: var(--muted-color, #777); font-size: 13px; line-height: 30px; }
.spc-province, .spc-city, .spc-sort {
	flex: 1 1 140px; min-width: 0; max-width: 220px;
	height: 30px; border: 1px solid var(--main-border-color, rgba(0,0,0,.1));
	border-radius: 6px; padding: 0 8px; background: var(--main-bg-color, #fff);
	color: var(--main-color, #4e5358); font-size: 13px; cursor: pointer;
}

/* 属性 / 性别 标签 */
.spc-kinds, .spc-genders { display: flex; flex-wrap: wrap; gap: 8px; }
.spc-chk, .spc-radio { cursor: pointer; }
.spc-chk input, .spc-radio input { position: absolute; opacity: 0; }
.spc-chk span, .spc-radio span {
	display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 13px;
	border: 1px solid var(--main-border-color, rgba(0,0,0,.1));
	color: var(--muted-color, #777); background: var(--body-bg-color, #f7f8fa);
	transition: all .15s;
}
.spc-chk input:checked + span, .spc-radio input:checked + span {
	background: var(--spc-accent); color: #fff; border-color: var(--spc-accent);
}

/* 统计 */
.spc-count { color: var(--muted-2-color, #999); font-size: 13px; margin: 4px 2px 12px; }

/* 卡片网格 */
.spc-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px;
}
.spc-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);
	padding: 14px; display: flex; flex-direction: column; min-width: 0;
	transition: box-shadow .18s, transform .18s;
}
.spc-card:hover { box-shadow: 0 6px 22px var(--main-shadow, rgba(116,116,116,.12)); transform: translateY(-2px); }

.spc-head { display: flex; align-items: center; gap: 10px; }
.spc-ava img { width: 56px; height: 56px; border-radius: 50%; display: block; }
.spc-meta { min-width: 0; flex: 1; }
.spc-name { font-weight: 600; color: var(--key-color, #333); text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spc-name:hover { color: var(--spc-accent); }
.spc-sub { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.spc-badge { font-size: 12px; padding: 1px 8px; border-radius: 999px; color: #fff; background: var(--muted-2-color, #999); }
.spc-g-m { background: #4aa8f0; }
.spc-g-f { background: #ff7aa8; }
.spc-ago { font-size: 12px; color: var(--muted-2-color, #999); }

.spc-body { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.spc-row { font-size: 13px; color: var(--main-color, #4e5358); line-height: 1.5; }
.spc-k { color: var(--muted-2-color, #999); margin-right: 6px; }
.spc-intro { color: var(--muted-color, #777); }

.spc-foot { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.spc-btn {
	display: block; text-align: center; padding: 7px 0; border-radius: 7px; font-size: 13px;
	background: var(--spc-accent); color: #fff; text-decoration: none; transition: opacity .15s;
}
.spc-btn:hover { opacity: .88; }
/* 关注 / 私信 一行平分（min-width:0 防止溢出卡片）*/
.spc-acts { display: flex; gap: 8px; min-width: 0; }
.spc-acts > .but, .spc-acts .spc-act {
	flex: 1 1 0; min-width: 0; text-align: center; justify-content: center;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 状态 */
.spc-empty, .spc-loading { text-align: center; color: var(--muted-2-color, #999); padding: 40px 0; }
.spc-more-wrap { text-align: center; margin: 20px 0; }
.spc-more {
	padding: 9px 28px; border-radius: 999px; cursor: pointer; font-size: 14px;
	border: 1px solid var(--spc-accent); color: var(--spc-accent); background: transparent; transition: all .15s;
}
.spc-more:hover { background: var(--spc-accent); color: #fff; }

@media (max-width: 480px) {
	.spc-grid { grid-template-columns: 1fr; gap: 12px; }   /* 手机单列：卡片占满宽，按钮不再溢出 */
	.spc-card { padding: 12px; }
	.spc-f-label { flex-basis: 100%; }
	.spc-province, .spc-city, .spc-sort { max-width: none; } /* 手机下拉可占满可用宽 */
}

/* 联系方式未登录锁 */
.spc-locked { color: var(--muted-2-color, #999); font-size: 12px; }

/* ============ 独立满屏模式（[sp_friend_wall full="1"]）============ */
html.spc-fw-fs, html.spc-fw-fs body { overflow: hidden; height: 100%; }
.spc-wrap.fs {
	position: fixed; top: var(--spc-top, 56px); left: 0; right: 0; bottom: 0; z-index: 30;
	margin: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
	background: var(--body-bg-color, #f7f8fa);
}
.spc-wrap.fs .spc-filter {
	position: sticky; top: 0; z-index: 5; margin: 0;
	border-radius: 0; border-left: 0; border-right: 0; border-top: 0;
}
.spc-wrap.fs .spc-count { padding: 8px 14px 0; margin: 0; }
.spc-wrap.fs .spc-grid { padding: 12px 14px; }
.spc-wrap.fs .spc-more-wrap { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0)); }

/* ── 顶部头图 + 导航卡(仿原交友墙模板) ── */
.spc-navhead { overflow: hidden; }
.spc-navhead .spc-banner { line-height: 0; }
.spc-navhead .spc-banner img { width: 100%; height: 180px; object-fit: cover; display: block; }
.spc-navhead .spc-banner .abs-center {
	position: absolute; left: 24px; top: 50%; transform: translateY(-50%);
	text-align: left; line-height: 1.2;
}
.spc-navhead .spc-banner .slide-title {
	color: #fff; font-size: 28px; font-weight: 800; letter-spacing: 2px;
	text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.spc-navhead .header-slider-card { margin-top: -28px; position: relative; z-index: 2; }
.spc-navhead .icon-cover-card {
	background: var(--main-bg-color, #fff); border-radius: 14px;
	box-shadow: 0 4px 16px rgba(50,60,80,.1); transition: transform .15s, box-shadow .15s;
}
.spc-navhead .relative-h > a:hover .icon-cover-card {
	transform: translateY(-2px); box-shadow: 0 10px 24px rgba(31,196,167,.16);
}
@media (max-width: 620px) {
	.spc-navhead .spc-banner img { height: 130px; }
	.spc-navhead .spc-banner .slide-title { font-size: 22px; }
}