/* 记录页只有这一页在用这套分组宫格，样式就放这里（不进 app.wxss）。
   原来是整格铺 tone 浅色底 + 直接浮在页面渐变上，四个一行是一片肥色块。
   改成：每组一张白卡收纳，颜色只集中在图标那个小圆角块上，标签用纯深色。 */

/* .card 自带 --sp-5 padding 和 margin-bottom，这里只把上下内边距收紧一点，
   底部留白靠 card 的 margin-bottom，不再叠 margin-top */
.rec-group{padding:var(--sp-4) var(--sp-4) var(--sp-3)}

/* 组标题：一根同色系竖条 + 组名。颜色由外层 .g-N 决定 */
.rec-ghead{
  display:flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-md);font-weight:var(--fw-b);color:var(--text);
  margin-bottom:var(--sp-3);
}
.rec-bar{width:6rpx;height:28rpx;border-radius:3rpx;background:currentColor}
.g-1 .rec-bar{color:var(--primary)}
.g-2 .rec-bar{color:var(--green)}
.g-3 .rec-bar{color:var(--purple)}
.g-4 .rec-bar{color:var(--blue)}

.rec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4) var(--sp-2)}

.rec-item{
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
  padding-bottom:var(--sp-2);border-radius:var(--r-md);
  transition:transform .06s;
}
.rec-item-hover{transform:scale(.94)}

/* 图标的小圆角色块。tone-N（app.wxss）给它浅色底 + 深色 ink，
   pt-icon 走 currentColor 正好染成 ink 色 */
.rec-ic{
  width:96rpx;height:96rpx;border-radius:26rpx;
  display:flex;align-items:center;justify-content:center;
}

/* 标签用纯深色，不跟着 tone 变 —— 四组底下的字统一是深灰，才不花 */
.rec-label{font-size:var(--fs-sm);color:var(--text-2);line-height:1.2}