style(fe): 记录页从「肥色块」改成白卡收纳

截图那个真的丑：.quick 是 128rpx 的大方块，整格铺 tone-N 的浅色底，
四个排一行就是一片肥色块，还直接浮在页面渐变上、没有卡片收纳，
不完整的行还留大缺口，整体像一张配色测试表。

改成 preview-v3（你当时认可的那版）的做法：
  每组一张白卡收纳（.card）
  颜色只集中在图标那个 96rpx 小圆角块上（.rec-ic + tone-N）
  标签用纯深色，不跟 tone 变 —— 四组底下的字统一深灰，才不花
  组标题一根同色系竖条 + 组名

.quick / .quick-grid / .tg 现在只有记录页用，直接换成 record 页私有的
.rec-* 类，不动全局。

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

pets-fe/pages/record/record.wxss

@@ -1,3 +1,38 @@
+/* 记录页只有这一页在用这套分组宫格，样式就放这里（不进 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)}
 
-/* 格子里的图标容器就是 .quick + .tone-N（app.wxss），这里不重复定义 */
+/* 组标题：一根同色系竖条 + 组名。颜色由外层 .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}