feat: consolidate user preferences into dedicated settings page (#496)

* feat: consolidate user preferences into dedicated settings page

- create /settings route with all preferences consolidated:
- appearance (theme, accent color)
- playback (auto-advance)
- privacy & display (sensitive artwork, timed comments)
- integrations (teal.fm scrobbling)
- developer (API tokens with OAuth flow)
- account (delete with confirmation)

- slim down portal to focus on content management:
- profile settings, tracks, albums, export
- remove preference toggles (moved to /settings)
- remove dev tokens section (moved to /settings)
- remove account deletion (moved to /settings)

- add "all settings →" link to both SettingsMenu and ProfileMenu
- update SensitiveImage tooltip from "enable in portal" to "enable in settings"
- add TokenInfo type for developer tokens
- clean up ~500 lines of unused CSS from portal

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[e-mail]>

* fix: add font-family inherit to buttons, rename profile → portal in mobile menu

- add font-family: inherit to all buttons in settings page:
revoke-btn, copy-btn, dismiss-btn, create-token-btn,
delete-account-btn, cancel-btn, confirm-delete-btn
- rename mobile menu item from "profile" to "portal" to match route
- update icon to grid layout to better represent portal concept

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[e-mail]>

* refactor: move delete account from settings to portal

Delete account belongs in portal's "your data" section because:
- It's a destructive action on your data, not a preference
- It has an option about AT Protocol records (your data)
- Export is already in portal - delete is the inverse operation

Settings = preferences (theme, colors, toggles, API access)
Portal = your content and data (profile, tracks, albums, export, delete)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[e-mail]>

---------

Co-authored-by: Claude <[e-mail]>

frontend/src/lib/components/ProfileMenu.svelte

···
 				<nav class="menu-items">
 					{#if !isOnPortal}
 						<a href="/portal" class="menu-item" onclick={closeMenu}>
-							<svg width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
-								<circle cx="8" cy="5" r="3" fill="none" />
-								<path d="M3 14c0-2.5 2-4.5 5-4.5s5 2 5 4.5" />
+							<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+								<rect x="3" y="3" width="7" height="7"></rect>
+								<rect x="14" y="3" width="7" height="7"></rect>
+								<rect x="14" y="14" width="7" height="7"></rect>
+								<rect x="3" y="14" width="7" height="7"></rect>
 							</svg>
 							<div class="item-content">
-								<span class="item-title">profile</span>
+								<span class="item-title">portal</span>
 								<span class="item-subtitle">@{user?.handle}</span>
 							</div>
 						</a>
···
 							<span class="toggle-text">auto-play next</span>
 						</label>
 					</section>
+
+					<a href="/settings" class="all-settings-link" onclick={closeMenu}>
+						all settings →
+					</a>
 				</div>
 			{/if}
 		</div>
···
 
 	.toggle-text {
 		white-space: nowrap;
+	}
+
+	.all-settings-link {
+		display: block;
+		text-align: center;
+		padding: 1rem;
+		margin-top: 0.5rem;
+		border-top: 1px solid var(--border-subtle);
+		color: var(--text-secondary);
+		text-decoration: none;
+		font-size: 0.9rem;
+		transition: color 0.15s;
+	}
+
+	.all-settings-link:hover {
+		color: var(--accent);
 	}
 
 	@keyframes fadeIn {

frontend/src/lib/components/SensitiveImage.svelte

···
 	{@render children()}
 	{#if shouldBlur && !compact}
 		<div class="sensitive-tooltip">
-			<span>sensitive - enable in portal</span>
+			<span>sensitive - enable in settings</span>
 		</div>
 	{/if}
 </div>

frontend/src/lib/components/SettingsMenu.svelte

···
 				<p class="toggle-hint">when a track ends, start the next item in your queue</p>
 			</section>
 
+			<a href="/settings" class="all-settings-link" onclick={toggleSettings}>
+				all settings →
+			</a>
 		</div>
 	{/if}
 </div>
···
 		color: var(--text-tertiary);
 		font-size: 0.8rem;
 		line-height: 1.3;
+	}
+
+	.all-settings-link {
+		display: block;
+		text-align: center;
+		padding: 0.75rem;
+		margin-top: 0.5rem;
+		border-top: 1px solid var(--border-subtle);
+		color: var(--text-secondary);
+		text-decoration: none;
+		font-size: 0.85rem;
+		transition: color 0.15s;
+	}
+
+	.all-settings-link:hover {
+		color: var(--accent);
 	}
 
 	@media (max-width: 768px) {

frontend/src/lib/types.ts

···
 
 export interface ArtistAlbumSummary extends AlbumSummary {}
 
+export interface TokenInfo {
+	session_id: string;
+	name: string | null;
+	created_at: string;
+	expires_at: string | null;
+}
+

frontend/src/routes/portal/+page.svelte

···
 	let displayName = $state('');
 	let bio = $state('');
 	let avatarUrl = $state('');
-	// derive from preferences store
-	let allowComments = $derived(preferences.allowComments);
-	let enableTealScrobbling = $derived(preferences.enableTealScrobbling);
-	let tealNeedsReauth = $derived(preferences.tealNeedsReauth);
-	let showSensitiveArtwork = $derived(preferences.showSensitiveArtwork);
 	let savingProfile = $state(false);
 	let profileSuccess = $state('');
 	let profileError = $state('');
···
 	let deleteAtprotoRecords = $state(false);
 	let deleting = $state(false);
 
-	// developer token state
-	let creatingToken = $state(false);
-	let developerToken = $state<string | null>(null);
-	let tokenExpiresDays = $state(90);
-	let tokenName = $state('');
-	let tokenCopied = $state(false);
-
-	// existing tokens list
-	interface TokenInfo {
-		session_id: string;
-		name: string | null;
-		created_at: string;
-		expires_at: string | null;
-	}
-	let existingTokens = $state<TokenInfo[]>([]);
-	let loadingTokens = $state(false);
-	let revokingToken = $state<string | null>(null);
-
 	onMount(async () => {
-		// check if exchange_token is in URL (from OAuth callback)
+		// check if exchange_token is in URL (from OAuth callback for regular login)
 		const params = new URLSearchParams(window.location.search);
 		const exchangeToken = params.get('exchange_token');
 		const isDevToken = params.get('dev_token') === 'true';
 
+		// redirect dev token callbacks to settings page
+		if (exchangeToken && isDevToken) {
+			window.location.href = `/settings?exchange_token=${exchangeToken}&dev_token=true`;
+			return;
+		}
+
 		if (exchangeToken) {
-			// exchange token for session_id
+			// regular login - exchange token for session
 			try {
 				const exchangeResponse = await fetch(`${API_URL}/auth/exchange`, {
 					method: 'POST',
···
 				});
 
 				if (exchangeResponse.ok) {
-					const data = await exchangeResponse.json();
-
-					if (isDevToken) {
-						// this is a developer token - display it to the user
-						developerToken = data.session_id;
-						toast.success('developer token created - save it now!');
-					} else {
-						// regular login - initialize auth and refresh preferences
-						await auth.initialize();
-						await preferences.fetch();
-					}
+					await auth.initialize();
+					await preferences.fetch();
 				}
 			} catch (_e) {
 				console.error('failed to exchange token:', _e);
 			}
 
-			// remove exchange_token from URL
 			replaceState('/portal', {});
 		}
 
-		// wait for auth to finish loading (synced from layout)
+		// wait for auth to finish loading
 		while (auth.loading) {
 			await new Promise(resolve => setTimeout(resolve, 50));
 		}
···
 			await loadMyTracks();
 			await loadArtistProfile();
 			await loadMyAlbums();
-			await loadDeveloperTokens();
 		} catch (_e) {
 			console.error('error loading portal data:', _e);
 			error = 'failed to load portal data';
···
 			loading = false;
 		}
 	});
-
-	async function loadDeveloperTokens() {
-		loadingTokens = true;
-		try {
-			const response = await fetch(`${API_URL}/auth/developer-tokens`, {
-				credentials: 'include'
-			});
-			if (response.ok) {
-				const data = await response.json();
-				existingTokens = data.tokens;
-			}
-		} catch (_e) {
-			console.error('failed to load developer tokens:', _e);
-		} finally {
-			loadingTokens = false;
-		}
-	}
 
 	async function loadMyTracks() {
 		loadingTracks = true;
···
 			console.error('failed to load albums:', _e);
 		} finally {
 			loadingAlbums = false;
-		}
-	}
-
-	async function saveAllowComments(enabled: boolean) {
-		try {
-			await preferences.update({ allow_comments: enabled });
-			toast.success(enabled ? 'comments enabled on your tracks' : 'comments disabled');
-		} catch (_e) {
-			console.error('failed to save preference:', _e);
-			toast.error('failed to update preference');
-		}
-	}
-
-	async function saveTealScrobbling(enabled: boolean) {
-		try {
-			await preferences.update({ enable_teal_scrobbling: enabled });
-			await preferences.fetch(); // refetch to get updated teal_needs_reauth status
-			toast.success(enabled ? 'teal.fm scrobbling enabled' : 'teal.fm scrobbling disabled');
-		} catch (_e) {
-			console.error('failed to save preference:', _e);
-			toast.error('failed to update preference');
-		}
-	}
-
-	async function saveShowSensitiveArtwork(enabled: boolean) {
-		try {
-			await preferences.update({ show_sensitive_artwork: enabled });
-			toast.success(enabled ? 'sensitive artwork shown' : 'sensitive artwork hidden');
-		} catch (_e) {
-			console.error('failed to save preference:', _e);
-			toast.error('failed to update preference');
 		}
 	}
 
···
 		}
 	}
 
-	async function createDeveloperToken() {
-		creatingToken = true;
-		developerToken = null;
-		tokenCopied = false;
-
-		try {
-			// start OAuth flow for dev token - this returns an auth URL
-			const response = await fetch(`${API_URL}/auth/developer-token/start`, {
-				method: 'POST',
-				headers: { 'Content-Type': 'application/json' },
-				credentials: 'include',
-				body: JSON.stringify({
-					name: tokenName || null,
-					expires_in_days: tokenExpiresDays
-				})
-			});
-
-			if (!response.ok) {
-				const error = await response.json();
-				toast.error(error.detail || 'failed to start token creation');
-				creatingToken = false;
-				return;
-			}
-
-			const result = await response.json();
-			tokenName = ''; // clear the name field
-
-			// redirect to PDS for authorization
-			// on callback, user will return with dev_token=true and the token will be displayed
-			window.location.href = result.auth_url;
-		} catch (e) {
-			console.error('failed to create token:', e);
-			toast.error('failed to create token');
-			creatingToken = false;
-		}
-		// note: we don't set creatingToken = false here because we're redirecting
-	}
-
-	async function revokeToken(tokenId: string, name: string | null) {
-		if (!confirm(`revoke token "${name || tokenId}"?`)) return;
-
-		revokingToken = tokenId;
-		try {
-			const response = await fetch(`${API_URL}/auth/developer-tokens/${tokenId}`, {
-				method: 'DELETE',
-				credentials: 'include'
-			});
-
-			if (!response.ok) {
-				const error = await response.json();
-				toast.error(error.detail || 'failed to revoke token');
-				return;
-			}
-
-			toast.success('token revoked');
-			await loadDeveloperTokens();
-		} catch (e) {
-			console.error('failed to revoke token:', e);
-			toast.error('failed to revoke token');
-		} finally {
-			revokingToken = null;
-		}
-	}
-
-	async function copyToken() {
-		if (!developerToken) return;
-		try {
-			await navigator.clipboard.writeText(developerToken);
-			tokenCopied = true;
-			toast.success('token copied to clipboard');
-			setTimeout(() => { tokenCopied = false; }, 2000);
-		} catch (e) {
-			console.error('failed to copy:', e);
-			toast.error('failed to copy token');
-		}
-	}
-
 	async function deleteAccount() {
 		if (!auth.user || deleteConfirmText !== auth.user.handle) return;
 
···
 			const result = await response.json();
 			toast.dismiss(toastId);
 
-			// show summary of what was deleted
 			const { deleted } = result;
 			const summary = [
 				deleted.tracks && `${deleted.tracks} tracks`,
···
 
 			toast.success(`account deleted: ${summary || 'all data removed'}`);
 
-			// redirect to home after a moment
 			setTimeout(() => {
 				window.location.href = '/';
 			}, 2000);
···
 			deleting = false;
 		}
 	}
+
 </script>
 
 {#if loading}
···
 		</section>
 
 		<section class="data-section">
-			<h2>your data</h2>
-
-			<div class="data-control">
-				<div class="control-info">
-					<h3>teal.fm scrobbling</h3>
-					<p class="control-description">
-						track your listens as <a href="https://pdsls.dev/at://{auth.user?.did}/fm.teal.alpha.feed.play" target="_blank" rel="noopener">fm.teal.alpha.feed.play</a> records
-					</p>
-				</div>
-				<label class="toggle-switch">
-					<input
-						type="checkbox"
-						aria-label="Enable teal.fm scrobbling"
-						checked={enableTealScrobbling}
-						onchange={(e) => saveTealScrobbling((e.target as HTMLInputElement).checked)}
-					/>
-					<span class="toggle-slider"></span>
-					<span class="toggle-label">{enableTealScrobbling ? 'enabled' : 'disabled'}</span>
-				</label>
-			</div>
-			{#if tealNeedsReauth}
-				<div class="reauth-notice">
-					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-						<circle cx="12" cy="12" r="10" />
-						<path d="M12 16v-4M12 8h.01" />
-					</svg>
-					<span>please log out and back in to connect teal.fm</span>
-				</div>
-			{/if}
-
-			<div class="data-control">
-				<div class="control-info">
-					<h3>timed comments</h3>
-					<p class="control-description">
-						allow other users to leave comments on your tracks
-					</p>
-				</div>
-				<label class="toggle-switch">
-					<input
-						type="checkbox"
-						aria-label="Allow timed comments on your tracks"
-						checked={allowComments}
-						onchange={(e) => saveAllowComments((e.target as HTMLInputElement).checked)}
-					/>
-					<span class="toggle-slider"></span>
-					<span class="toggle-label">{allowComments ? 'enabled' : 'disabled'}</span>
-				</label>
-			</div>
-
-			<div class="data-control">
-				<div class="control-info">
-					<h3>sensitive artwork</h3>
-					<p class="control-description">
-						show artwork that has been flagged as sensitive (nudity, etc.)
-					</p>
-				</div>
-				<label class="toggle-switch">
-					<input
-						type="checkbox"
-						aria-label="Show sensitive artwork"
-						checked={showSensitiveArtwork}
-						onchange={(e) => saveShowSensitiveArtwork((e.target as HTMLInputElement).checked)}
-					/>
-					<span class="toggle-slider"></span>
-					<span class="toggle-label">{showSensitiveArtwork ? 'shown' : 'hidden'}</span>
-				</label>
+			<div class="section-header">
+				<h2>your data</h2>
+				<a href="/settings" class="settings-link">all settings →</a>
 			</div>
 
 			{#if tracks.length > 0}
···
 				</div>
 			{/if}
 
-			<div class="data-control developer-section">
-				<div class="control-info">
-					<h3>developer tokens</h3>
-					<p class="control-description">
-						create tokens for programmatic API access (uploads, track management).
-						use with the <a href="https://github.com/zzstoatzz/plyr-python-client" target="_blank" rel="noopener">python SDK</a>
-					</p>
-				</div>
-
-				{#if loadingTokens}
-					<p class="loading-tokens">loading tokens...</p>
-				{:else if existingTokens.length > 0}
-					<div class="existing-tokens">
-						<h4 class="tokens-header">active tokens</h4>
-						<div class="tokens-list">
-							{#each existingTokens as token}
-								<div class="token-item">
-									<div class="token-info">
-										<span class="token-name">{token.name || `token_${token.session_id}`}</span>
-										<span class="token-meta">
-											created {new Date(token.created_at).toLocaleDateString()}
-											{#if token.expires_at}
-												· expires {new Date(token.expires_at).toLocaleDateString()}
-											{:else}
-												· never expires
-											{/if}
-										</span>
-									</div>
-									<button
-										class="revoke-btn"
-										onclick={() => revokeToken(token.session_id, token.name)}
-										disabled={revokingToken === token.session_id}
-										title="revoke token"
-									>
-										{revokingToken === token.session_id ? '...' : 'revoke'}
-									</button>
-								</div>
-							{/each}
-						</div>
-					</div>
-				{/if}
-
-				{#if developerToken}
-					<div class="token-display">
-						<code class="token-value">{developerToken}</code>
-						<button
-							class="copy-btn"
-							onclick={copyToken}
-							title="copy token"
-						>
-							{tokenCopied ? '✓' : 'copy'}
-						</button>
-						<button
-							class="dismiss-btn"
-							onclick={() => developerToken = null}
-							title="dismiss"
-						>
-							✕
-						</button>
-					</div>
-					<p class="token-warning">
-						save this token now - you won't be able to see it again
-					</p>
-				{:else}
-					<div class="token-form">
-						<input
-							type="text"
-							class="token-name-input"
-							bind:value={tokenName}
-							placeholder="token name (optional)"
-							disabled={creatingToken}
-						/>
-						<label class="expires-label">
-							<span>expires in</span>
-							<select bind:value={tokenExpiresDays} class="expires-select">
-								<option value={30}>30 days</option>
-								<option value={90}>90 days</option>
-								<option value={180}>180 days</option>
-								<option value={365}>1 year</option>
-								<option value={0}>never</option>
-							</select>
-						</label>
-						<button
-							class="create-token-btn"
-							onclick={createDeveloperToken}
-							disabled={creatingToken}
-						>
-							{creatingToken ? 'creating...' : 'create token'}
-						</button>
-					</div>
-				{/if}
-			</div>
-
 			<div class="data-control danger-zone">
 				<div class="control-info">
 					<h3>delete account</h3>
···
 
 						<div class="atproto-section">
 							<label class="atproto-option">
-								<input
-									type="checkbox"
-									bind:checked={deleteAtprotoRecords}
-								/>
+								<input type="checkbox" bind:checked={deleteAtprotoRecords} />
 								<span>also delete records from my ATProto repo</span>
 							</label>
 							<p class="atproto-note">
···
 							</p>
 							{#if deleteAtprotoRecords}
 								<p class="atproto-warning">
-									this removes track, like, and comment records from your PDS. other users' likes and comments that reference your tracks will become orphaned (pointing to records that no longer exist).
+									this removes track, like, and comment records from your PDS. other users' likes and comments that reference your tracks will become orphaned.
 								</p>
 							{/if}
 						</div>
···
 
 						<div class="delete-actions">
 							<button
-								class="cancel-btn"
+								class="cancel-delete-btn"
 								onclick={() => {
 									showDeleteConfirm = false;
 									deleteConfirmText = '';
···
 	}
 
 	.view-profile-link:hover {
+		border-color: var(--accent);
+		color: var(--accent);
+		background: var(--bg-hover);
+	}
+
+	.settings-link {
+		color: var(--text-secondary);
+		text-decoration: none;
+		font-size: 0.8rem;
+		padding: 0.35rem 0.6rem;
+		background: var(--bg-tertiary);
+		border-radius: 5px;
+		border: 1px solid var(--border-default);
+		transition: all 0.15s;
+		white-space: nowrap;
+	}
+
+	.settings-link:hover {
 		border-color: var(--accent);
 		color: var(--accent);
 		background: var(--bg-hover);
···
 		line-height: 1.4;
 	}
 
-	.control-description a {
-		color: var(--accent);
-	}
-
-	.reauth-notice {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		padding: 0.6rem 0.75rem;
-		background: color-mix(in srgb, var(--accent) 12%, transparent);
-		border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
-		border-radius: 6px;
-		color: var(--accent);
-		font-size: 0.8rem;
-		margin-top: -0.5rem;
-	}
-
-	.reauth-notice svg {
-		flex-shrink: 0;
-	}
-
 	.export-btn {
 		padding: 0.6rem 1.25rem;
 		background: var(--accent);
···
 
 	/* danger zone / account deletion */
 	.danger-zone {
-		border-color: color-mix(in srgb, var(--error) 30%, var(--bg-tertiary));
-		background: color-mix(in srgb, var(--error) 8%, var(--bg-tertiary));
+		border-color: color-mix(in srgb, var(--error) 30%, transparent);
 		flex-direction: column;
 		align-items: stretch;
 	}
···
 
 	.danger-zone .control-description a {
 		color: var(--text-tertiary);
-		text-decoration: underline;
 	}
 
 	.danger-zone .control-description a:hover {
···
 		color: var(--error);
 		border: 1px solid var(--error);
 		border-radius: 6px;
+		font-family: inherit;
 		font-size: 0.9rem;
 		font-weight: 600;
 		cursor: pointer;
···
 	}
 
 	.delete-account-btn:hover {
-		background: var(--error);
-		color: var(--text-primary);
+		background: color-mix(in srgb, var(--error) 10%, transparent);
 	}
 
 	.delete-confirm-panel {
 		margin-top: 1rem;
-		padding-top: 1rem;
-		border-top: 1px solid color-mix(in srgb, var(--error) 25%, var(--bg-tertiary));
+		padding: 1rem;
+		background: var(--bg-primary);
+		border: 1px solid var(--border-default);
+		border-radius: 8px;
 	}
 
 	.delete-warning {
-		color: color-mix(in srgb, var(--error) 80%, white);
+		margin: 0 0 1rem;
+		color: var(--error);
 		font-size: 0.9rem;
-		margin: 0 0 1rem 0;
 		line-height: 1.5;
 	}
 
 	.atproto-section {
 		margin-bottom: 1rem;
+		padding: 0.75rem;
+		background: var(--bg-tertiary);
+		border-radius: 6px;
 	}
 
 	.atproto-option {
···
 		align-items: center;
 		gap: 0.5rem;
 		font-size: 0.9rem;
-		color: var(--text-secondary);
+		color: var(--text-primary);
 		cursor: pointer;
 	}
 
 	.atproto-option input {
 		width: 16px;
 		height: 16px;
-		cursor: pointer;
+		accent-color: var(--accent);
 	}
 
 	.atproto-note {
-		margin: 0.5rem 0 0 0;
-		font-size: 0.85rem;
-		color: var(--text-muted);
+		margin: 0.5rem 0 0;
+		font-size: 0.8rem;
+		color: var(--text-tertiary);
 	}
 
 	.atproto-note a {
-		color: var(--text-tertiary);
-		text-decoration: underline;
+		color: var(--accent);
+		text-decoration: none;
 	}
 
 	.atproto-note a:hover {
-		color: var(--text-secondary);
+		text-decoration: underline;
 	}
 
 	.atproto-warning {
-		margin: 0.75rem 0 0 0;
-		padding: 0.75rem;
-		background: color-mix(in srgb, var(--error) 10%, transparent);
-		border-left: 2px solid var(--error);
-		font-size: 0.85rem;
-		color: color-mix(in srgb, var(--error) 70%, var(--text-secondary));
-		line-height: 1.5;
+		margin: 0.5rem 0 0;
+		padding: 0.5rem;
+		background: color-mix(in srgb, var(--warning) 10%, transparent);
+		border-radius: 4px;
+		font-size: 0.8rem;
+		color: var(--warning);
 	}
 
 	.confirm-prompt {
+		margin: 0 0 0.5rem;
 		font-size: 0.9rem;
-		color: var(--text-tertiary);
-		margin: 0 0 0.5rem 0;
-	}
-
-	.confirm-prompt strong {
-		color: var(--text-primary);
-		font-family: monospace;
+		color: var(--text-secondary);
 	}
 
 	.confirm-input {
 		width: 100%;
-		padding: 0.75rem;
-		background: color-mix(in srgb, var(--error) 5%, var(--bg-primary));
-		border: 1px solid color-mix(in srgb, var(--error) 25%, var(--bg-tertiary));
+		padding: 0.6rem 0.75rem;
+		background: var(--bg-tertiary);
+		border: 1px solid var(--border-default);
 		border-radius: 6px;
 		color: var(--text-primary);
 		font-size: 0.9rem;
-		font-family: monospace;
+		font-family: inherit;
 		margin-bottom: 1rem;
 	}
 
 	.confirm-input:focus {
 		outline: none;
-		border-color: var(--error);
-	}
-
-	.confirm-input::placeholder {
-		color: var(--text-muted);
+		border-color: var(--accent);
 	}
 
 	.delete-actions {
 		display: flex;
 		gap: 0.75rem;
-		justify-content: flex-end;
 	}
 
-	.cancel-btn {
-		padding: 0.6rem 1.25rem;
+	.cancel-delete-btn {
+		flex: 1;
+		padding: 0.6rem;
 		background: transparent;
-		color: var(--text-tertiary);
-		border: 1px solid var(--border-emphasis);
+		border: 1px solid var(--border-default);
 		border-radius: 6px;
+		color: var(--text-secondary);
+		font-family: inherit;
 		font-size: 0.9rem;
 		cursor: pointer;
-		transition: all 0.2s;
+		transition: all 0.15s;
 	}
 
-	.cancel-btn:hover:not(:disabled) {
-		border-color: var(--text-muted);
-		color: var(--text-secondary);
+	.cancel-delete-btn:hover:not(:disabled) {
+		border-color: var(--text-secondary);
 	}
 
-	.cancel-btn:disabled {
+	.cancel-delete-btn:disabled {
 		opacity: 0.5;
 		cursor: not-allowed;
 	}
 
 	.confirm-delete-btn {
-		padding: 0.6rem 1.25rem;
+		flex: 1;
+		padding: 0.6rem;
 		background: var(--error);
-		color: var(--text-primary);
 		border: none;
 		border-radius: 6px;
-		font-size: 0.9rem;
-		font-weight: 600;
-		cursor: pointer;
-		transition: all 0.2s;
-	}
-
-	.confirm-delete-btn:hover:not(:disabled) {
-		background: color-mix(in srgb, var(--error) 80%, black);
-	}
-
-	.confirm-delete-btn:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-
-	.toggle-switch {
-		display: flex;
-		align-items: center;
-		gap: 0.75rem;
-		cursor: pointer;
-		flex-shrink: 0;
-	}
-
-	.toggle-switch input {
-		display: none;
-	}
-
-	.toggle-slider {
-		width: 44px;
-		height: 24px;
-		background: var(--border-default);
-		border-radius: 12px;
-		position: relative;
-		transition: background 0.2s;
-	}
-
-	.toggle-slider::after {
-		content: '';
-		position: absolute;
-		top: 2px;
-		left: 2px;
-		width: 20px;
-		height: 20px;
-		background: var(--text-tertiary);
-		border-radius: 50%;
-		transition: all 0.2s;
-	}
-
-	.toggle-switch input:checked + .toggle-slider {
-		background: var(--accent);
-	}
-
-	.toggle-switch input:checked + .toggle-slider::after {
-		left: 22px;
-		background: var(--text-primary);
-	}
-
-	.toggle-label {
-		font-size: 0.85rem;
-		color: var(--text-tertiary);
-		min-width: 60px;
-	}
-
-	/* developer token section */
-	.developer-section {
-		flex-direction: column;
-		align-items: stretch;
-		gap: 1rem;
-	}
-
-	.developer-section .control-info h3 {
-		color: var(--accent);
-	}
-
-	.token-form {
-		display: flex;
-		align-items: center;
-		gap: 0.75rem;
-		flex-wrap: wrap;
-		width: 100%;
-	}
-
-	.token-form .create-token-btn {
-		margin-left: auto;
-	}
-
-	.expires-label {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		font-size: 0.9rem;
-		color: var(--text-tertiary);
-	}
-
-	.expires-select {
-		padding: 0.5rem 0.75rem;
-		background: var(--bg-primary);
-		border: 1px solid var(--border-default);
-		border-radius: 4px;
-		color: var(--text-primary);
-		font-size: 0.9rem;
-		font-family: inherit;
-		cursor: pointer;
-	}
-
-	.expires-select:focus {
-		outline: none;
-		border-color: var(--accent);
-	}
-
-	.create-token-btn {
-		padding: 0.6rem 1.25rem;
-		background: var(--accent);
 		color: white;
-		border: none;
-		border-radius: 6px;
+		font-family: inherit;
 		font-size: 0.9rem;
 		font-weight: 600;
 		cursor: pointer;
-		transition: all 0.2s;
-		white-space: nowrap;
-		width: auto;
+		transition: all 0.15s;
 	}
 
-	.create-token-btn:hover:not(:disabled) {
+	.confirm-delete-btn:hover:not(:disabled) {
 		filter: brightness(1.1);
-		transform: translateY(-1px);
 	}
 
-	.create-token-btn:disabled {
+	.confirm-delete-btn:disabled {
 		opacity: 0.5;
 		cursor: not-allowed;
-		transform: none;
-	}
-
-	.token-display {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		background: var(--bg-primary);
-		border: 1px solid var(--border-default);
-		border-radius: 6px;
-		padding: 0.75rem;
-		overflow: hidden;
-	}
-
-	.token-value {
-		flex: 1;
-		font-family: monospace;
-		font-size: 0.85rem;
-		color: var(--success);
-		word-break: break-all;
-		user-select: all;
-	}
-
-	.copy-btn,
-	.dismiss-btn {
-		padding: 0.4rem 0.75rem;
-		background: var(--border-subtle);
-		border: 1px solid var(--border-emphasis);
-		border-radius: 4px;
-		color: var(--text-tertiary);
-		font-size: 0.85rem;
-		cursor: pointer;
-		transition: all 0.2s;
-		width: auto;
-	}
-
-	.copy-btn:hover {
-		background: var(--border-emphasis);
-		border-color: var(--accent);
-		color: var(--accent);
-	}
-
-	.dismiss-btn:hover {
-		background: var(--border-emphasis);
-		border-color: var(--text-muted);
-		color: var(--text-secondary);
-	}
-
-	.token-warning {
-		font-size: 0.85rem;
-		color: var(--warning);
-		margin: 0;
-	}
-
-	/* existing tokens list */
-	.existing-tokens {
-		width: 100%;
-		margin-bottom: 1rem;
-	}
-
-	.tokens-header {
-		font-size: 0.9rem;
-		font-weight: 600;
-		color: var(--text-tertiary);
-		margin: 0 0 0.75rem 0;
-	}
-
-	.tokens-list {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-	}
-
-	.token-item {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		gap: 1rem;
-		padding: 0.75rem;
-		background: var(--bg-primary);
-		border: 1px solid var(--border-subtle);
-		border-radius: 6px;
-	}
-
-	.token-info {
-		display: flex;
-		flex-direction: column;
-		gap: 0.25rem;
-		min-width: 0;
-		flex: 1;
-	}
-
-	.token-name {
-		font-family: monospace;
-		font-size: 0.9rem;
-		color: var(--text-primary);
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-
-	.token-meta {
-		font-size: 0.8rem;
-		color: var(--text-muted);
-	}
-
-	.revoke-btn {
-		padding: 0.4rem 0.75rem;
-		background: transparent;
-		border: 1px solid color-mix(in srgb, var(--error) 30%, var(--bg-tertiary));
-		border-radius: 4px;
-		color: var(--error);
-		font-size: 0.85rem;
-		cursor: pointer;
-		transition: all 0.2s;
-		width: auto;
-		flex-shrink: 0;
-	}
-
-	.revoke-btn:hover:not(:disabled) {
-		background: color-mix(in srgb, var(--error) 10%, transparent);
-		border-color: var(--error);
-	}
-
-	.revoke-btn:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-
-	.token-name-input {
-		padding: 0.5rem 0.75rem;
-		background: var(--bg-primary);
-		border: 1px solid var(--border-default);
-		border-radius: 4px;
-		color: var(--text-primary);
-		font-size: 0.9rem;
-		font-family: inherit;
-		min-width: 150px;
-	}
-
-	.token-name-input:focus {
-		outline: none;
-		border-color: var(--accent);
-	}
-
-	.token-name-input:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-
-	.loading-tokens {
-		font-size: 0.9rem;
-		color: var(--text-muted);
-		margin: 0;
 	}
 
 	/* mobile responsive */
···
 		}
 
 		.export-btn {
-			padding: 0.5rem 0.85rem;
-			font-size: 0.8rem;
-		}
-
-		.toggle-switch {
-			gap: 0.5rem;
-		}
-
-		.toggle-slider {
-			width: 40px;
-			height: 22px;
-		}
-
-		.toggle-slider::after {
-			width: 18px;
-			height: 18px;
-		}
-
-		.toggle-switch input:checked + .toggle-slider::after {
-			left: 20px;
-		}
-
-		.toggle-label {
-			font-size: 0.75rem;
-			min-width: auto;
-		}
-
-		/* developer section mobile */
-		.token-form {
-			gap: 0.75rem;
-		}
-
-		.token-name-input {
-			min-width: 100px;
-			font-size: 0.85rem;
-			padding: 0.45rem 0.6rem;
-		}
-
-		.expires-label {
-			font-size: 0.8rem;
-		}
-
-		.expires-select {
-			font-size: 0.8rem;
-			padding: 0.4rem 0.6rem;
-		}
-
-		.create-token-btn {
-			padding: 0.5rem 0.85rem;
-			font-size: 0.8rem;
-		}
-
-		.token-display {
-			gap: 0.5rem;
-		}
-
-		.token-value {
-			font-size: 0.75rem;
-			padding: 0.5rem;
-		}
-
-		.copy-btn,
-		.dismiss-btn {
-			padding: 0.35rem 0.6rem;
-			font-size: 0.75rem;
-		}
-
-		.token-warning {
-			font-size: 0.75rem;
-		}
-
-		.tokens-header {
-			font-size: 0.8rem;
-		}
-
-		.token-item {
-			padding: 0.6rem;
-			gap: 0.5rem;
-		}
-
-		.token-name {
-			font-size: 0.8rem;
-		}
-
-		.token-meta {
-			font-size: 0.7rem;
-		}
-
-		.revoke-btn {
-			padding: 0.35rem 0.6rem;
-			font-size: 0.75rem;
-		}
-
-		/* danger zone mobile */
-		.delete-account-btn {
-			padding: 0.5rem 0.85rem;
-			font-size: 0.8rem;
-		}
-
-		.delete-warning {
-			font-size: 0.8rem;
-		}
-
-		.atproto-option {
-			font-size: 0.8rem;
-		}
-
-		.atproto-note,
-		.atproto-warning {
-			font-size: 0.75rem;
-		}
-
-		.confirm-prompt {
-			font-size: 0.8rem;
-		}
-
-		.confirm-input {
-			font-size: 0.85rem;
-			padding: 0.6rem;
-		}
-
-		.delete-actions button {
 			padding: 0.5rem 0.85rem;
 			font-size: 0.8rem;
 		}

frontend/src/routes/settings/+page.svelte

···
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import Header from '$lib/components/Header.svelte';
+	import WaveLoading from '$lib/components/WaveLoading.svelte';
+	import type { TokenInfo } from '$lib/types';
+	import { API_URL } from '$lib/config';
+	import { toast } from '$lib/toast.svelte';
+	import { auth } from '$lib/auth.svelte';
+	import { preferences, type Theme } from '$lib/preferences.svelte';
+	import { queue } from '$lib/queue.svelte';
+
+	let loading = $state(true);
+
+	// derive from preferences store
+	let allowComments = $derived(preferences.allowComments);
+	let enableTealScrobbling = $derived(preferences.enableTealScrobbling);
+	let tealNeedsReauth = $derived(preferences.tealNeedsReauth);
+	let showSensitiveArtwork = $derived(preferences.showSensitiveArtwork);
+	let currentTheme = $derived(preferences.theme);
+	let currentColor = $derived(preferences.accentColor ?? '#6a9fff');
+	let autoAdvance = $derived(preferences.autoAdvance);
+
+	// developer token state
+	let creatingToken = $state(false);
+	let developerToken = $state<string | null>(null);
+	let tokenExpiresDays = $state(90);
+	let tokenName = $state('');
+	let tokenCopied = $state(false);
+	let existingTokens = $state<TokenInfo[]>([]);
+	let loadingTokens = $state(false);
+	let revokingToken = $state<string | null>(null);
+
+	const presetColors = [
+		{ name: 'blue', value: '#6a9fff' },
+		{ name: 'purple', value: '#a78bfa' },
+		{ name: 'pink', value: '#f472b6' },
+		{ name: 'green', value: '#4ade80' },
+		{ name: 'orange', value: '#fb923c' },
+		{ name: 'red', value: '#ef4444' }
+	];
+
+	const themes: { value: Theme; label: string; icon: string }[] = [
+		{ value: 'dark', label: 'dark', icon: 'moon' },
+		{ value: 'light', label: 'light', icon: 'sun' },
+		{ value: 'system', label: 'auto', icon: 'auto' }
+	];
+
+	onMount(async () => {
+		// check if exchange_token is in URL (from OAuth callback for dev token)
+		const params = new URLSearchParams(window.location.search);
+		const exchangeToken = params.get('exchange_token');
+		const isDevToken = params.get('dev_token') === 'true';
+
+		if (exchangeToken && isDevToken) {
+			try {
+				const exchangeResponse = await fetch(`${API_URL}/auth/exchange`, {
+					method: 'POST',
+					headers: { 'Content-Type': 'application/json' },
+					credentials: 'include',
+					body: JSON.stringify({ exchange_token: exchangeToken })
+				});
+
+				if (exchangeResponse.ok) {
+					const data = await exchangeResponse.json();
+					developerToken = data.session_id;
+					toast.success('developer token created - save it now!');
+				}
+			} catch (_e) {
+				console.error('failed to exchange token:', _e);
+			}
+
+			// remove exchange_token from URL
+			window.history.replaceState({}, '', '/settings');
+		}
+
+		// wait for auth to finish loading
+		while (auth.loading) {
+			await new Promise(resolve => setTimeout(resolve, 50));
+		}
+
+		if (!auth.isAuthenticated) {
+			window.location.href = '/login';
+			return;
+		}
+
+		await loadDeveloperTokens();
+		loading = false;
+	});
+
+	async function loadDeveloperTokens() {
+		loadingTokens = true;
+		try {
+			const response = await fetch(`${API_URL}/auth/developer-tokens`, {
+				credentials: 'include'
+			});
+			if (response.ok) {
+				const data = await response.json();
+				existingTokens = data.tokens;
+			}
+		} catch (_e) {
+			console.error('failed to load developer tokens:', _e);
+		} finally {
+			loadingTokens = false;
+		}
+	}
+
+	// appearance
+	function applyColorLocally(color: string) {
+		document.documentElement.style.setProperty('--accent', color);
+		const r = parseInt(color.slice(1, 3), 16);
+		const g = parseInt(color.slice(3, 5), 16);
+		const b = parseInt(color.slice(5, 7), 16);
+		const hover = `rgb(${Math.min(255, r + 30)}, ${Math.min(255, g + 30)}, ${Math.min(255, b + 30)})`;
+		document.documentElement.style.setProperty('--accent-hover', hover);
+	}
+
+	async function applyColor(color: string) {
+		applyColorLocally(color);
+		localStorage.setItem('accentColor', color);
+		await preferences.update({ accent_color: color });
+	}
+
+	function handleColorInput(event: Event) {
+		const input = event.target as HTMLInputElement;
+		applyColor(input.value);
+	}
+
+	function selectPreset(color: string) {
+		applyColor(color);
+	}
+
+	function selectTheme(theme: Theme) {
+		preferences.setTheme(theme);
+	}
+
+	async function handleAutoAdvanceToggle(event: Event) {
+		const input = event.target as HTMLInputElement;
+		const value = input.checked;
+		queue.setAutoAdvance(value);
+		localStorage.setItem('autoAdvance', value ? '1' : '0');
+		await preferences.update({ auto_advance: value });
+	}
+
+	// preferences
+	async function saveAllowComments(enabled: boolean) {
+		try {
+			await preferences.update({ allow_comments: enabled });
+			toast.success(enabled ? 'comments enabled on your tracks' : 'comments disabled');
+		} catch (_e) {
+			console.error('failed to save preference:', _e);
+			toast.error('failed to update preference');
+		}
+	}
+
+	async function saveTealScrobbling(enabled: boolean) {
+		try {
+			await preferences.update({ enable_teal_scrobbling: enabled });
+			await preferences.fetch();
+			toast.success(enabled ? 'teal.fm scrobbling enabled' : 'teal.fm scrobbling disabled');
+		} catch (_e) {
+			console.error('failed to save preference:', _e);
+			toast.error('failed to update preference');
+		}
+	}
+
+	async function saveShowSensitiveArtwork(enabled: boolean) {
+		try {
+			await preferences.update({ show_sensitive_artwork: enabled });
+			toast.success(enabled ? 'sensitive artwork shown' : 'sensitive artwork hidden');
+		} catch (_e) {
+			console.error('failed to save preference:', _e);
+			toast.error('failed to update preference');
+		}
+	}
+
+	// developer tokens
+	async function createDeveloperToken() {
+		creatingToken = true;
+		developerToken = null;
+		tokenCopied = false;
+
+		try {
+			const response = await fetch(`${API_URL}/auth/developer-token/start`, {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				credentials: 'include',
+				body: JSON.stringify({
+					name: tokenName || null,
+					expires_in_days: tokenExpiresDays
+				})
+			});
+
+			if (!response.ok) {
+				const error = await response.json();
+				toast.error(error.detail || 'failed to start token creation');
+				creatingToken = false;
+				return;
+			}
+
+			const result = await response.json();
+			tokenName = '';
+			window.location.href = result.auth_url;
+		} catch (e) {
+			console.error('failed to create token:', e);
+			toast.error('failed to create token');
+			creatingToken = false;
+		}
+	}
+
+	async function revokeToken(tokenId: string, name: string | null) {
+		if (!confirm(`revoke token "${name || tokenId}"?`)) return;
+
+		revokingToken = tokenId;
+		try {
+			const response = await fetch(`${API_URL}/auth/developer-tokens/${tokenId}`, {
+				method: 'DELETE',
+				credentials: 'include'
+			});
+
+			if (!response.ok) {
+				const error = await response.json();
+				toast.error(error.detail || 'failed to revoke token');
+				return;
+			}
+
+			toast.success('token revoked');
+			await loadDeveloperTokens();
+		} catch (e) {
+			console.error('failed to revoke token:', e);
+			toast.error('failed to revoke token');
+		} finally {
+			revokingToken = null;
+		}
+	}
+
+	async function copyToken() {
+		if (!developerToken) return;
+		try {
+			await navigator.clipboard.writeText(developerToken);
+			tokenCopied = true;
+			toast.success('token copied to clipboard');
+			setTimeout(() => { tokenCopied = false; }, 2000);
+		} catch (e) {
+			console.error('failed to copy:', e);
+			toast.error('failed to copy token');
+		}
+	}
+
+	async function logout() {
+		await auth.logout();
+		window.location.href = '/';
+	}
+</script>
+
+{#if loading}
+	<div class="loading">
+		<WaveLoading size="lg" message="loading..." />
+	</div>
+{:else if auth.user}
+	<Header user={auth.user} isAuthenticated={auth.isAuthenticated} onLogout={logout} />
+	<main>
+		<div class="page-header">
+			<h1>settings</h1>
+			<a href="/portal" class="portal-link">manage your content →</a>
+		</div>
+
+		<section class="settings-section">
+			<h2>appearance</h2>
+			<div class="settings-card">
+				<div class="setting-row">
+					<div class="setting-info">
+						<h3>theme</h3>
+						<p>choose your preferred color scheme</p>
+					</div>
+					<div class="theme-buttons">
+						{#each themes as theme}
+							<button
+								class="theme-btn"
+								class:active={currentTheme === theme.value}
+								onclick={() => selectTheme(theme.value)}
+								title={theme.label}
+							>
+								{#if theme.icon === 'moon'}
+									<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+										<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+									</svg>
+								{:else if theme.icon === 'sun'}
+									<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+										<circle cx="12" cy="12" r="5" />
+										<path d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72 1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
+									</svg>
+								{:else}
+									<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+										<circle cx="12" cy="12" r="9" />
+										<path d="M12 3v18" />
+										<path d="M12 3a9 9 0 0 1 0 18" fill="currentColor" opacity="0.3" />
+									</svg>
+								{/if}
+								<span>{theme.label}</span>
+							</button>
+						{/each}
+					</div>
+				</div>
+
+				<div class="setting-row">
+					<div class="setting-info">
+						<h3>accent color</h3>
+						<p>customize the accent color throughout the app</p>
+					</div>
+					<div class="color-controls">
+						<input type="color" value={currentColor} oninput={handleColorInput} class="color-input" />
+						<div class="preset-grid">
+							{#each presetColors as preset}
+								<button
+									class="preset-btn"
+									class:active={currentColor.toLowerCase() === preset.value.toLowerCase()}
+									style="background: {preset.value}"
+									onclick={() => selectPreset(preset.value)}
+									title={preset.name}
+								></button>
+							{/each}
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+
+		<section class="settings-section">
+			<h2>playback</h2>
+			<div class="settings-card">
+				<div class="setting-row">
+					<div class="setting-info">
+						<h3>auto-play next</h3>
+						<p>when a track ends, automatically play the next item in your queue</p>
+					</div>
+					<label class="toggle-switch">
+						<input
+							type="checkbox"
+							checked={autoAdvance}
+							onchange={handleAutoAdvanceToggle}
+						/>
+						<span class="toggle-slider"></span>
+					</label>
+				</div>
+			</div>
+		</section>
+
+		<section class="settings-section">
+			<h2>privacy & display</h2>
+			<div class="settings-card">
+				<div class="setting-row">
+					<div class="setting-info">
+						<h3>sensitive artwork</h3>
+						<p>show artwork that has been flagged as sensitive (nudity, etc.)</p>
+					</div>
+					<label class="toggle-switch">
+						<input
+							type="checkbox"
+							checked={showSensitiveArtwork}
+							onchange={(e) => saveShowSensitiveArtwork((e.target as HTMLInputElement).checked)}
+						/>
+						<span class="toggle-slider"></span>
+					</label>
+				</div>
+
+				<div class="setting-row">
+					<div class="setting-info">
+						<h3>timed comments</h3>
+						<p>allow other users to leave comments on your tracks</p>
+					</div>
+					<label class="toggle-switch">
+						<input
+							type="checkbox"
+							checked={allowComments}
+							onchange={(e) => saveAllowComments((e.target as HTMLInputElement).checked)}
+						/>
+						<span class="toggle-slider"></span>
+					</label>
+				</div>
+			</div>
+		</section>
+
+		<section class="settings-section">
+			<h2>integrations</h2>
+			<div class="settings-card">
+				<div class="setting-row">
+					<div class="setting-info">
+						<h3>teal.fm scrobbling</h3>
+						<p>
+							track your listens as <a href="https://pdsls.dev/at://{auth.user?.did}/fm.teal.alpha.feed.play" target="_blank" rel="noopener">fm.teal.alpha.feed.play</a> records
+						</p>
+					</div>
+					<label class="toggle-switch">
+						<input
+							type="checkbox"
+							checked={enableTealScrobbling}
+							onchange={(e) => saveTealScrobbling((e.target as HTMLInputElement).checked)}
+						/>
+						<span class="toggle-slider"></span>
+					</label>
+				</div>
+				{#if tealNeedsReauth}
+					<div class="reauth-notice">
+						<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+							<circle cx="12" cy="12" r="10" />
+							<path d="M12 16v-4M12 8h.01" />
+						</svg>
+						<span>please log out and back in to connect teal.fm</span>
+					</div>
+				{/if}
+			</div>
+		</section>
+
+		<section class="settings-section">
+			<h2>developer</h2>
+			<div class="settings-card">
+				<div class="setting-info full-width">
+					<h3>developer tokens</h3>
+					<p>
+						create tokens for programmatic API access (uploads, track management).
+						use with the <a href="https://github.com/zzstoatzz/plyr-python-client" target="_blank" rel="noopener">python SDK</a>
+					</p>
+				</div>
+
+				{#if loadingTokens}
+					<p class="loading-tokens">loading tokens...</p>
+				{:else if existingTokens.length > 0}
+					<div class="existing-tokens">
+						<h4 class="tokens-header">active tokens</h4>
+						<div class="tokens-list">
+							{#each existingTokens as token}
+								<div class="token-item">
+									<div class="token-info">
+										<span class="token-name">{token.name || `token_${token.session_id}`}</span>
+										<span class="token-meta">
+											created {new Date(token.created_at).toLocaleDateString()}
+											{#if token.expires_at}
+												· expires {new Date(token.expires_at).toLocaleDateString()}
+											{:else}
+												· never expires
+											{/if}
+										</span>
+									</div>
+									<button
+										class="revoke-btn"
+										onclick={() => revokeToken(token.session_id, token.name)}
+										disabled={revokingToken === token.session_id}
+										title="revoke token"
+									>
+										{revokingToken === token.session_id ? '...' : 'revoke'}
+									</button>
+								</div>
+							{/each}
+						</div>
+					</div>
+				{/if}
+
+				{#if developerToken}
+					<div class="token-display">
+						<code class="token-value">{developerToken}</code>
+						<button class="copy-btn" onclick={copyToken} title="copy token">
+							{tokenCopied ? '✓' : 'copy'}
+						</button>
+						<button class="dismiss-btn" onclick={() => developerToken = null} title="dismiss">
+							✕
+						</button>
+					</div>
+					<p class="token-warning">save this token now - you won't be able to see it again</p>
+				{:else}
+					<div class="token-form">
+						<input
+							type="text"
+							class="token-name-input"
+							bind:value={tokenName}
+							placeholder="token name (optional)"
+							disabled={creatingToken}
+						/>
+						<label class="expires-label">
+							<span>expires in</span>
+							<select bind:value={tokenExpiresDays} class="expires-select">
+								<option value={30}>30 days</option>
+								<option value={90}>90 days</option>
+								<option value={180}>180 days</option>
+								<option value={365}>1 year</option>
+								<option value={0}>never</option>
+							</select>
+						</label>
+						<button
+							class="create-token-btn"
+							onclick={createDeveloperToken}
+							disabled={creatingToken}
+						>
+							{creatingToken ? 'creating...' : 'create token'}
+						</button>
+					</div>
+				{/if}
+			</div>
+		</section>
+	</main>
+{/if}
+
+<style>
+	.loading {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		min-height: 100vh;
+		color: var(--text-tertiary);
+		gap: 1rem;
+	}
+
+	main {
+		max-width: 700px;
+		margin: 0 auto;
+		padding: 0 1rem calc(var(--player-height, 120px) + 2rem + env(safe-area-inset-bottom, 0px));
+	}
+
+	.page-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 2rem;
+		gap: 1rem;
+		flex-wrap: wrap;
+	}
+
+	.page-header h1 {
+		font-size: var(--text-page-heading);
+		margin: 0;
+	}
+
+	.portal-link {
+		color: var(--text-secondary);
+		text-decoration: none;
+		font-size: 0.85rem;
+		padding: 0.4rem 0.75rem;
+		background: var(--bg-tertiary);
+		border-radius: 6px;
+		border: 1px solid var(--border-default);
+		transition: all 0.15s;
+	}
+
+	.portal-link:hover {
+		border-color: var(--accent);
+		color: var(--accent);
+	}
+
+	.settings-section {
+		margin-bottom: 2rem;
+	}
+
+	.settings-section h2 {
+		font-size: 0.8rem;
+		text-transform: uppercase;
+		letter-spacing: 0.08em;
+		color: var(--text-tertiary);
+		margin-bottom: 0.75rem;
+	}
+
+	.settings-card {
+		background: var(--bg-tertiary);
+		border: 1px solid var(--border-subtle);
+		border-radius: 10px;
+		padding: 1rem 1.25rem;
+	}
+
+	.setting-row {
+		display: flex;
+		justify-content: space-between;
+		align-items: flex-start;
+		gap: 1.5rem;
+		padding: 0.75rem 0;
+	}
+
+	.setting-row:not(:last-child) {
+		border-bottom: 1px solid var(--border-subtle);
+	}
+
+	.setting-info {
+		flex: 1;
+		min-width: 0;
+	}
+
+	.setting-info.full-width {
+		margin-bottom: 1rem;
+	}
+
+	.setting-info h3 {
+		margin: 0 0 0.25rem;
+		font-size: 0.95rem;
+		font-weight: 600;
+		color: var(--text-primary);
+	}
+
+	.setting-info p {
+		margin: 0;
+		font-size: 0.8rem;
+		color: var(--text-tertiary);
+		line-height: 1.4;
+	}
+
+	.setting-info a {
+		color: var(--accent);
+		text-decoration: none;
+	}
+
+	.setting-info a:hover {
+		text-decoration: underline;
+	}
+
+	/* theme buttons */
+	.theme-buttons {
+		display: flex;
+		gap: 0.5rem;
+		flex-shrink: 0;
+	}
+
+	.theme-btn {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.3rem;
+		padding: 0.6rem 0.75rem;
+		background: var(--bg-primary);
+		border: 1px solid var(--border-default);
+		border-radius: 8px;
+		color: var(--text-secondary);
+		cursor: pointer;
+		transition: all 0.15s;
+		min-width: 60px;
+	}
+
+	.theme-btn:hover {
+		border-color: var(--accent);
+		color: var(--accent);
+	}
+
+	.theme-btn.active {
+		background: color-mix(in srgb, var(--accent) 15%, transparent);
+		border-color: var(--accent);
+		color: var(--accent);
+	}
+
+	.theme-btn svg {
+		width: 18px;
+		height: 18px;
+	}
+
+	.theme-btn span {
+		font-size: 0.65rem;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+	}
+
+	/* color controls */
+	.color-controls {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		flex-shrink: 0;
+	}
+
+	.color-input {
+		width: 40px;
+		height: 40px;
+		border: 1px solid var(--border-default);
+		border-radius: 8px;
+		cursor: pointer;
+		background: transparent;
+	}
+
+	.color-input::-webkit-color-swatch-wrapper {
+		padding: 3px;
+	}
+
+	.color-input::-webkit-color-swatch {
+		border-radius: 4px;
+		border: none;
+	}
+
+	.preset-grid {
+		display: flex;
+		gap: 0.4rem;
+	}
+
+	.preset-btn {
+		width: 32px;
+		height: 32px;
+		border-radius: 6px;
+		border: 2px solid transparent;
+		cursor: pointer;
+		transition: all 0.15s;
+		padding: 0;
+	}
+
+	.preset-btn:hover {
+		transform: scale(1.1);
+	}
+
+	.preset-btn.active {
+		border-color: var(--text-primary);
+		box-shadow: 0 0 0 1px var(--bg-secondary);
+	}
+
+	/* toggle switch */
+	.toggle-switch {
+		position: relative;
+		display: inline-block;
+		flex-shrink: 0;
+	}
+
+	.toggle-switch input {
+		opacity: 0;
+		width: 0;
+		height: 0;
+		position: absolute;
+	}
+
+	.toggle-slider {
+		display: block;
+		width: 48px;
+		height: 28px;
+		background: var(--border-default);
+		border-radius: 999px;
+		position: relative;
+		cursor: pointer;
+		transition: background 0.2s;
+	}
+
+	.toggle-slider::after {
+		content: '';
+		position: absolute;
+		top: 4px;
+		left: 4px;
+		width: 20px;
+		height: 20px;
+		border-radius: 50%;
+		background: var(--text-secondary);
+		transition: transform 0.2s, background 0.2s;
+	}
+
+	.toggle-switch input:checked + .toggle-slider {
+		background: color-mix(in srgb, var(--accent) 65%, transparent);
+	}
+
+	.toggle-switch input:checked + .toggle-slider::after {
+		transform: translateX(20px);
+		background: var(--accent);
+	}
+
+	/* reauth notice */
+	.reauth-notice {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.75rem;
+		background: color-mix(in srgb, var(--warning) 10%, transparent);
+		border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
+		border-radius: 6px;
+		margin-top: 0.75rem;
+		font-size: 0.8rem;
+		color: var(--warning);
+	}
+
+	/* developer tokens */
+	.loading-tokens {
+		color: var(--text-tertiary);
+		font-size: 0.85rem;
+	}
+
+	.existing-tokens {
+		margin-top: 1rem;
+	}
+
+	.tokens-header {
+		font-size: 0.75rem;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: var(--text-tertiary);
+		margin: 0 0 0.75rem;
+	}
+
+	.tokens-list {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+
+	.token-item {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		gap: 1rem;
+		padding: 0.75rem;
+		background: var(--bg-primary);
+		border: 1px solid var(--border-default);
+		border-radius: 6px;
+	}
+
+	.token-info {
+		display: flex;
+		flex-direction: column;
+		gap: 0.2rem;
+		min-width: 0;
+	}
+
+	.token-name {
+		font-weight: 500;
+		color: var(--text-primary);
+		font-size: 0.9rem;
+	}
+
+	.token-meta {
+		font-size: 0.75rem;
+		color: var(--text-tertiary);
+	}
+
+	.revoke-btn {
+		padding: 0.4rem 0.75rem;
+		background: transparent;
+		border: 1px solid var(--border-emphasis);
+		border-radius: 4px;
+		color: var(--text-secondary);
+		font-family: inherit;
+		font-size: 0.8rem;
+		cursor: pointer;
+		transition: all 0.15s;
+		white-space: nowrap;
+	}
+
+	.revoke-btn:hover:not(:disabled) {
+		border-color: var(--error);
+		color: var(--error);
+	}
+
+	.revoke-btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.token-display {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		margin-top: 1rem;
+		padding: 0.75rem;
+		background: var(--bg-primary);
+		border: 1px solid var(--border-default);
+		border-radius: 6px;
+	}
+
+	.token-value {
+		flex: 1;
+		font-size: 0.8rem;
+		word-break: break-all;
+		color: var(--accent);
+	}
+
+	.copy-btn,
+	.dismiss-btn {
+		padding: 0.4rem 0.6rem;
+		background: var(--bg-tertiary);
+		border: 1px solid var(--border-default);
+		border-radius: 4px;
+		color: var(--text-secondary);
+		font-family: inherit;
+		font-size: 0.8rem;
+		cursor: pointer;
+		transition: all 0.15s;
+	}
+
+	.copy-btn:hover,
+	.dismiss-btn:hover {
+		border-color: var(--accent);
+		color: var(--accent);
+	}
+
+	.token-warning {
+		margin-top: 0.5rem;
+		font-size: 0.8rem;
+		color: var(--warning);
+	}
+
+	.token-form {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.75rem;
+		margin-top: 1rem;
+	}
+
+	.token-name-input {
+		flex: 1;
+		min-width: 150px;
+		padding: 0.6rem 0.75rem;
+		background: var(--bg-primary);
+		border: 1px solid var(--border-default);
+		border-radius: 6px;
+		color: var(--text-primary);
+		font-size: 0.9rem;
+		font-family: inherit;
+	}
+
+	.token-name-input:focus {
+		outline: none;
+		border-color: var(--accent);
+	}
+
+	.expires-label {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		font-size: 0.85rem;
+		color: var(--text-secondary);
+	}
+
+	.expires-select {
+		padding: 0.5rem 0.75rem;
+		background: var(--bg-primary);
+		border: 1px solid var(--border-default);
+		border-radius: 6px;
+		color: var(--text-primary);
+		font-size: 0.85rem;
+		font-family: inherit;
+		cursor: pointer;
+	}
+
+	.expires-select:focus {
+		outline: none;
+		border-color: var(--accent);
+	}
+
+	.create-token-btn {
+		padding: 0.6rem 1rem;
+		background: var(--accent);
+		border: none;
+		border-radius: 6px;
+		color: var(--text-primary);
+		font-family: inherit;
+		font-size: 0.9rem;
+		font-weight: 600;
+		cursor: pointer;
+		transition: all 0.15s;
+		white-space: nowrap;
+	}
+
+	.create-token-btn:hover:not(:disabled) {
+		background: var(--accent-hover);
+	}
+
+	.create-token-btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	@media (max-width: 600px) {
+		.setting-row {
+			flex-direction: column;
+			gap: 1rem;
+		}
+
+		.theme-buttons {
+			width: 100%;
+		}
+
+		.theme-btn {
+			flex: 1;
+		}
+
+		.color-controls {
+			width: 100%;
+			justify-content: flex-start;
+		}
+
+		.token-form {
+			flex-direction: column;
+		}
+
+		.expires-label {
+			width: 100%;
+			justify-content: space-between;
+		}
+	}
+</style>