/* 缘见婚恋 · 前台公共样式 */
:root{
  --primary:#FF6F6F;--primary-deep:#E83191;--primary-soft:#FFF1F2;--pink-2:#FD66B5;
  --text:#2b2b2b;--sub:#888;--line:#f0e6e6;--bg:#faf7f8;--radius:14px;
  --shadow:0 6px 24px rgba(255,111,111,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;min-height:100vh}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
svg.ico{width:1em;height:1em;vertical-align:-.125em;fill:currentColor}

/* 顶部条 */
.topbar{background:linear-gradient(90deg,#FF6F6F,#E83191);color:#fff;font-size:13px}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:36px;gap:12px}
.topbar .left,.topbar .right{display:flex;align-items:center;gap:12px;min-width:0}
.topbar .store{cursor:pointer;opacity:.95;white-space:nowrap}
.topbar .store:hover{opacity:1;text-decoration:underline}
.topbar .dot{opacity:.45}
.topbar .who{display:flex;align-items:center;gap:8px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 头部 */
.header{position:sticky;top:0;z-index:30;background:#fff;box-shadow:0 2px 14px rgba(0,0,0,.05)}
.header .wrap{display:flex;align-items:center;height:74px;gap:30px}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0;cursor:pointer}
.logo .mark{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,#FF6F6F,#E83191);display:grid;place-items:center;color:#fff;font-weight:800;font-size:22px;box-shadow:0 6px 16px rgba(232,49,145,.32)}
.logo .txt b{font-size:22px;letter-spacing:2px;display:block;line-height:1.1}
.logo .txt span{font-size:11px;color:var(--sub);letter-spacing:4px}
.nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.nav a{padding:8px 14px;border-radius:20px;font-size:15px;color:#555;transition:.2s;white-space:nowrap}
.nav a:hover,.nav a.on{color:#fff;background:linear-gradient(135deg,#FF6F6F,#E83191)}
.head-act{display:flex;align-items:center;gap:10px;flex-shrink:0}
.btn-ghost{padding:8px 18px;border:1px solid var(--primary);color:var(--primary);border-radius:20px;font-size:14px;background:#fff;cursor:pointer;transition:.2s;white-space:nowrap}
.btn-ghost:hover{background:var(--primary-soft)}
.btn-solid{padding:8px 20px;border:none;color:#fff;border-radius:20px;font-size:14px;cursor:pointer;background:linear-gradient(135deg,#FF6F6F,#E83191);box-shadow:0 4px 14px rgba(232,49,145,.3);transition:.2s;white-space:nowrap}
.btn-solid:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(232,49,145,.4)}
.btn-line{padding:6px 15px;border:1px solid #FFD3DC;background:#FFF7F9;color:#E83191;border-radius:18px;font-size:13px;cursor:pointer;transition:.2s;white-space:nowrap}
.btn-line:hover{background:linear-gradient(135deg,#FF6F6F,#E83191);color:#fff;border-color:transparent}

/* 区块 */
.sec{padding:40px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px;gap:12px;flex-wrap:wrap}
.sec-head h2{font-size:24px;letter-spacing:1px}
.sec-head h2 small{display:block;font-size:11px;color:#c8b9bd;letter-spacing:5px;font-weight:400;margin-top:5px;text-transform:uppercase}
.sec-head .more{color:var(--primary);font-size:14px;cursor:pointer}
.page-title{padding:26px 0 6px}
.page-title h1{font-size:26px;letter-spacing:1px}
.page-title p{color:var(--sub);font-size:13px;margin-top:8px}

/* 筛选栏 */
.filterbar{background:#fff;border-radius:var(--radius);padding:18px 20px;box-shadow:0 2px 12px rgba(20,30,60,.04);margin-bottom:22px}
.filter-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0;border-bottom:1px dashed var(--line)}
.filter-row:last-child{border-bottom:none}
.filter-row .lb{font-size:13px;color:#999;width:52px;flex-shrink:0}
.chip{padding:6px 14px;border-radius:16px;font-size:13px;color:#666;cursor:pointer;transition:.18s;background:#f7f3f4}
.chip:hover{color:var(--primary)}
.chip.on{background:linear-gradient(135deg,#FF6F6F,#E83191);color:#fff}

/* 会员卡 */
.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.mitem{background:#fff;border-radius:var(--radius);overflow:hidden;transition:.24s;border:1px solid #f6ecee;cursor:pointer}
.mitem:hover{transform:translateY(-6px);box-shadow:0 14px 34px rgba(255,111,111,.16);border-color:#ffe0e6}
.mitem .pic{position:relative;height:220px;display:grid;place-items:center;font-size:52px;font-weight:800;color:#fff;letter-spacing:2px}
.mitem .pic .vip{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.35);color:#FFE9A8;font-size:11px;padding:3px 9px;border-radius:8px}
.mitem .pic .real{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.92);color:#0BA98A;font-size:11px;padding:3px 8px;border-radius:8px;font-weight:600}
.mitem .info{padding:14px}
.mitem .info .row{display:flex;align-items:baseline;gap:8px}
.mitem .info b{font-size:16px}
.mitem .info .age{color:#E83191;font-size:13px;font-weight:600}
.mitem .info .city{color:var(--sub);font-size:12px;margin-left:auto}
.mitem .tags{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap;min-height:22px;overflow:hidden;max-height:22px}
.mitem .tags i{font-style:normal;font-size:11px;color:#8a6b74;background:#FBF2F4;padding:3px 8px;border-radius:6px;white-space:nowrap}

/* 分页 */
.pager{display:flex;justify-content:center;align-items:center;gap:8px;padding:30px 0 6px}
.pager button{min-width:36px;height:36px;padding:0 12px;border:1px solid #eee;background:#fff;border-radius:9px;font-size:13px;color:#666;cursor:pointer;transition:.18s}
.pager button:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}
.pager button.on{background:linear-gradient(135deg,#FF6F6F,#E83191);color:#fff;border-color:transparent}
.pager button:disabled{opacity:.45;cursor:not-allowed}
.pager .info{font-size:13px;color:#999;margin-left:8px}

/* 空状态 / 加载 */
.empty{padding:70px 20px;text-align:center;color:#b7a9ad;font-size:14px}
.empty .big{font-size:40px;color:#FFD9DF;margin-bottom:12px;font-weight:800}
.skeleton{height:300px;border-radius:var(--radius);background:linear-gradient(90deg,#f6f0f1 25%,#fbf7f8 37%,#f6f0f1 63%);background-size:400% 100%;animation:sk 1.4s ease infinite}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* 页脚 */
.footer{background:#2b2b2b;color:#b9b2b5;margin-top:50px;padding:44px 0 0}
.footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding-bottom:30px}
.footer h5{color:#fff;font-size:14px;margin-bottom:14px}
.footer a{display:block;font-size:13px;margin-bottom:9px;opacity:.8}
.footer a:hover{opacity:1;color:#FFB3C6}
.footer .brand p{font-size:13px;line-height:1.9;margin-top:10px;opacity:.75}
.footer .copy{border-top:1px solid #3d3739;padding:15px 0;text-align:center;font-size:12px;opacity:.6}
.footer .copy span{margin:0 8px}

@media(max-width:960px){
  .nav{display:none}
  .mgrid{grid-template-columns:repeat(2,1fr)}
  .footer .cols{grid-template-columns:1fr 1fr}
  .header .wrap{gap:14px}
}

/* 通用：禁止换行（表格窄列内的「12 / 30」这类组合值） */
.nw{white-space:nowrap}