fix(ui): 奖励卡片被 Framework7 的 .badge 压成灰色小药丸

.badge 在三处定义：Screen.css 的奖励卡、Settings.css 的状态药丸、以及
Framework7 自带的消息计数小圆点。F7 的样式表在打包顺序里排最后，于是
它赢了——每张奖励卡都被强制成 display:inline-flex、固定 20px 高、灰底
白字的圆点，名字和日期硬塞在里面。Screen.css 精心写的卡片样式基本全被
覆盖。65 个奖励堆在一起，看着自然不成样子。

* 奖励卡改名 .award/.award-grid/.award-name/.award-meta/.award-count，
  彻底避开 F7 的全局类名。
* Settings.css 里的 .badge/.badge.ok/.badge.off 没有任何地方引用，是
  死规则，唯一作用就是参与撞车——删掉。
* 顺手让卡片等高、日期用等宽数字对齐、×N 做成右侧小标签。

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

client/src/components/Screen.css

@@ -387,14 +387,22 @@
 
 .chart-stats b { color: var(--text-primary); font-weight: 620; }
 
-/* Badges / tables ---------------------------------------------------------- */
+/* Awards / tables ---------------------------------------------------------- */
-.badge-grid {
+/* Named .award, not .badge: Framework7 ships its own bare `.badge` for the
+   little grey notification dot, its stylesheet lands last in the bundle, and
+   it was flattening every one of these cards into a 20px pill. */
+.award-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   gap: 0.6rem;
 }
 
-.badge {
+.award {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 0.35rem;
+  min-height: 4.4rem;
   background: var(--surface-1);
   border: 1px solid var(--border);
   border-left: 3px solid var(--series-4);
@@ -402,9 +410,32 @@
   padding: 0.65rem 0.8rem;
 }
 
-.badge-name { font-size: 0.84rem; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
+.award-name {
-.badge-meta { margin-top: 0.28rem; font-size: 0.72rem; color: var(--text-muted); display: flex; gap: 0.45rem; }
+  font-size: 0.84rem;
-.badge-count { color: var(--accent); font-weight: 600; }
+  font-weight: 600;
+  color: var(--text-primary);
+  line-height: 1.35;
+}
+
+.award-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.45rem;
+  font-size: 0.72rem;
+  color: var(--text-muted);
+  /* Dates line up across the grid instead of wandering with the digits. */
+  font-variant-numeric: tabular-nums;
+}
+
+.award-count {
+  flex: none;
+  padding: 0.05rem 0.36rem;
+  border-radius: 5px;
+  background: var(--accent-soft);
+  color: var(--accent);
+  font-weight: 650;
+}
 
 .table-wrap {
   border: 1px solid var(--border);

client/src/pages/ExercisePage.tsx

@@ -279,14 +279,14 @@ function ExercisePage() {
                 {year === '未知' ? '未知年份' : `${year} 年`}
                 <span className="sec-count">{list.length} 个</span>
               </h3>
-              <div className="badge-grid">
+              <div className="award-grid">
                 {list.map((b) => (
-                  <div className="badge" key={b.id}>
+                  <div className="award" key={b.id}>
-                    <div className="badge-name">{b.name || b.badge_key}</div>
+                    <div className="award-name">{b.name || b.badge_key}</div>
-                    <div className="badge-meta">
+                    <div className="award-meta">
-                      {day(b.earned_date)}
+                      <span>{day(b.earned_date)}</span>
                       {b.earned_count && b.earned_count > 1 && (
-                        <span className="badge-count">×{b.earned_count}</span>
+                        <span className="award-count">×{b.earned_count}</span>
                       )}
                     </div>
                   </div>

client/src/pages/Settings.css

@@ -68,29 +68,6 @@
   font-size: 0.82rem;
 }
 
-/* State is spelled out in the badge text; colour only reinforces it. */
-.badge {
-  display: inline-block;
-  padding: 0.15rem 0.55rem;
-  border-radius: 999px;
-  font-size: 0.74rem;
-  font-weight: 650;
-  white-space: nowrap;
-  border: 1px solid transparent;
-}
-
-.badge.ok {
-  background: color-mix(in srgb, var(--status-good) 12%, transparent);
-  color: var(--status-good);
-  border-color: color-mix(in srgb, var(--status-good) 30%, transparent);
-}
-
-.badge.off {
-  background: var(--surface-0);
-  color: var(--text-muted);
-  border-color: var(--border);
-}
-
 .badge-default {
   margin-left: 0.4rem;
   padding: 0.05rem 0.4rem;