Features:

- Add preferences for WakeLock and AutoRefresh
 - Add WakeLock and AutoRefresh to Board
 - Attempt adding transitions to Board elements

UI:
 - Add '3D' styling to preference toggles

src/lib/components/ui/cards/NearbyStationsCard.svelte

@@ -15,7 +15,7 @@
 <BaseCard header={'Nearby Stations'}>
 	<div class="card-content">
 		{#if !prefs.current.NearToMe}
-			<Button onclick={() => prefs.toggleLocation(true)}>Enable Location</Button>
+			<Button onclick={() => prefs.toggleNearToMe(true)}>Enable Location</Button>
 		{:else if nearestStationsState.error && nearestStationsState.list.length === 0}
 			<p class="msg">{nearestStationsState.error}</p>
 		{:else if nearestStationsState.loading && nearestStationsState.list.length === 0}

src/lib/components/ui/form-elements/Toggle.svelte

@@ -66,6 +66,7 @@
 		border-radius: 1rem;
 		cursor: pointer;
 		transition: background-color 0.2s ease;
+		box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
 	}
 
 	.toggle-thumb {
@@ -77,8 +78,8 @@
 		background-color: var(--color-accent);
 		border-radius: 50%;
 		transition: transform 0.2s ease;
-		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-		filter: brightness(0.95);
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+		filter: brightness(1.45);
 	}
 
 	.toggle-input:checked + .toggle-track {

src/lib/components/ui/station-board/StaffServicesTable.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { ApiStationsBoard } from '@owlboard/owlboard-ts';
 	import { formatUkTime, estClass, delayClassFromTimePair } from '$lib/utils/time';
+	import { fade } from 'svelte/transition';
 
 	let { services }: { services: ApiStationsBoard.BoardService[] } = $props();
 
@@ -48,6 +49,8 @@
 	{#each services as service (getRowKey(service))}
 		<tbody>
 			<tr
+				in:fade={{duration: 150, delay:150}}
+				out:fade={{duration:150}}
 				class="service-row"
 				class:serviceCancelled={service.c}
 				class:servicePass={service.wtp}
@@ -123,14 +126,14 @@
 			</tr>
 
 			{#if service.o}
-				<tr class="toc-coach-row">
+				<tr class="toc-coach-row" in:fade={{ duration: 150, delay: 150 }} out:fade={{ duration: 150 }}>
 					<td colspan="8">
 						{service.o}
 					</td>
 				</tr>
 			{/if}
 			{#if service.c && service.cr?.r}
-				<tr class="cancel-row">
+				<tr class="cancel-row" in:fade={{ duration: 150, delay: 150 }} out:fade={{ duration: 150 }}>
 					<td colspan="8">
 						{service.cr.r}
 						{#if service.cr.l}
@@ -141,7 +144,7 @@
 				</tr>
 			{/if}
 			{#if service.dr?.r}
-				<tr class="delay-row">
+				<tr class="delay-row" in:fade={{ duration: 150, delay: 150 }} out:fade={{ duration: 150 }}>
 					<td colspan="9">
 						{service.dr.r}
 						{#if service.dr.l}