Polish frontend: design tokens, theming, AppBar titles, empty/loading states

Frontend usability and aesthetics pass across web and mobile:

- Add shared layout tokens (theme/dimens.dart: Insets + Breakpoints) and
  replace magic-number spacing and per-file breakpoint consts.
- Route both themes through buildAppTheme (theme/theme_builder.dart): explicit
  useMaterial3 and a shared branded textTheme (Barlow Condensed for
  display/headline/title styles); logo now reads its style from the theme.
- Move screen titles into the shared AppBar (route-derived) and drop the
  redundant in-body headers; upgrade Settings buttons to M3 FilledButton.
- Add reusable EmptyState and skeleton loaders; Devices empty state links to
  scanner status, notifications get filter-aware messages.
- Add a first-run welcome intro and Save-disabled helper text in Settings.
- Make device Filter/Sort adaptive: bottom sheet on phones, dialog on wide.
- Collapse the device-list filter chips and Sort/Filter buttons into one row;
  rename the home Scanners card title and align its style.

Tests: add EmptyState/skeleton widget tests and Settings first-run cases;
update tests for the FilledButton swap and relocated titles. 89 passing,
dart analyze clean.

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

frontend/lib/home/notification_card.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 
 import '../model/notification.dart' as oott_model;
+import '../theme/dimens.dart';
 import '../utils/friendly_date_formatter.dart';
 
 class NotificationCard extends StatefulWidget {
@@ -25,7 +26,7 @@ class _NotificationCardState extends State<NotificationCard> {
 
   Widget _buildActions(BuildContext context) {
     return Padding(
-      padding: const EdgeInsets.fromLTRB(8, 0, 8, 8),
+      padding: const EdgeInsets.fromLTRB(Insets.sm, 0, Insets.sm, Insets.sm),
       child: OverflowBar(
         alignment: MainAxisAlignment.end,
         children: [
@@ -61,13 +62,13 @@ class _NotificationCardState extends State<NotificationCard> {
         background: Container(
           color: theme.colorScheme.tertiaryContainer,
           alignment: Alignment.centerLeft,
-          padding: const EdgeInsets.only(left: 16),
+          padding: const EdgeInsets.only(left: Insets.lg),
           child: const Icon(Icons.mark_email_unread),
         ),
         secondaryBackground: Container(
           color: theme.colorScheme.primaryContainer,
           alignment: Alignment.centerRight,
-          padding: const EdgeInsets.only(right: 16),
+          padding: const EdgeInsets.only(right: Insets.lg),
           child: const Icon(Icons.done),
         ),
         child: Column(
@@ -76,8 +77,7 @@ class _NotificationCardState extends State<NotificationCard> {
             ListTile(
               leading: Icon(
                 widget.item.notificationType.icon,
-                color:
-                    widget.item.isNew ? theme.colorScheme.primary : null,
+                color: widget.item.isNew ? theme.colorScheme.primary : null,
               ),
               title: Text(
                 '${widget.formatter.format(widget.item.createdOn)} - ${widget.item.title}',
@@ -88,8 +88,9 @@ class _NotificationCardState extends State<NotificationCard> {
               subtitle: Text(
                 widget.item.body,
                 maxLines: _expanded ? null : 2,
-                overflow:
-                    _expanded ? TextOverflow.visible : TextOverflow.ellipsis,
+                overflow: _expanded
+                    ? TextOverflow.visible
+                    : TextOverflow.ellipsis,
               ),
               onTap: () => setState(() => _expanded = !_expanded),
             ),