feat: complete 20-screen onboarding flow

Full quiz flow s01-s20: splash, intro, value prop, social proof,
name/skin-type/age/concerns/goal quiz with insights, analysing loader,
result with skin score, AM/PM routines, ingredient science, signup, welcome.

Duolingo-style design: flat cards, pressable SButton (Stack trick),
4px progress bar, mascot moods (wave/think/analyze/celebrate),
confetti on result+welcome, personalized content throughout.

lib/screens/onboarding/s09_concerns.dart

@@ -0,0 +1,128 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_animate/flutter_animate.dart';
+import '../../theme.dart';
+import '../../widgets/s_card.dart';
+import '../../widgets/s_button.dart';
+import '../../widgets/s_progress_bar.dart';
+import '../../model/quiz_state.dart';
+import '../../router.dart';
+import 's10_concern_insight.dart';
+import '_quiz_nav.dart';
+
+class ConcernsScreen extends StatefulWidget {
+  final QuizState state;
+  const ConcernsScreen({super.key, required this.state});
+  @override
+  State<ConcernsScreen> createState() => _State();
+}
+
+class _State extends State<ConcernsScreen> {
+  final _selected = <String>[];
+
+  static const _opts = [
+    (Icons.face_retouching_natural, 'Breakouts', 'Acne, blackheads, congestion'),
+    (Icons.cloud_rounded, 'Dullness', 'Tired, uneven, grey skin'),
+    (Icons.air_rounded, 'Dryness', 'Tight, rough, flaking'),
+    (Icons.format_align_justify_rounded, 'Fine lines', 'Wrinkles, loss of firmness'),
+    (Icons.adjust_rounded, 'Dark spots', 'Hyperpigmentation, melasma'),
+    (Icons.local_fire_department_rounded, 'Redness', 'Sensitivity, flushing, rosacea'),
+  ];
+
+  void _toggle(String label) {
+    setState(() {
+      if (_selected.contains(label)) {
+        _selected.remove(label);
+      } else if (_selected.length < 3) {
+        _selected.add(label);
+      }
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: SColors.bgSurface,
+      body: SafeArea(
+        child: Column(
+          children: [
+            QuizNav(step: 4, total: 7, onBack: () => Navigator.of(context).pop()),
+            const SizedBox(height: 10),
+            Padding(padding: const EdgeInsets.symmetric(horizontal: 16), child: SProgressBar(value: 4 / 7)),
+            Expanded(
+              child: SingleChildScrollView(
+                padding: const EdgeInsets.fromLTRB(16, 24, 16, 0),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Padding(
+                      padding: const EdgeInsets.symmetric(horizontal: 8),
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          Row(
+                            crossAxisAlignment: CrossAxisAlignment.center,
+                            children: [
+                              Text('Your skin\nconcerns?', style: SText.headline2(SColors.textHead))
+                                  .animate().fadeIn(duration: 350.ms),
+                              const Spacer(),
+                              AnimatedContainer(
+                                duration: const Duration(milliseconds: 200),
+                                padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
+                                decoration: BoxDecoration(
+                                  color: _selected.isNotEmpty ? SColors.primary : SColors.borderLight,
+                                  borderRadius: BorderRadius.circular(20),
+                                ),
+                                child: Text(
+                                  '${_selected.length}/3',
+                                  style: SText.caption(
+                                    _selected.isNotEmpty ? Colors.white : SColors.textSub,
+                                  ).copyWith(fontWeight: FontWeight.w700),
+                                ),
+                              ),
+                            ],
+                          ),
+                          const SizedBox(height: 6),
+                          Text('Pick up to 3 that bother you most.', style: SText.subtitle(SColors.textSub))
+                              .animate().fadeIn(duration: 350.ms, delay: 80.ms),
+                          const SizedBox(height: 20),
+                        ],
+                      ),
+                    ),
+                    ..._opts.asMap().entries.map((e) {
+                      final i = e.key; final (icon, label, sub) = e.value;
+                      final isSel = _selected.contains(label);
+                      final disabled = !isSel && _selected.length >= 3;
+                      return Padding(
+                        padding: const EdgeInsets.only(bottom: 8),
+                        child: Opacity(
+                          opacity: disabled ? 0.35 : 1.0,
+                          child: SCard(
+                            icon: icon, label: label, sub: sub,
+                            isSelected: isSel,
+                            onTap: disabled ? () {} : () => _toggle(label),
+                          ).animate().fadeIn(duration: 280.ms, delay: (100 + i * 55).ms)
+                           .slideX(begin: 0.03, end: 0, duration: 280.ms),
+                        ),
+                      );
+                    }),
+                  ],
+                ),
+              ),
+            ),
+            Padding(
+              padding: const EdgeInsets.fromLTRB(16, 12, 16, 20),
+              child: SButton(
+                label: 'CONTINUE',
+                enabled: _selected.isNotEmpty,
+                onTap: _selected.isNotEmpty ? () {
+                  widget.state.concerns = List.from(_selected);
+                  Navigator.of(context).push(slideRoute(ConcernInsightScreen(state: widget.state)));
+                } : null,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}