fix(F-08): stronger selected state on hobby picker cards + biome formatting

Selected hobby cards now use dark gray fill with inverted white
text/icon for clear visual distinction. Also fixes biome formatting
across all changed files.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/client/components/ProfileSection.tsx

@@ -148,7 +148,10 @@ export function ProfileSection() {
 					{avatarUrl && (
 						<button
 							type="button"
-							onClick={() => { setAvatarUrl(null); setDirty(true); }}
+							onClick={() => {
+								setAvatarUrl(null);
+								setDirty(true);
+							}}
 							className="block text-xs text-red-500 hover:text-red-700 mt-0.5"
 						>
 							Remove
@@ -176,7 +179,10 @@ export function ProfileSection() {
 					id="displayName"
 					type="text"
 					value={displayName}
-					onChange={(e) => { setDisplayName(e.target.value); setDirty(true); }}
+					onChange={(e) => {
+						setDisplayName(e.target.value);
+						setDirty(true);
+					}}
 					maxLength={100}
 					placeholder="Your display name"
 					className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-200"
@@ -194,7 +200,10 @@ export function ProfileSection() {
 				<textarea
 					id="bio"
 					value={bio}
-					onChange={(e) => { setBio(e.target.value); setDirty(true); }}
+					onChange={(e) => {
+						setBio(e.target.value);
+						setDirty(true);
+					}}
 					maxLength={500}
 					rows={3}
 					placeholder="Tell others about yourself and your gear interests"