reorganize party edit sidebar and refactor YouTubeUrlInput

- move description above sharing section
- move raid selector into top fields section, remove battle section
- add edge-to-edge dividers between sections
- add Details section title
- refactor YouTubeUrlInput to use Input component internally

src/lib/components/party/edit/YouTubeUrlInput.svelte

@@ -5,6 +5,7 @@
 	 * Validates YouTube URLs and shows a thumbnail preview when valid.
 	 */
 	import { untrack } from 'svelte'
+	import Input from '$lib/components/ui/Input.svelte'
 
 	interface Props {
 		/** YouTube URL value */
@@ -96,9 +97,8 @@
 		})
 	})
 
-	function handleInput(e: Event) {
+	function handleInput() {
-		const target = e.target as HTMLInputElement
+		// inputValue is already updated via bind:value
-		inputValue = target.value
 		// Update bound value immediately if valid (so Save captures it)
 		if (isValidYouTubeUrl(inputValue)) {
 			const newValue = inputValue.trim() || null
@@ -132,33 +132,20 @@
 </script>
 
 <div class="youtube-input-wrapper">
-	{#if label}
+	<Input
-		<label class="input-label">{label}</label>
+		{label}
-	{/if}
+		type="url"
-	<div class="input-container" class:disabled class:error={showError} class:contained>
+		placeholder="https://youtube.com/watch?v=..."
-		<input
+		bind:value={inputValue}
-			type="url"
+		handleInput={handleInput}
-			placeholder="https://youtube.com/watch?v=..."
+		handleBlur={handleBlur}
-			value={inputValue}
+		{disabled}
-			oninput={handleInput}
+		{contained}
-			onblur={handleBlur}
+		clearable
-			onkeydown={handleKeydown}
+		onClear={clearInput}
-			{disabled}
+		error={showError ? 'Please enter a valid YouTube URL' : undefined}
-			class="url-input"
+		fullWidth
-		/>
+	/>
-		{#if inputValue && !disabled}
-			<button type="button" class="clear-button" onclick={clearInput} aria-label="Clear URL">
-				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-					<line x1="18" y1="6" x2="6" y2="18" />
-					<line x1="6" y1="6" x2="18" y2="18" />
-				</svg>
-			</button>
-		{/if}
-	</div>
-
-	{#if showError}
-		<p class="error-message">Please enter a valid YouTube URL</p>
-	{/if}
 
 	{#if showPreview && thumbnailUrl}
 		<div class="preview-card">
@@ -194,99 +181,6 @@
 		gap: $unit;
 	}
 
-	.input-label {
-		font-size: $font-small;
-		font-weight: $medium;
-		color: var(--text-secondary);
-	}
-
-	.input-container {
-		display: flex;
-		align-items: center;
-		background-color: var(--input-bg);
-		border-radius: $input-corner;
-		padding: 0;
-		@include smooth-transition($duration-quick, background-color, outline);
-
-		&:hover:not(.disabled) {
-			background-color: var(--input-bg-hover);
-		}
-
-		&:focus-within:not(.disabled) {
-			outline: 2px solid $water-text-20;
-			outline-offset: -2px;
-		}
-
-		&.error {
-			outline: 2px solid $fire-text-20;
-			outline-offset: -2px;
-		}
-
-		&.disabled {
-			opacity: 0.5;
-			cursor: not-allowed;
-		}
-
-		&.contained {
-			background-color: var(--input-bound-bg);
-
-			&:hover:not(.disabled) {
-				background-color: var(--input-bound-bg-hover);
-			}
-		}
-	}
-
-	.url-input {
-		flex: 1;
-		background: transparent;
-		border: none;
-		color: var(--text-primary);
-		font-size: $font-regular;
-		font-family: inherit;
-		padding: calc($unit * 1.75) $unit-2x;
-		outline: none;
-
-		&::placeholder {
-			color: var(--text-tertiary);
-		}
-
-		&:disabled {
-			cursor: not-allowed;
-		}
-	}
-
-	.clear-button {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 24px;
-		height: 24px;
-		margin-right: $unit;
-		padding: 0;
-		border: none;
-		background: transparent;
-		color: var(--text-secondary);
-		cursor: pointer;
-		border-radius: $unit-half;
-		@include smooth-transition($duration-quick, background-color, color);
-
-		&:hover {
-			background-color: $grey-80;
-			color: var(--text-primary);
-		}
-
-		svg {
-			width: 14px;
-			height: 14px;
-		}
-	}
-
-	.error-message {
-		margin: 0;
-		font-size: $font-small;
-		color: $fire-text-20;
-	}
-
 	.preview-card {
 		background-color: var(--input-bound-bg);
 		border-radius: $page-corner;

src/lib/components/sidebar/PartyEditSidebar.svelte

@@ -280,17 +280,51 @@
 </script>
 
 <div class="party-edit-sidebar">
-	<div class="top-fields">
+	<div class="top-section">
-		<Input
+		<h3>Details</h3>
-			label="Title"
+		<div class="top-fields">
-			bind:value={name}
+			<Input
-			placeholder="Enter party title..."
+				label="Title"
-			contained
+				bind:value={name}
-			fullWidth
+				placeholder="Enter party title..."
-		/>
+				contained
-		<YouTubeUrlInput label="Video" bind:value={videoUrl} contained />
+				fullWidth
+			/>
+			<YouTubeUrlInput label="Video" bind:value={videoUrl} contained />
+			<div class="raid-field">
+				<span class="raid-label">Raid</span>
+				<button
+					type="button"
+					class="raid-select-button {getRaidElementClass(raid)}"
+					onclick={openRaidPane}
+				>
+					{#if raid}
+						<span class="raid-name">{getRaidName(raid)}</span>
+					{:else}
+						<span class="placeholder">Select raid...</span>
+					{/if}
+					<Icon name="chevron-right" size={16} class="chevron-icon" />
+				</button>
+			</div>
+		</div>
 	</div>
 
+	<hr class="divider" />
+
+	<button type="button" class="description-button" onclick={openDescriptionPane}>
+		<div class="description-header">
+			<span class="description-label">Description</span>
+			<Icon name="chevron-right" size={16} class="description-chevron" />
+		</div>
+		{#if descriptionPreview}
+			<p class="description-preview">{descriptionPreview}</p>
+		{:else}
+			<span class="description-placeholder">Add description...</span>
+		{/if}
+	</button>
+
+	<hr class="divider" />
+
 	<DetailsSection title="Sharing">
 		<DetailRow label="Visibility" noHover compact>
 			{#snippet children()}
@@ -314,36 +348,7 @@
 		{/if}
 	</DetailsSection>
 
-	<button type="button" class="description-button" onclick={openDescriptionPane}>
+	<hr class="divider" />
-		<div class="description-header">
-			<span class="description-label">Description</span>
-			<Icon name="chevron-right" size={16} class="description-chevron" />
-		</div>
-		{#if descriptionPreview}
-			<p class="description-preview">{descriptionPreview}</p>
-		{:else}
-			<span class="description-placeholder">Add description...</span>
-		{/if}
-	</button>
-
-	<DetailsSection title="Battle">
-		<DetailRow label="Raid" noHover compact>
-			{#snippet children()}
-				<button
-					type="button"
-					class="raid-select-button {getRaidElementClass(raid)}"
-					onclick={openRaidPane}
-				>
-					{#if raid}
-						<span class="raid-name">{getRaidName(raid)}</span>
-					{:else}
-						<span class="placeholder">Select raid...</span>
-					{/if}
-					<Icon name="chevron-right" size={16} class="chevron-icon" />
-				</button>
-			{/snippet}
-		</DetailRow>
-	</DetailsSection>
 
 	<BattleSettingsSection
 		bind:fullAuto
@@ -354,6 +359,8 @@
 		onchange={handleSettingsChange}
 	/>
 
+	<hr class="divider" />
+
 	<DetailsSection title="Performance">
 		<DetailRow label="Clear Time" noHover compact>
 			{#snippet children()}
@@ -392,11 +399,50 @@
 		padding-bottom: $unit-2x;
 	}
 
+	.top-section {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-2x;
+		padding: 0 $unit;
+
+		h3 {
+			margin: 0;
+			font-size: $font-name;
+			font-weight: $medium;
+			color: var(--text-primary);
+			padding: 0 $unit;
+		}
+	}
+
 	.top-fields {
 		display: flex;
 		flex-direction: column;
 		gap: $unit-2x;
-		padding: 0 $unit-2x;
+		padding: 0 $unit;
+
+		// Override Input label styling to match DetailRow
+		:global(.label) {
+			color: var(--text-secondary) !important;
+			font-size: $font-regular !important;
+			font-weight: normal !important;
+		}
+	}
+
+	.divider {
+		border: none;
+		border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.04));
+		margin: 0;
+	}
+
+	.raid-field {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-half;
+	}
+
+	.raid-label {
+		font-size: $font-regular;
+		color: var(--text-secondary);
 	}
 
 	.raid-select-button {