feat(ui): design polish pass — guide disc, button states, done screen

- GuideDisc breathes with work/rest inside the sweep ring; flicks
  pulse at flick rhythm since each 1s step re-triggers inflate
- Button variants (primary/secondary/danger) with pressed feedback
- Done screen: spring-in check ring + session stats card
- Settings: round -/+ stepper, disabled at 5-30s bounds
- Home hero glow, shared Card, drawn SVG gear replaces emoji

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

src/app/settings.tsx

@@ -1,10 +1,22 @@
-import { Alert, StyleSheet, Text, View } from "react-native";
-import { Button, StatRow } from "../components/ui";
+import { Alert, Pressable, StyleSheet, Text, View } from "react-native";
+import { Button, Card, StatRow } from "../components/ui";
 import { adjustHold, currentHold, resetProgress } from "../lib/store";
 import { C } from "../lib/theme";
 import { useStore } from "../lib/useStore";
 import { MAX_HOLD, MIN_HOLD } from "../lib/workout";
 
+function StepperButton({ label, disabled, onPress }: { label: string; disabled: boolean; onPress: () => void }) {
+  return (
+    <Pressable
+      style={({ pressed }) => [s.step, disabled && s.stepDisabled, pressed && !disabled && s.stepPressed]}
+      onPress={onPress}
+      disabled={disabled}
+    >
+      <Text style={[s.stepText, disabled && s.stepTextDisabled]}>{label}</Text>
+    </Pressable>
+  );
+}
+
 export default function Settings() {
   const { sessionsCompleted, holdAdjust } = useStore();
   const hold = currentHold();
@@ -12,27 +24,26 @@ export default function Settings() {
   return (
     <View style={s.screen}>
       <Text style={s.section}>Difficulty</Text>
-      <View style={s.card}>
-        <StatRow label="Current hold" value={`${hold}s`} />
+      <Card style={{ marginBottom: 12 }}>
+        <View style={s.stepperRow}>
+          <StepperButton label="−" disabled={hold <= MIN_HOLD} onPress={() => adjustHold(-1)} />
+          <View style={s.stepperValue}>
+            <Text style={s.holdValue}>{hold}s</Text>
+            <Text style={s.holdLabel}>hold length</Text>
+          </View>
+          <StepperButton label="+" disabled={hold >= MAX_HOLD} onPress={() => adjustHold(1)} />
+        </View>
         <StatRow label="Manual adjustment" value={`${holdAdjust >= 0 ? "+" : ""}${holdAdjust}s`} />
-      </View>
-      <View style={s.row}>
-        <View style={s.half}>
-          <Button title="Easier −1s" onPress={() => hold > MIN_HOLD && adjustHold(-1)} />
-        </View>
-        <View style={s.half}>
-          <Button title="Harder +1s" onPress={() => hold < MAX_HOLD && adjustHold(1)} />
-        </View>
-      </View>
+      </Card>
       <Text style={s.hint}>
-        Holds grow automatically by 1s every 3 completed sessions ({MIN_HOLD}–{MAX_HOLD}s). Use these if a session
+        Holds grow automatically by 1s every 3 completed sessions ({MIN_HOLD}–{MAX_HOLD}s). Adjust here if a session
         feels too easy or too hard — the adjustment stacks with the automatic progression.
       </Text>
 
       <Text style={s.section}>Progress</Text>
       <Button
         title="Reset progress"
-        danger
+        variant="danger"
         onPress={() =>
           Alert.alert("Reset progress?", `This clears ${sessionsCompleted} completed sessions and starts over at ${MIN_HOLD}s holds.`, [
             { text: "Cancel", style: "cancel" },
@@ -46,17 +57,24 @@ export default function Settings() {
 
 const s = StyleSheet.create({
   screen: { flex: 1, backgroundColor: C.bg, padding: 20 },
-  section: { color: C.muted, fontSize: 13, textTransform: "uppercase", letterSpacing: 0.5, marginBottom: 8, marginTop: 12 },
-  card: {
-    backgroundColor: C.surface,
-    borderRadius: 12,
+  section: { color: C.muted, fontSize: 13, textTransform: "uppercase", letterSpacing: 1.2, marginBottom: 8, marginTop: 12 },
+  stepperRow: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingVertical: 14 },
+  stepperValue: { alignItems: "center" },
+  holdValue: { color: C.accent, fontSize: 34, fontWeight: "700", fontVariant: ["tabular-nums"] },
+  holdLabel: { color: C.muted, fontSize: 12, textTransform: "uppercase", letterSpacing: 1.2, marginTop: 2 },
+  step: {
+    width: 52,
+    height: 52,
+    borderRadius: 26,
+    backgroundColor: C.surface2,
     borderWidth: 1,
     borderColor: C.border,
-    paddingHorizontal: 16,
-    paddingVertical: 4,
-    marginBottom: 12,
+    alignItems: "center",
+    justifyContent: "center",
   },
-  row: { flexDirection: "row", gap: 12 },
-  half: { flex: 1 },
+  stepPressed: { opacity: 0.7, transform: [{ scale: 0.95 }] },
+  stepDisabled: { opacity: 0.35 },
+  stepText: { color: C.text, fontSize: 26, fontWeight: "600", lineHeight: 30 },
+  stepTextDisabled: { color: C.muted },
   hint: { color: C.muted, fontSize: 13, lineHeight: 19, marginBottom: 12 },
 });