move teams/[id] route into [[tab=tab]] optional segment

src/lib/components/ui/DetailItem.svelte

@@ -110,11 +110,29 @@
 		justify-content: space-between;
 		align-items: center;
 		padding: spacing.$unit 0;
-		background: colors.$grey-90;
 		border-radius: layout.$item-corner;
 		font-size: typography.$font-regular;
 		min-height: calc(spacing.$unit * 5);
 
+		&:not(.editable) {
+			padding: spacing.$unit;
+			margin: 0 calc(spacing.$unit * -1);
+		}
+
+		&:hover:not(.editable):not(.hasChildren) {
+			background: colors.$grey-90;
+		}
+
+		&.editable:focus-within,
+		&.hasChildren:focus-within {
+			background: var(--input-bg-hover);
+		}
+
+		&.editable,
+		&.hasChildren {
+			background: var(--input-bg);
+		}
+
 		.label-container {
 			display: flex;
 			flex-direction: column;

src/lib/features/database/characters/sections/CharacterImagesSection.svelte

@@ -89,9 +89,7 @@
 {#if canEdit}
 	<DetailsContainer title="Image Management">
 		<div class="images-section">
-			<p class="description">
+			<p class="description">Download character images from the game server to your storage.</p>
-				Download character images from the game server to your storage.
-			</p>
 
 			<div class="actions">
 				<Button
@@ -119,13 +117,11 @@
 				<div class="status" class:success={isComplete} class:error={isFailed}>
 					{#if isInProgress}
 						<div class="progress-bar">
-							<div
+							<div class="progress-fill" style="width: {downloadStatus.progress ?? 0}%"></div>
-								class="progress-fill"
-								style="width: {downloadStatus.progress ?? 0}%"
-							></div>
 						</div>
 						<span class="progress-text">
-							{downloadStatus.progress ?? 0}% - {downloadStatus.imagesDownloaded ?? 0}/{downloadStatus.imagesTotal ?? '?'} images
+							{downloadStatus.progress ?? 0}% - {downloadStatus.imagesDownloaded ??
+								0}/{downloadStatus.imagesTotal ?? '?'} images
 						</span>
 					{:else if isComplete}
 						<span>Download complete - {downloadStatus.imagesDownloaded} images downloaded</span>
@@ -151,7 +147,7 @@
 		display: flex;
 		flex-direction: column;
 		gap: spacing.$unit-2x;
-		padding: spacing.$unit-2x;
+		padding: spacing.$unit-2x 0;
 	}
 
 	.description {

src/routes/(app)/database/characters/[id]/+page.svelte

@@ -292,7 +292,7 @@
 		display: flex;
 		flex-wrap: wrap;
 		gap: spacing.$unit-2x;
-		padding: spacing.$unit-2x;
+		padding: spacing.$unit-2x 0;
 	}
 
 	.related-unit {