update crew pages with tabs navigation

src/lib/components/crew/CrewHeader.svelte

@@ -60,7 +60,6 @@
 		flex-direction: column;
 		gap: spacing.$unit;
 		padding: spacing.$unit-2x;
-		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
 	}
 
 	.header-top-row {
@@ -73,7 +72,7 @@
 	.header-info {
 		display: flex;
 		flex-direction: column;
-		gap: spacing.$unit;
+		gap: 0;
 	}
 
 	.header-below {

src/routes/(app)/crew/+page.svelte

@@ -14,6 +14,7 @@
 	import ModalFooter from '$lib/components/ui/ModalFooter.svelte'
 	import Input from '$lib/components/ui/Input.svelte'
 	import CrewHeader from '$lib/components/crew/CrewHeader.svelte'
+	import CrewTabs from '$lib/components/crew/CrewTabs.svelte'
 	import { formatDateJST } from '$lib/utils/date'
 	import { formatScore, toCrewHistoryChartData } from '$lib/utils/gw'
 	import ElementBadge from '$lib/components/ui/ElementBadge.svelte'
@@ -226,28 +227,7 @@
 					{/snippet}
 				</CrewHeader>
 
-				<div class="stats-row">
+				<CrewTabs userElement={data.currentUser?.element} />
-					<a href="/crew/members" class="stat stat-link">
-						<span class="stat-value">{crewStore.crew?.memberCount ?? 0}</span>
-						<span class="stat-label">Members</span>
-					</a>
-					<div class="stat">
-						<span
-							class="stat-value role"
-							class:captain={crewStore.isCaptain}
-							class:officer={crewStore.isViceCaptain}
-						>
-							{#if crewStore.isCaptain}
-								Captain
-							{:else if crewStore.isViceCaptain}
-								Vice Captain
-							{:else}
-								Member
-							{/if}
-						</span>
-						<span class="stat-label">Your Role</span>
-					</div>
-				</div>
 
 				<!-- GW Events Section -->
 				<div class="section-header">
@@ -432,10 +412,6 @@
 		border-radius: layout.$page-corner;
 		box-shadow: effects.$page-elevation;
 		overflow: hidden;
-
-		:global(.header-info) {
-			gap: 0;
-		}
 	}
 
 	.loading-state {
@@ -506,56 +482,6 @@
 		}
 	}
 
-	.stats-row {
-		display: flex;
-	}
-
-	.stat {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		padding: spacing.$unit-2x;
-		border-right: 1px solid rgba(0, 0, 0, 0.08);
-
-		&:last-child {
-			border-right: none;
-		}
-
-		&.stat-link {
-			text-decoration: none;
-			color: inherit;
-			transition: background-color 0.15s;
-
-			&:hover {
-				background: rgba(0, 0, 0, 0.02);
-			}
-		}
-	}
-
-	.stat-value {
-		font-size: typography.$font-medium;
-		font-weight: typography.$medium;
-		margin-bottom: 2px;
-
-		&.role {
-			font-size: typography.$font-small;
-
-			&.captain {
-				color: var(--color-gold, #b8860b);
-			}
-
-			&.officer {
-				color: var(--color-blue, #3b82f6);
-			}
-		}
-	}
-
-	.stat-label {
-		font-size: typography.$font-small;
-		color: var(--text-secondary);
-	}
-
 	// Section header
 	.section-header {
 		display: flex;

src/routes/(app)/crew/members/+page.svelte

@@ -24,6 +24,7 @@
 	import SettingsRow from '$lib/components/ui/SettingsRow.svelte'
 	import Switch from '$lib/components/ui/switch/Switch.svelte'
 	import CrewHeader from '$lib/components/crew/CrewHeader.svelte'
+	import CrewTabs from '$lib/components/crew/CrewTabs.svelte'
 	import MemberRow from '$lib/components/crew/MemberRow.svelte'
 	import PhantomRow from '$lib/components/crew/PhantomRow.svelte'
 	import ScoutUserModal from '$lib/components/crew/ScoutUserModal.svelte'
@@ -384,23 +385,11 @@
 
 <div class="page">
 	<div class="card">
-		<CrewHeader title="Members" backHref="/crew">
+		<CrewHeader
-			{#snippet belowTitle()}
+			title={crewStore.crew?.name ?? ''}
-				<div class="filter-tabs">
+			subtitle={crewStore.crew?.gamertag ?? undefined}
-					{#each filterOptions as option}
+			description={crewStore.crew?.description ?? undefined}
-						<button
+		>
-							class="filter-tab"
-							class:active={filter === option.value}
-							onclick={() => handleFilterChange(option.value)}
-						>
-							{option.label}
-							{#if option.value === 'pending' && (pendingInvitationsCount > 0 || pendingClaimPhantoms.length > 0)}
-								<span class="tab-badge">{pendingInvitationsCount + pendingClaimPhantoms.length}</span>
-							{/if}
-						</button>
-					{/each}
-				</div>
-			{/snippet}
 			{#snippet actions()}
 				{#if crewStore.isOfficer}
 					<Button
@@ -428,6 +417,23 @@
 			{/snippet}
 		</CrewHeader>
 
+		<CrewTabs userElement={data.currentUser?.element} />
+
+		<div class="filter-tabs">
+			{#each filterOptions as option}
+				<button
+					class="filter-tab"
+					class:active={filter === option.value}
+					onclick={() => handleFilterChange(option.value)}
+				>
+					{option.label}
+					{#if option.value === 'pending' && (pendingInvitationsCount > 0 || pendingClaimPhantoms.length > 0)}
+						<span class="tab-badge">{pendingInvitationsCount + pendingClaimPhantoms.length}</span>
+					{/if}
+				</button>
+			{/each}
+		</div>
+
 		<!-- Pending tab (invitations and claims) -->
 		{#if filter === 'pending'}
 			{#if invitationsQuery.isLoading || phantomsQuery.isLoading}
@@ -756,15 +762,12 @@
 		border-radius: layout.$page-corner;
 		box-shadow: effects.$page-elevation;
 		overflow: hidden;
-
-		:global(.header-info) {
-			gap: spacing.$unit-2x;
-		}
 	}
 
 	.filter-tabs {
 		display: flex;
 		gap: spacing.$unit-half;
+		padding: spacing.$unit-2x spacing.$unit-2x spacing.$unit;
 	}
 
 	.filter-tab {