/* ── cat-yuepao.css · 约炮分类 panel v2 ──
   两种视图可切换：
   - grid (默认): 2 列瀑布卡片网格
   - list:        单列大卡片沉浸浏览
   每卡: 照片(或渐变) + 在线 dot + 底部蒙层(名字/标签/城市)
   点卡 → 跳 link · 无 swipe / 无 city picker / 无 X-heart
*/

.v2-cat-yuepao { display:none; box-sizing:border-box; width:100%; min-width:0; padding:12px 14px 24px; }
.v2-cat-yuepao.v2-cat-yuepao--show { display:block; animation: v2YpFade 0.28s ease-out; }
@keyframes v2YpFade {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Header bar ── */
.v2-yp-header {
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:14px;
}
.v2-yp-city-btn {
  display:flex; align-items:center; gap:6px;
  background:rgba(168,85,247,0.22);
  border:1px solid rgba(200,120,255,0.5);
  border-radius:99px;
  padding:7px 14px 7px 12px;
  cursor:pointer;
  box-shadow:0 2px 12px rgba(168,85,247,0.25);
  -webkit-tap-highlight-color:transparent;
}
.v2-yp-city-btn-txt { font-size:13px; font-weight:700; color:#e879f9; }
.v2-yp-meta {
  flex:1; min-width:0;
  text-align:right;
  font-size:11px; color:rgba(255,255,255,0.45);
}
.v2-yp-view-toggle {
  display:flex; background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:8px; padding:2px; gap:0;
}
.v2-yp-view-toggle__btn {
  width:32px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:6px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  color:rgba(255,255,255,0.4);
  transition:all 0.15s;
}
.v2-yp-view-toggle__btn.active {
  background:rgba(168,85,247,0.35);
  color:#e879f9;
}

/* ── 共享：卡片基本结构 ── */
.v2-yp-card {
  position:relative;
  display:block;
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  background:linear-gradient(135deg,#a855f7,#ec4899);
  text-decoration:none; color:inherit;
  -webkit-tap-highlight-color:transparent;
  transition:transform 0.18s ease-out, box-shadow 0.18s;
  box-shadow:0 4px 16px rgba(0,0,0,0.45);
}
.v2-yp-card:active { transform:scale(0.97); }
.v2-yp-card__img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
}
.v2-yp-card__online {
  position:absolute; top:10px; right:10px;
  display:flex; align-items:center; gap:5px;
  background:rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding:4px 9px;
  border-radius:99px;
  font-size:10px; color:#fff;
  font-weight:600;
  z-index:2;
}
.v2-yp-card__dot {
  width:6px; height:6px; border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 6px #22c55e;
}
.v2-yp-card__dot--offline { background:rgba(255,255,255,0.4); box-shadow:none; }
.v2-yp-card__overlay {
  position:absolute; left:0; right:0; bottom:0;
  padding:30px 12px 12px;
  background:linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
  color:#fff;
  z-index:1;
}
.v2-yp-card__name {
  font-size:15px; font-weight:800;
  line-height:1.2;
  text-shadow:0 1px 3px rgba(0,0,0,0.6);
  margin-bottom:3px;
}
.v2-yp-card__tag {
  font-size:11px; color:rgba(255,255,255,0.78);
  text-shadow:0 1px 2px rgba(0,0,0,0.5);
  display:flex; align-items:center; gap:5px;
}
.v2-yp-card__city {
  font-size:10px; color:rgba(255,255,255,0.65);
  margin-top:3px;
  text-shadow:0 1px 2px rgba(0,0,0,0.5);
  display:flex; align-items:center; gap:3px;
}
.v2-yp-card__city::before { content:'📍'; font-size:10px; }

/* ── B 视图: 2-col 网格 (默认) ── */
.v2-yp-grid {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.v2-yp-grid .v2-yp-card { aspect-ratio: 3/4; }
.v2-yp-grid .v2-yp-card__name { font-size:14px; }

/* ── A 视图: 单列大卡片 ── */
.v2-yp-list {
  display:flex; flex-direction:column;
  gap:14px;
}
.v2-yp-list .v2-yp-card { aspect-ratio: 4/5; }
.v2-yp-list .v2-yp-card__overlay { padding:40px 18px 18px; }
.v2-yp-list .v2-yp-card__name { font-size:22px; font-weight:900; margin-bottom:5px; }
.v2-yp-list .v2-yp-card__tag { font-size:13px; }
.v2-yp-list .v2-yp-card__city { font-size:12px; margin-top:5px; }
.v2-yp-list .v2-yp-card__online {
  top:14px; right:14px;
  padding:6px 12px; font-size:11px;
}
.v2-yp-list .v2-yp-card__cta {
  margin-top:10px;
  display:inline-block;
  background:linear-gradient(135deg,#ec4899,#a855f7);
  color:#fff; font-size:12px; font-weight:800;
  padding:7px 20px; border-radius:99px;
  box-shadow:0 3px 12px rgba(168,85,247,0.45);
}

/* ── 空状态 ── */
.v2-yp-empty {
  text-align:center;
  padding:60px 16px;
  color:rgba(255,255,255,0.4);
  font-size:13px;
}
.v2-yp-empty__icon { font-size:38px; opacity:0.4; margin-bottom:12px; }

/* ── City Picker · 底部 Sheet (挂在 #modal-root 内，absolute 相对 #app-runtime) ── */
.v2-yp-city-layer {
  position:absolute; inset:0;
  pointer-events:none;
}
.v2-yp-city-layer--show { pointer-events:auto; }
.v2-yp-city-mask {
  position:absolute; inset:0;
  background:rgba(0,0,0,0);
  transition:background 0.28s ease-out;
}
.v2-yp-city-layer--show .v2-yp-city-mask {
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.v2-yp-city-sheet {
  position:absolute;
  left:0; right:0; bottom:0;
  background:linear-gradient(180deg, #1a0a2a 0%, #0d0418 100%);
  border-top-left-radius:20px;
  border-top-right-radius:20px;
  padding:14px 18px 28px;
  padding-bottom:calc(28px + env(safe-area-inset-bottom, 0px));
  box-shadow:0 -8px 32px rgba(0,0,0,0.6);
  transform:translateY(600px);
  transition:transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
.v2-yp-city-layer--show .v2-yp-city-sheet {
  transform:translateY(0);
}
.v2-yp-city-sheet::before {
  content:'';
  display:block;
  width:36px; height:4px;
  background:rgba(255,255,255,0.22);
  border-radius:2px;
  margin:0 auto 14px;
}
.v2-yp-city-sheet__title {
  font-size:15px; font-weight:700;
  color:#fff;
  margin-bottom:14px;
  text-align:center;
  letter-spacing:0.5px;
}
.v2-yp-city-grid {
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
}
.v2-yp-city-chip {
  display:flex; align-items:center; justify-content:center;
  padding:11px 6px;
  border-radius:10px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  font-size:13px; font-weight:600;
  color:rgba(255,255,255,0.78);
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
  transition:transform 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
  min-width:0;
  word-break:keep-all;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.v2-yp-city-chip:active { transform:scale(0.95); }
.v2-yp-city-chip--active {
  background:linear-gradient(135deg,#a855f7,#ec4899);
  border-color:transparent;
  color:#fff;
  font-weight:800;
  box-shadow:0 4px 14px rgba(168,85,247,0.4);
}