danyang-match/miniapp/pages/index/index.wxss

/**
 * 首页 —— 全站设计系统样板页
 *
 * 2026-09-22 重做。这一版要证明 app.wxss v2 的底座是"能用"的：
 *
 *  1) 氛围层（参考图的关键差异项）
 *     旧版只有一条线性渐变，参考图里有明显的暖粉光晕、星点与玻璃质感。
 *     现用三层叠加：--mini-starfield（星点）+ --gradient-night（夜空）
 *     + 两个定位光晕伪元素（左上粉 / 左下靛蓝），零图片、零额外请求。
 *
 *  2) 排版层级
 *     旧版 hero 标题 35rpx、区块标题 36rpx、卡片标题 25rpx、正文 24rpx ——
 *     hero 与区块标题几乎同号，层级读不出来。现为：
 *       hero 48rpx/700 > 区块标题 40rpx/600 > 卡片标题 28rpx/600 >
 *       正文 26rpx > 元信息 24rpx
 *
 *  3) 触摸目标
 *     所有可点元素以 --tap-min(88rpx=44px) 为下限；旧版 .empty-btn 只有 24px。
 *     并且删掉了 @media(max-width:340px) 里的 .empty-actions{display:none} ——
 *     那等于在小屏上把「调整条件 / 公益红娘」两个入口整块砍掉。
 *
 *  4) 交互反馈
 *     旧版全站 --motion-* 只被引用 5 次，点了没反应。现统一走 --ease-spring
 *     + --press-scale，并给区块卡片加上按压缩放。
 *
 *  5) 对比度
 *     旧版 .text-link/.activity-tag/.safety-link 用 --mini-accent-pink(#FF4F91)
 *     作文字 = 3.10:1，不达标；CTA 白字压在珊瑚粉渐变上也只有 2.77:1。
 *     现分别改用 --color-primary-strong(5.33:1) 与 --gradient-brand-solid(≥4.7:1)。
 *
 * 单位：rpx（750rpx = 屏幕宽度，1rpx ≈ 0.5px）
 */

/* ============================== 页面骨架 ============================== */

.page {
  min-height: 100vh;
  background: var(--color-bg-page);
  padding-bottom: var(--spacing-5);
}

/* ============================== 夜空头部 ============================== */

.night-shell {
  position: relative;
  overflow: hidden;
  /* --nav-status / --nav-h / --nav-right 由 index.ts 经 utils/nav-metrics 实测胶囊按钮后注入。
     顶到胶囊所在横带，而不是用 env(safe-area-inset-top)：后者只反映设备物理安全区，
     安卓上常为 0，也完全不反映右上角胶囊的位置（2026-09-23 重合缺陷的根因）。 */
  padding: var(--nav-status, 44px) var(--spacing-3) var(--spacing-4);
  background: var(--mini-starfield), var(--gradient-night);
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
  box-shadow: var(--shadow-night);
}

/* 两个光晕：伪元素承担，避免为了装饰再嵌一层 view */
.night-shell::before,
.night-shell::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-ambient);
}
.night-shell::before {
  top: -200rpx;
  right: -140rpx;
  width: 560rpx;
  height: 560rpx;
  background: radial-gradient(circle, var(--mini-glow-coral) 0%, transparent 68%);
}
.night-shell::after {
  bottom: -220rpx;
  left: -160rpx;
  width: 620rpx;
  height: 620rpx;
  background: radial-gradient(circle, var(--mini-glow-indigo) 0%, transparent 70%);
}

/* 伪元素是定位元素，会盖住静态流内容；正文需要显式抬一层 */
.night-shell > view {
  position: relative;
  z-index: var(--z-base);
}

/* ============================== 品牌栏 ============================== */

.brand-bar {
  /* 高度与胶囊按钮对齐；右侧留出胶囊安全区，否则「消息」入口会被胶囊压住点不到 */
  height: var(--nav-h, 80rpx);
  box-sizing: border-box;
  padding-right: var(--nav-right, 102px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--mini-text-on-night);
}
.brand-lockup {
  display: flex;
  align-items: center;
  min-width: 0;
}
.brand-logo {
  width: 68rpx;
  height: 68rpx;
  flex: none;
}
.brand-copy {
  display: flex;
  flex-direction: column;
  margin-left: var(--spacing-2);
}
.brand-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-tight);
}
.brand-slogan {
  margin-top: 2rpx;
  font-size: var(--font-size-xs);
  letter-spacing: 3rpx;
  color: var(--mini-text-on-night-muted);
}
.brand-actions {
  position: relative;
  flex: none;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
  justify-content: center;
}
.message-label {
  font-size: var(--font-size-sm);
}
.badge {
  position: absolute;
  right: 0;
  top: 4rpx;
  min-width: 30rpx;
  height: 30rpx;
  padding: 0 5rpx;
  line-height: 30rpx;
  text-align: center;
  font-size: var(--font-size-micro);
  color: var(--color-text-inverse);
  /* 白字需 4.5:1：--mini-accent-pink 仅 3.10，改用 solid 变体 */
  background: var(--color-primary-solid);
  border-radius: var(--radius-full);
  /* 描一圈夜空底色，避免角标压在光晕上时边缘糊掉 */
  box-shadow: 0 0 0 3rpx var(--mini-night-start);
}

/* ============================== 状态条 ============================== */

.status-strip {
  margin: var(--spacing-1) 0 var(--spacing-2);
  padding: var(--spacing-3);
  border: var(--border-width) solid var(--mini-hairline);
  background: var(--mini-glass);
  border-radius: var(--radius-md);
  color: var(--color-text-inverse);
}
.status-main {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}
.status-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.status-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}
.status-desc {
  margin-top: 6rpx;
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  color: var(--mini-text-on-night-muted);
}
.status-action {
  flex: none;
  min-width: 116rpx;
  min-height: var(--tap-min);
  padding: 0 var(--spacing-3);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--gradient-brand-solid);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.status-checks {
  display: flex;
  gap: 10rpx;
  overflow: hidden;
}
.status-check {
  padding: 8rpx 14rpx;
  border-radius: var(--radius-full);
  background: var(--mini-glass);
  font-size: var(--font-size-xs);
  color: var(--mini-text-on-night-muted);
  white-space: nowrap;
}
.status-check.done {
  background: var(--mini-glass-success);
  color: var(--color-success-on-night);
  font-weight: var(--font-weight-semibold);
}

/* ============================== 主视觉横幅 ============================== */

.banner-section {
  width: 100%;
}
.banner-swiper,
.banner-card {
  height: 300rpx;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.banner-card {
  position: relative;
}
.banner-img {
  width: 100%;
  height: 100%;
  display: block;
}
.banner-overlay {
  position: absolute;
  inset: 0;
  background: var(--mini-banner-scrim);
}
.banner-copy {
  position: absolute;
  left: var(--spacing-3);
  bottom: var(--spacing-5);
  width: 68%;
  display: flex;
  flex-direction: column;
  color: var(--color-text-inverse);
}
.banner-kicker {
  font-size: var(--font-size-xs);
  letter-spacing: 3rpx;
  color: var(--mini-text-on-night-muted);
}
.banner-title {
  margin-top: 10rpx;
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-shadow: 0 4rpx 14rpx rgba(0, 0, 0, 0.22);
}
.banner-subtitle {
  margin-top: 10rpx;
  font-size: var(--font-size-sm);
  color: var(--mini-text-on-night-muted);
}

/* ============================== 快捷入口 ============================== */

.entries-card {
  position: relative;
  z-index: 2;
  margin: -18rpx var(--spacing-3) 0;
  padding: var(--spacing-3) var(--spacing-1) var(--spacing-2);
  background: var(--mini-card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
}
/* 4 列宫格用 flex + 25% 宽实现。display:grid 在 Skyline 渲染引擎下不支持，
   统一避开以免将来切渲染引擎时整体错版。 */
.entries-grid {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--spacing-2);
}
.entry-item {
  width: 25%;
  box-sizing: border-box;
  min-height: 176rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.entry-item.disabled {
  opacity: 0.4;
}
/* 图标砖（参考图 2）：96rpx 圆角方 + 高饱和渐变面 + 白色描画图形。
   两层背景：上层 52rpx = 白色图形（data-uri SVG），下层 100% = 渐变砖面。
   background-color 是**兜底**：万一 SVG 背景层被解析器丢弃，砖面仍在（只是没有图形），
   不会退化成「白底白图标」这种彻底不可见的形态。 */
.entry-icon {
  width: 96rpx;
  height: 96rpx;
  border-radius: 28rpx;
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 52rpx 52rpx, 100% 100%;
  box-shadow: var(--mini-entry-shadow);
}
.entry-label {
  margin-top: var(--spacing-1);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-strong);
  letter-spacing: var(--letter-spacing-tight);
}
/* 副标题：承接参考图「主标题 + 一行说明」的双层信息结构。
   字号用 --font-size-xs（12px，本项目的元信息下限），不再往下探 micro —— 
   micro 是「仅角标/装饰、禁用于正文」的档位，这行字承载语义，不属于装饰。 */
.entry-sub {
  margin-top: 2rpx;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: var(--mini-muted);
  line-height: 1.3;
}

/* ---- tone → 渐变砖面 + 白色图形 ----------------------------------------
   色相语义与实算对比度见 app.wxss 的 --gradient-entry-* 注释块；
   本处只负责「把哪个图形放到哪种砖上」，颜色事实源仍在 app.wxss。
   图形均为 24×24 viewBox 白色矢量，随 background-size 等比缩放到 52rpx。 */
.tone-rose {
  background-color: #F34671;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 21.2l-1.4-1.3C5.5 15.3 2.2 12.3 2.2 8.6 2.2 5.6 4.6 3.2 7.6 3.2c1.7 0 3.3.8 4.4 2 1.1-1.2 2.7-2 4.4-2 3 0 5.4 2.4 5.4 5.4 0 3.7-3.3 6.7-8.4 11.3z'/%3E%3C/svg%3E"), var(--gradient-entry-rose);
}
.tone-orange {
  background-color: #D95E06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='9' cy='7.6' r='3.4'/%3E%3Ccircle cx='17.2' cy='9.8' r='2.7'/%3E%3Crect x='2.4' y='15.2' width='13.2' height='6.4' rx='3.2'/%3E%3Crect x='13.8' y='16.4' width='8.6' height='5.2' rx='2.6'/%3E%3C/g%3E%3C/svg%3E"), var(--gradient-entry-orange);
}
.tone-violet {
  background-color: #8F64F2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.8'%3E%3Crect x='3.2' y='5.4' width='17.6' height='15.4' rx='3.2'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Crect x='7.6' y='2.6' width='2.1' height='4.3' rx='1.05'/%3E%3Crect x='14.3' y='2.6' width='2.1' height='4.3' rx='1.05'/%3E%3Cpath d='M12.00 10.65L12.74 12.58L14.81 12.69L13.20 13.99L13.73 15.99L12.00 14.86L10.27 15.99L10.80 13.99L9.19 12.69L11.26 12.58Z'/%3E%3C/g%3E%3C/svg%3E"), var(--gradient-entry-violet);
}
.tone-blue {
  background-color: #3484F4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M3.7 7.1a3.4 3.4 0 0 1 3.4-3.4h6.6a3.4 3.4 0 0 1 3.4 3.4v3.6a3.4 3.4 0 0 1-3.4 3.4H9.3l-4 3.4a.8.8 0 0 1-1.6-.5z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Cpath d='M18.1 9.4h.4a2.5 2.5 0 0 1 2.5 2.5v2.3a2.5 2.5 0 0 1-2.5 2.5h-.4v2.1l-2.5-2.1h-2a2.5 2.5 0 0 1-2.5-2.5'/%3E%3C/g%3E%3C/svg%3E"), var(--gradient-entry-blue);
}
.tone-purple {
  background-color: #A260ED;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23fff'%3E%3Cpath d='M11.3 7.4C9.6 5.9 7.2 5.2 4.6 5.2H2.8v12.9h1.8c2.6 0 5 .7 6.7 2.2z'/%3E%3Cpath d='M12.7 7.4c1.7-1.5 4.1-2.2 6.7-2.2h1.8v12.9h-1.8c-2.6 0-5 .7-6.7 2.2z'/%3E%3C/g%3E%3C/svg%3E"), var(--gradient-entry-purple);
}
.tone-pink {
  background-color: #F0458C;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23fff'%3E%3Cpath d='M12 13.6l-1.05-1C7.2 9.3 5 7.2 5 5 5 3.2 6.5 1.8 8.3 1.8c1.1 0 2.1.5 2.7 1.4.6-.9 1.6-1.4 2.7-1.4 1.8 0 3.3 1.4 3.3 3.2 0 2.2-2.2 4.3-5.8 7.7z'/%3E%3Crect x='3.4' y='15.6' width='10' height='3.6' rx='1.8' transform='rotate(18 8.4 17.4)'/%3E%3Crect x='10.6' y='15.6' width='10' height='3.6' rx='1.8' transform='rotate(-18 15.6 17.4)'/%3E%3C/g%3E%3C/svg%3E"), var(--gradient-entry-pink);
}
.tone-green {
  background-color: #148F66;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 2.6l7.4 2.8v6.2c0 4.6-3.1 8.7-7.4 9.8-4.3-1.1-7.4-5.2-7.4-9.8V5.4z'/%3E%3C/g%3E%3Cpath d='M8.4 12.2l2.5 2.5 4.7-5' fill='none' stroke='%23fff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), var(--gradient-entry-green);
}
.tone-amber {
  background-color: #CC650B;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 3.1l9.2 7.5h-2.3v9.4h-4.3v-5.7H9.4v5.7H5.1v-9.4H2.8z'/%3E%3C/svg%3E"), var(--gradient-entry-amber);
}

/* ============================== 区块容器 ============================== */

.preview-note {
  margin: var(--spacing-2) var(--spacing-3) 0;
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--color-accent-purple-strong);
}
.section {
  margin-top: var(--spacing-5);
  padding: 0 var(--spacing-3);
}
.recommendation-section {
  margin-top: var(--spacing-5);
}
/* 标题与卡片左边缘必须对齐：.section 已提供 24rpx 内边距，
   而 ui-section 自带 --spacing-page-x(32rpx)，叠加会让标题比卡片多缩进 32rpx。 */
.section .ui-section {
  padding-left: 0;
  padding-right: 0;
}

/* ============================== 今日推荐 ============================== */

.recommend-list {
  margin-top: var(--spacing-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.recommend-empty {
  margin-top: var(--spacing-2);
  padding: var(--spacing-3);
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.empty-logo {
  width: 76rpx;
  height: 76rpx;
  flex: none;
}
.empty-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.empty-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-strong);
}
.empty-desc {
  margin-top: 6rpx;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text-tertiary);
}
.empty-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}
.empty-btn {
  min-width: 120rpx;
  min-height: var(--tap-min);
  padding: 0 var(--spacing-2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}
.empty-btn.secondary {
  color: var(--color-accent-purple-strong);
  background: var(--color-accent-purple-light);
}
.empty-btn.primary {
  color: var(--color-text-inverse);
  background: var(--gradient-brand-solid);
}

/* ============================== 公益服务（1/3 小卡） ==============================
   2026-09-23 重做。此前的卡片是「整行宽 + 封面写 width 不写 height」：
   小程序 <image> 在未指定高度时会取默认 240px（=480rpx），卡片被硬生生撑到约 480rpx 高，
   首页上极占地方（用户反馈的「占用过大」即此）。现在：
     - 宽度：一行 3 张，每张约 224rpx（≈ 原 702rpx 的 1/3）
     - 高度：固定 168rpx（≈ 原 480rpx 的 1/3）
     - 内容：只留配图 + 标题，整块可点，长文案与入口交给详情页
   ⇒ 想改回整行宽：把 .mini-card 的 width 换成 100%、height 改成 160rpx 即可（一处改动）。 */

.mini-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--spacing-2);
  margin-top: var(--spacing-2);
}
.mini-card {
  position: relative;
  width: calc((100% - var(--spacing-2) * 2) / 3);
  height: 168rpx;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.mini-card-cover {
  width: 100%;
  height: 100%;
  display: block;
}
.mini-card-scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 112rpx;
  background: linear-gradient(180deg, rgba(23, 42, 114, 0) 0%, rgba(23, 42, 114, 0.88) 100%);
}
.mini-card-title {
  position: absolute;
  left: var(--spacing-2);
  right: var(--spacing-1);
  bottom: 12rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text-inverse);
}
/* 安全提醒右半区：文案是公益属性的一部分，缩卡后不能整块丢掉 */
.mini-note {
  flex: 1;
  min-width: 0;
  padding-top: var(--spacing-1);
  display: flex;
  flex-direction: column;
}
.mini-note-text {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text-tertiary);
}
.mini-note-link {
  margin-top: var(--spacing-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-strong);
}

/* ============================== 近期活动 ============================== */

.activity-scroll {
  white-space: nowrap;
  margin-top: var(--spacing-2);
}
.activity-card {
  display: inline-flex;
  width: 550rpx;
  margin-right: var(--spacing-2);
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  white-space: normal;
}
.activity-cover {
  width: 210rpx;
  height: 172rpx;
  flex: none;
}
.activity-info {
  flex: 1;
  min-width: 0;
  padding: var(--spacing-2);
  display: flex;
  flex-direction: column;
}
.activity-tag {
  align-self: flex-start;
  padding: 5rpx 14rpx;
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  color: var(--color-primary-strong);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}
.activity-title {
  margin-top: 10rpx;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text-strong);
}
.activity-meta {
  margin-top: auto;
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}

/* ============================== 服务站 / 婚恋课堂 ============================== */

.station-card,
.article-row {
  display: flex;
  align-items: center;
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.station-cover {
  width: 190rpx;
  height: 172rpx;
  flex: none;
}
.station-info {
  flex: 1;
  min-width: 0;
  padding: var(--spacing-2);
}
.station-name {
  display: block;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-strong);
}
.station-desc {
  display: block;
  margin: 8rpx 0 12rpx;
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}
.mini-tag {
  display: inline-block;
  margin: 4rpx 8rpx 0 0;
  padding: 4rpx 12rpx;
  border-radius: var(--radius-sm);
  background: var(--color-accent-purple-light);
  color: var(--color-accent-purple-strong);
  font-size: var(--font-size-xs);
}
.arrow-icon {
  width: 28rpx;
  height: 28rpx;
  margin: var(--spacing-2);
  flex: none;
}
.article-list {
  margin-top: var(--spacing-2);
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}
.article-row {
  min-height: 116rpx;
}
.article-cover {
  width: 146rpx;
  height: 116rpx;
  flex: none;
}
.article-info {
  flex: 1;
  min-width: 0;
  padding: var(--spacing-2);
}
.article-title {
  display: block;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.article-meta {
  display: block;
  margin-top: 6rpx;
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
}
.section-empty {
  margin-top: var(--spacing-2);
  padding: var(--spacing-4) var(--spacing-3);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

/* ============================== 安全提醒 ==============================
   2026-09-23：由「整行宽的大卡」改为 mini-rail（左 1/3 小卡 + 右文案），样式复用
   .mini-card / .mini-note，不再单独维护一套。历史记录：
   旧版这里写了 padding:0，把 .section 的左右内边距覆盖掉，于是这张卡比其它区块宽出 48rpx、
   直接贴到屏幕边缘（已在本轮随整块重做一并移除）。 */

/* ============================== 按压反馈 ==============================
   全站约定：可点元素必须有即时反馈（旧版 --motion-* 全站只被引用 5 次）。
   统一走 --ease-spring 的轻微回弹 + --press-scale，避免"点了没反应"。 */

.entry-item,
.status-action,
.empty-btn,
.brand-actions,
.mini-card,
.activity-card,
.station-card,
.article-row,
.mini-note-link,
.section-empty,
.banner-card {
  transition: transform var(--motion-fast) var(--ease-spring),
              opacity var(--motion-fast) var(--ease-standard);
}
.entry-item:active,
.status-action:active,
.empty-btn:active,
.brand-actions:active,
.mini-card:active,
.activity-card:active,
.station-card:active,
.article-row:active,
.mini-note-link:active,
.section-empty:active,
.banner-card:active {
  transform: scale(var(--press-scale));
  opacity: var(--press-opacity);
}

/* ============================== 小屏适配 ==============================
   旧版在这里写了 .empty-actions{display:none}：小于 340px 的机型上
   「调整条件 / 公益红娘」两个入口会整块消失，属于功能级缺陷，已删除。
   收紧的是尺寸，不是功能。 */

@media (max-width: 340px) {
  .entry-label {
    font-size: var(--font-size-xs);
  }
  /* 图标砖与副标题按同一比例收紧。副标题不再往下缩到 micro：
     340px 机型下单元格约 72px 宽，4 字副标题 12px 仍放得下，没必要牺牲可读性。 */
  .entry-icon {
    width: 80rpx;
    height: 80rpx;
    background-size: 44rpx 44rpx, 100% 100%;
  }
  .banner-title {
    font-size: var(--font-size-xl);
  }
  .status-checks {
    overflow-x: auto;
  }
  .empty-btn {
    min-width: 108rpx;
    padding: 0 var(--spacing-1);
  }
}