UI Phase 2 (L7): tighten Reports chart grid layout

Reduce dead whitespace and align the Reports charts to the cyber card language.
Layout only — charts, data and PDF export untouched.

- report_card_wrapper.dart: flat tonal fill + hairline outline + token radius
  (was surfaceContainerLow + hard 16 radius, no border); uppercase telemetry
  card title to match section headers.
- status_charts.dart / request_distribution_charts.dart: donut charts now use a
  fixed 150px donut with an Expanded legend beside it (was an Expanded donut +
  cramped right legend, leaving a large central gap); card height 220 -> 180.

Verified: flutter analyze lib clean; flutter build web green; visual QA (Reports)
in dark.

Co-Authored-By: claude-flow <ruv@ruv.net>

lib/screens/reports/widgets/report_card_wrapper.dart

@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:skeletonizer/skeletonizer.dart';
 
+import '../../../theme/app_surfaces.dart';
+
 /// Wraps each report chart widget in a themed Card with a title, loading
 /// skeleton and error state handling. Exposes a [GlobalKey] on the inner
 /// [RepaintBoundary] so the PDF exporter can capture the rendered chart
@@ -74,15 +76,25 @@ class ReportCardWrapper extends StatelessWidget {
       body = child;
     }
 
+    final radius = AppSurfaces.of(context).cardRadius;
+    final isDark = colors.brightness == Brightness.dark;
+
     final cardContent = Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       mainAxisSize: MainAxisSize.min,
       children: [
         Padding(
-          padding: const EdgeInsets.fromLTRB(16, 14, 16, 4),
-          child: Text(title, style: text.titleSmall),
+          padding: const EdgeInsets.fromLTRB(16, 12, 16, 10),
+          child: Text(
+            title.toUpperCase(),
+            style: text.labelMedium?.copyWith(
+              fontWeight: FontWeight.w700,
+              letterSpacing: 0.6,
+              color: colors.onSurfaceVariant,
+            ),
+          ),
         ),
-        const Divider(height: 1),
+        Divider(height: 1, color: colors.outlineVariant),
         Padding(
           padding: const EdgeInsets.all(16),
           child: height != null ? SizedBox(height: height, child: body) : body,
@@ -93,8 +105,12 @@ class ReportCardWrapper extends StatelessWidget {
     final card = Card(
       elevation: 0,
       shadowColor: Colors.transparent,
-      color: colors.surfaceContainerLow,
-      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
+      surfaceTintColor: Colors.transparent,
+      color: isDark ? colors.surfaceContainer : colors.surfaceContainerLowest,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(radius),
+        side: BorderSide(color: colors.outlineVariant),
+      ),
       child: cardContent,
     );