/* ============================================================
   站内推送系统 PushSlot 样式（黑底 Mint · 不抢眼原则）
   ============================================================ */
.push-slot { margin: 0; }
.push-section-title {
  margin: 0 0 10px;
  font-size: .78rem;
  font-weight: 800;
  color: rgba(242, 247, 245, .72);
  letter-spacing: .02em;
}

/* 细条 bar（Hero 下） */
.push-bar { margin: 0; }
/* 首页细条：收窄与广告位的间隔（-12px 抵消 hero 底部内边距），
   底部预留 22px 让地区按钮的 -18px 悬浮样式落在空白区，避免重叠 */
#push-slot-home_top {
  margin: -12px 12px 0;
  padding-bottom: 22px;
}
.push-item-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .09);
  color: rgba(242, 247, 245, .85);
  font-size: .8rem;
  font-weight: 650;
  cursor: pointer;
  position: relative;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: background .15s ease-out;
}
.push-item-bar:hover { background: rgba(255, 255, 255, .09); }
.push-item-bar .push-card-img,
.push-item-bar .push-card-emoji {
  width: 26px; height: 26px; flex: none;
  border-radius: 8px; object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  background: rgba(103, 232, 200, .14); font-size: 15px;
}
.push-item-bar .push-reason { color: rgba(242, 247, 245, .45); font-size: .68rem; font-weight: 500; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.push-arrow { margin-left: auto; color: #67E8C8; font-size: 1rem; }

/* 横滑 rail */
.push-rail { margin-top: 18px; }
.push-rail-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 2px 2px 8px;
  scrollbar-width: none;
}
.push-rail-track::-webkit-scrollbar { display: none; }
.push-item-rail {
  flex: 0 0 132px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .30);
  scroll-snap-align: start;
  cursor: pointer;
  position: relative;
  transition: transform .18s ease-out, border-color .18s ease-out;
}
.push-item-rail:hover { transform: translateY(-1px); border-color: rgba(103, 232, 200, .35); }
.push-item-rail .push-card-media { position: relative; overflow: hidden; aspect-ratio: 1; background: rgba(255, 255, 255, .04); }
.push-item-rail .push-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.push-item-rail .push-card-emoji {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem;
}
.push-item-rail .push-card-body { padding: 8px 10px 10px; }
.push-item-rail .push-title { display: block; font-size: .78rem; font-weight: 750; color: #F2F7F5; line-height: 1.35; }
.push-item-rail .push-reason { display: block; margin-top: 2px; font-size: .62rem; font-style: normal; color: rgba(242, 247, 245, .42); }

/* 穿插 inline（测试页/模版列表） */
.push-inline { margin: 16px 0; }
.push-inline-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.push-item-inline {
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  cursor: pointer;
  position: relative;
  transition: transform .18s ease-out, border-color .18s ease-out;
}
.push-item-inline:hover { transform: translateY(-1px); border-color: rgba(103, 232, 200, .35); }
.push-item-inline .push-card-media { position: relative; overflow: hidden; aspect-ratio: 4/3; background: rgba(255, 255, 255, .04); }
.push-item-inline .push-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.push-item-inline .push-card-emoji { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.push-item-inline .push-card-body { padding: 8px 10px 10px; }
.push-item-inline .push-title { display: block; font-size: .78rem; font-weight: 750; color: #F2F7F5; }
.push-item-inline .push-reason { display: block; margin-top: 2px; font-size: .62rem; font-style: normal; color: rgba(242, 247, 245, .42); }

/* 安静区块 quiet（我的页） */
.push-quiet { margin-top: 20px; padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07); }
.push-item-quiet {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 4px;
  cursor: pointer;
  position: relative;
}
.push-item-quiet .push-card-img, .push-item-quiet .push-card-emoji {
  width: 34px; height: 34px; flex: none; border-radius: 10px; object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  background: rgba(103, 232, 200, .14); font-size: 17px;
}
.push-item-quiet .push-title { font-size: .82rem; font-weight: 750; color: #F2F7F5; }
.push-item-quiet .push-reason { font-size: .66rem; color: rgba(242, 247, 245, .42); }

/* 瀑布流细卡 masonry（壁纸页） */
.push-masonry { margin: 12px 0; }
.push-item-masonry {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  cursor: pointer;
  position: relative;
}
.push-item-masonry .push-card-img, .push-item-masonry .push-card-emoji {
  width: 30px; height: 30px; flex: none; border-radius: 9px; object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  background: rgba(103, 232, 200, .14); font-size: 16px;
}
.push-item-masonry .push-title { font-size: .8rem; font-weight: 700; color: #F2F7F5; }
.push-item-masonry .push-reason { font-size: .64rem; color: rgba(242, 247, 245, .42); }

/* 不感兴趣 ×：极小、低对比 */
.push-dismiss {
  position: absolute;
  top: 6px; right: 6px;
  z-index: 2;
  width: 20px; height: 20px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .28);
  color: rgba(255, 255, 255, .5);
  font-size: .8rem;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background .15s ease-out, color .15s ease-out;
}
.push-dismiss:hover { background: rgba(0, 0, 0, .5); color: #fff; }
.push-item-bar .push-dismiss, .push-item-quiet .push-dismiss, .push-item-masonry .push-dismiss { top: 50%; right: 8px; transform: translateY(-50%); }