fix(h5): center grouped score unit and tighten report summary spacing

h5/css/ui-20261012.css

@@ -107,19 +107,19 @@
 #dims-note .dims-note-l1 { font-size: 12px; line-height: 1.5; }
 #dims-note .dims-note-l2 { font-size: 11px; line-height: 1.5; margin-top: 3px; }
 
-/* Center the complete score stack inside the ring, with the age label exactly
-   25 CSS px above its number. Units do not offset the score digits. */
+/* Center the complete score stack inside the ring and the gapless age stack
+   against the same vertical center. Center score digits and unit as one row. */
 .sum-score, .sum-age { flex-direction: column; align-items: center; justify-content: center; gap: 0; }
-.sum-age { align-self: stretch; gap: 25px; }
-.ring-center { gap: 6px; }
+.sum-age { align-self: stretch; gap: 0; }
+.ring-center { gap: 0; }
 .ring-center .stat-label, .sum-age > .stat-label { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink); }
 .score-dial, .age-dial { position: relative; width: calc(108 * var(--u)); height: calc(108 * var(--u)); }
 .age-dial { height: auto; display: flex; align-items: center; justify-content: center; }
 .age-dial .stat-age { margin-top: 0; display: flex; align-items: baseline; }
 .age-dial .stat-age b { display: block; line-height: 1; }
-#stat-score { position: relative; }
+#stat-score { display: flex; align-items: baseline; justify-content: center; }
 #stat-score b { display: block; letter-spacing: 0; }
-#stat-score i { position: absolute; left: 100%; bottom: 3px; margin-left: 2px; }
+#stat-score i { position: static; margin-left: 2px; }
 .card-care .card-heading { text-align: left; }
 
 /* The profile is a fixed page, not a scroll container. Keep normal-height PSD

h5/index.html

@@ -179,8 +179,8 @@
             <circle class="ring-fg" id="ring-fg" cx="60" cy="60" r="52"/>
           </svg>
           <div class="ring-center">
-            <span class="stat-label">综合评分</span>
             <span class="stat-value" id="stat-score"><b>--</b><i>分</i></span>
+            <span class="stat-label">综合评分</span>
           </div>
         </div>
       </div>

h5/test/report-touch-layout.mjs

@@ -40,14 +40,19 @@ try {
           const r = document.querySelector(selector).getBoundingClientRect();
           return { x: r.x, y: r.y, width: r.width, height: r.height, bottom: r.bottom };
         };
-        return { dial: rect('.score-dial'), score: rect('#stat-score b'), title: rect('.ring-center .stat-label'),
+        return { dial: rect('.score-dial'), score: rect('#stat-score'), digits: rect('#stat-score b'), unit: rect('#stat-score i'), title: rect('.ring-center .stat-label'),
           ageTitle: rect('.sum-age > .stat-label'), age: rect('#stat-age b'),
           careAlign: getComputedStyle(document.querySelector('.card-care .card-heading')).textAlign };
       });
-      assert(Math.abs(layout.score.x + layout.score.width / 2 - layout.dial.x - layout.dial.width / 2) < 1, 'score horizontally centered: ' + width + '/' + score);
-      assert(Math.abs((layout.title.y + layout.score.bottom) / 2 - layout.dial.y - layout.dial.height / 2) < 1, 'complete label + score stack vertically centered');
-      assert(layout.title.y > layout.dial.y && layout.score.bottom < layout.dial.bottom, 'both label and score stay inside the circle');
-      assert(Math.abs(layout.age.y - layout.ageTitle.bottom - 25) < 1, 'age label-to-number gap is exactly 25 CSS px');
+      assert(Math.abs(layout.unit.x - layout.digits.x - layout.digits.width - 2) < 1, 'score unit follows digits in the same row');
+      assert(Math.abs(layout.unit.x + layout.unit.width - layout.score.x - layout.score.width) < 1, 'score row includes the unit width');
+      assert(Math.abs(layout.score.x + layout.score.width / 2 - layout.dial.x - layout.dial.width / 2) < 1, 'score and unit jointly horizontally centered: ' + width + '/' + score);
+      assert(Math.abs(layout.title.y - layout.score.bottom) < 1, 'score title below the number with zero gap');
+      assert(Math.abs(layout.title.x + layout.title.width / 2 - layout.score.x - layout.score.width / 2) < 1, 'score title and number share the same horizontal center');
+      assert(Math.abs((layout.score.y + layout.title.bottom) / 2 - layout.dial.y - layout.dial.height / 2) < 1, 'complete score + label stack vertically centered');
+      assert(layout.score.y > layout.dial.y && layout.title.bottom < layout.dial.bottom, 'both score and label stay inside the circle');
+      assert(Math.abs(layout.age.y - layout.ageTitle.bottom) < 1, 'age label-to-number gap is zero');
+      assert(Math.abs((layout.ageTitle.y + layout.age.bottom) / 2 - layout.dial.y - layout.dial.height / 2) < 1, 'complete age stack vertically centered against the score circle');
       assert.equal(layout.careAlign, 'left');
     }
     assert(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth));
@@ -127,5 +132,5 @@ try {
     await page.screenshot({ path: path.join(process.env.H5_ARTIFACT_DIR, 'report-summary.png') });
   }
   assert.deepEqual(errors, []); assert.deepEqual(writes, []);
-  console.log('PASS: whole score stack centered inside circle/age gap 25px/care left in five widths; real finger-following three report groups, flick/snap/cancel/vertical/edges/keyboard/zoom/resize/height/ARIA; smaller JPEG hashes/dimensions/MIME; no JS errors/backend writes');
+  console.log('PASS: whole score stack centered inside circle/gapless age stack vertically centered/care left in five widths; real finger-following three report groups, flick/snap/cancel/vertical/edges/keyboard/zoom/resize/height/ARIA; smaller JPEG hashes/dimensions/MIME; no JS errors/backend writes');
 } finally { await browser.close(); }